Styling Issue

[razrfalcon]

Styling Issue

[RazrFalcon]

I don't think any app except browsers does support @font-face. So this will not be universal anyway.

To get the expected results, you have to simply install those fonts. That's it.

[paulushub]

I don't think any app except browsers does support @font-face. So this will not be universal anyway.

Below is the result for Batik 1.14, I think most libraries with complete CSS support implement @font-face. Installation does not map for generic fonts like serif, monospace etc.

Without Styling (current default)	With Styling (above css embedded)

[RazrFalcon]

Are you sure? I've just tested this file:

<svg id="svg1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <title>Simple case</title>

    <style>
        .fantasy {
            font-family: "Sedgwick Ave Display", fantasy;
        }
        @font-face {
            font-family: "Sedgwick Ave Display";
            font-style: normal;
            font-weight: 400;
            src: url(../fonts/SedgwickAveDisplay-Regular.ttf) format('truetype');
         }
    </style>

    <path id="crosshair" d="M 20 100 L 180 100 M 100 20 L 100 180"
          stroke="gray" stroke-width="0.5"/>

    <text id="text1" x="32" y="100" font-family="fantasy" font-size="64">Text</text>

    <!-- image frame -->
    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>

And all applications, even browsers, ignored it.

[RazrFalcon]

Installation does not map for generic fonts like serif, monospace etc.

Yes, you just have to check those tests manually. Testing cannot be automated anyway.

[paulushub]

And all applications, even browsers, ignored it.

True, however, the issue here requires a bit more investigation.
I used a different fantasy font, Old English Text MT (installed on my system) and it does not work in any browser and even in the Resvg (if you do not specify the --fantasy-family on the commandline).

<svg id="svg1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <title>Simple case</title>

    <style>
		.fantasy {
			font-family: "Old English Text MT", fantasy;
		}
    </style>

    <path id="crosshair" d="M 20 100 L 180 100 M 100 20 L 100 180"
          stroke="gray" stroke-width="0.5"/>

    <text id="text1" x="32" y="100" font-family="fantasy" font-size="48">Text</text>

    <!-- image frame -->
    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>

I also tried Papyrus for the fantasy font and it fails!
For Resvg, even setting Papyrus directly fails, but works in all browsers.

<svg id="svg1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <title>Simple case</title>

    <path id="crosshair" d="M 20 100 L 180 100 M 100 20 L 100 180"
          stroke="gray" stroke-width="0.5"/>

    <text id="text1" x="32" y="100" font-family="Papyrus" font-size="48">Text</text>

    <!-- image frame -->
    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>

[RazrFalcon]

Fonts testing is basically manual at this point. I simply checking that results are somewhat correct.
For example, if I set font-family to monospace, I don't care what font an app would choose, as long as it's monospace. I don't expect all apps to resolve the same font.

[paulushub]

@RazrFalcon I understand your point. As I stated earlier, I was trying to see if we can get a consistent results through a CSS definition (after seeing the results from Inkscape, the first sample).
However, the current results I am getting is that Resvg does not seem to support font-family installed on the system. Can you confirm this? I tried many and none is working for the sample above.

[RazrFalcon]

resvg does support system fonts. It doesn't support @font-face from CSS.

[RazrFalcon]

Sadly, an SVG test suite has to be tailored to the lowest common denominator. Which means no CSS.
For example, librsvg doesn't allow external images at all. So we have to bloat our tests with base64 encoded one.