Bug 20192 – Tiny fonts scaled up end up too large in Safari

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: SVG

[Larry Baker]

The following simple test SVG file renders fine on FireFox; Safari/WebKit do not render the text correctly.  It looks like the <svg> viewBox attribute and the <g> element attributes are not being inherited by the <text> element.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
                     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     viewBox="0 0 11 8.5">
<g stroke-width=".02" stroke-linecap="round" stroke-linejoin="round">
<g stroke="black" fill="black">
<g transform="translate(0.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 0.00
 </text>
</g>
<g transform="translate(1.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 0.80
 </text>
</g>
<g transform="translate(2.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 1.60
 </text>
</g>
<g transform="translate(3.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 2.40
 </text>
</g>
<g transform="translate(4.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 3.20
 </text>
</g>
<g transform="translate(5.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 4.00
 </text>
</g>
<g transform="translate(6.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 4.80
 </text>
</g>
<g transform="translate(7.65,7.95)">
 <text font-family="sans-serif" font-size="0.168">
 5.60
 </text>
</g>
<g transform="translate(4.08,8.15)">
 <text font-family="sans-serif" font-size="0.224">
 x-axis
 </text>
</g>
<path fill="none"
      d="M 0.75 7.75
         L 0.75 7.75
         L 0.75 7.82"
/>
<path fill="none"
      d="M 0.75 7.75
         L 1.75 7.75
         L 1.75 7.82"
/>
<path fill="none"
      d="M 1.75 7.75
         L 2.75 7.75
         L 2.75 7.82"
/>
<path fill="none"
      d="M 2.75 7.75
         L 3.75 7.75
         L 3.75 7.82"
/>
<path fill="none"
      d="M 3.75 7.75
         L 4.75 7.75
         L 4.75 7.82"
/>
<path fill="none"
      d="M 4.75 7.75
         L 5.75 7.75
         L 5.75 7.82"
/>
<path fill="none"
      d="M 5.75 7.75
         L 6.75 7.75
         L 6.75 7.82"
/>
<path fill="none"
      d="M 6.75 7.75
         L 7.75 7.75
         L 7.75 7.82"
/>
<g transform="translate(0.65,7.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 -0.60
 </text>
</g>
<g transform="translate(0.65,6.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 -0.40
 </text>
</g>
<g transform="translate(0.65,5.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 -0.20
 </text>
</g>
<g transform="translate(0.65,4.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 -0.00
 </text>
</g>
<g transform="translate(0.65,3.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 0.20
 </text>
</g>
<g transform="translate(0.65,2.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 0.40
 </text>
</g>
<g transform="translate(0.65,1.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 0.60
 </text>
</g>
<g transform="translate(0.65,0.85) rotate(-90)">
 <text font-family="sans-serif" font-size="0.168">
 0.80
 </text>
</g>
<g transform="translate(0.5,4.42) rotate(-90)">
 <text font-family="sans-serif" font-size="0.224">
 y-axis
 </text>
</g>
<path fill="none"
      d="M 0.75 7.75
         L 0.75 7.75
         L 0.68 7.75"
/>
<path fill="none"
      d="M 0.75 7.75
         L 0.75 6.75
         L 0.68 6.75"
/>
<path fill="none"
      d="M 0.75 6.75
         L 0.75 5.75
         L 0.68 5.75"
/>
<path fill="none"
      d="M 0.75 5.75
         L 0.75 4.75
         L 0.68 4.75"
/>
<path fill="none"
      d="M 0.75 4.75
         L 0.75 3.75
         L 0.68 3.75"
/>
<path fill="none"
      d="M 0.75 3.75
         L 0.75 2.75
         L 0.68 2.75"
/>
<path fill="none"
      d="M 0.75 2.75
         L 0.75 1.75
         L 0.68 1.75"
/>
<path fill="none"
      d="M 0.75 1.75
         L 0.75 0.75
         L 0.68 0.75"
/>
<path fill="none"
      d="M 0.75 4.75
         L 0.8 4.148
         L 0.85 3.602
         L 0.9 3.118
         L 0.95 2.697
         L 1 2.344
         L 1.05 2.058
         L 1.1 1.838
         L 1.15 1.684
         L 1.2 1.594
         L 1.25 1.562
         L 1.3 1.587
         L 1.35 1.662
         L 1.4 1.783
         L 1.45 1.945
         L 1.5 2.14
         L 1.55 2.364
         L 1.6 2.611
         L 1.65 2.875
         L 1.7 3.149
         L 1.75 3.429
         L 1.8 3.71
         L 1.85 3.987
         L 1.9 4.254
         L 1.95 4.51
         L 2 4.75
         L 2.05 4.971
         L 2.1 5.172
         L 2.15 5.351
         L 2.2 5.505
         L 2.25 5.635
         L 2.3 5.74
         L 2.35 5.821
         L 2.4 5.878
         L 2.45 5.911
         L 2.5 5.923
         L 2.55 5.914
         L 2.6 5.886
         L 2.65 5.841
         L 2.7 5.782
         L 2.75 5.71
         L 2.8 5.628
         L 2.85 5.537
         L 2.9 5.44
         L 2.95 5.339
         L 3 5.236
         L 3.05 5.133
         L 3.1 5.031
         L 3.15 4.932
         L 3.2 4.838
         L 3.25 4.75
         L 3.3 4.669
         L 3.35 4.595
         L 3.4 4.529
         L 3.45 4.472
         L 3.5 4.424
         L 3.55 4.386
         L 3.6 4.356
         L 3.65 4.335
         L 3.7 4.323
         L 3.75 4.319
         L 3.8 4.322
         L 3.85 4.332
         L 3.9 4.348
         L 3.95 4.37
         L 4 4.397
         L 4.05 4.427
         L 4.1 4.461
         L 4.15 4.496
         L 4.2 4.533
         L 4.25 4.571
         L 4.3 4.609
         L 4.35 4.647
         L 4.4 4.683
         L 4.45 4.718
         L 4.5 4.75
         L 4.55 4.78
         L 4.6 4.807
         L 4.65 4.831
         L 4.7 4.852
         L 4.75 4.87
         L 4.8 4.884
         L 4.85 4.895
         L 4.9 4.903
         L 4.95 4.907
         L 5 4.909
         L 5.05 4.907
         L 5.1 4.904
         L 5.15 4.898
         L 5.2 4.89
         L 5.25 4.88
         L 5.3 4.869
         L 5.35 4.856
         L 5.4 4.843
         L 5.45 4.83
         L 5.5 4.816
         L 5.55 4.802
         L 5.6 4.788
         L 5.65 4.775
         L 5.7 4.762
         L 5.75 4.75
         L 5.8 4.739
         L 5.85 4.729
         L 5.9 4.72
         L 5.95 4.712
         L 6 4.706
         L 6.05 4.701
         L 6.1 4.697
         L 6.15 4.694
         L 6.2 4.692
         L 6.25 4.692
         L 6.3 4.692
         L 6.35 4.693
         L 6.4 4.696
         L 6.45 4.699
         L 6.5 4.702
         L 6.55 4.706
         L 6.6 4.711
         L 6.65 4.716
         L 6.7 4.721
         L 6.75 4.726
         L 6.8 4.731
         L 6.85 4.736
         L 6.9 4.741
         L 6.95 4.746
         L 7 4.75
         L 7.05 4.754
         L 7.1 4.758
         L 7.15 4.761
         L 7.2 4.764
         L 7.25 4.766
         L 7.3 4.768
         L 7.35 4.77
         L 7.4 4.771
         L 7.45 4.771
         L 7.5 4.771
         L 7.55 4.771
         L 7.6 4.771
         L 7.65 4.77
         L 7.7 4.769
         L 7.75 4.768
         L 7.8 4.766
         L 7.85 4.764
         L 7.9 4.763
         L 7.95 4.761
         L 8 4.759
         L 8.05 4.757
         L 8.1 4.755
         L 8.15 4.753
         L 8.2 4.752
         L 8.25 4.75"
/>
</g>
<g stroke="blue" fill="blue">
<g transform="translate(2.25,2.75)">
 <text font-family="sans-serif" font-size="0.32">
 Functional Plot of
 </text>
</g>
<g transform="translate(2.25,3.25)">
 <text font-family="sans-serif" font-size="0.32">
 y = (e**-x) * SIN(PI*x)
 </text>
</g>
</g>
</g>
</svg>

[Mark Rowe (bdash)]

Can you please attach the SVG file to the bug report rather than pasting it into a comment?

[Larry Baker]

Created attachment 22518 [details]
SVG test plot

SVG test plot (plot.svg) fails to render text properly in either Safari Version 3.1.2 (4525.22) or WebKit latest nightly build r35401 Version 3.1.2 (4525.22) (SAME AS SAFARI???).  The file renders fine using Mozilla FireFox Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1.

[Eric Seidel (no email)]

Probably some sort of rounding issue.  I don't think this should be affected by the minimum font size scaling preference (especially since I have mine off).

I think this is the bug where font sizes under 0.5 get rounded to 0, and AppKit replaces font size 0 with 12.

See also bug 11004, bug 13891 and bug 15086.

[Larry Baker]

(In reply to comment #4)
> I think this is the bug where font sizes under 0.5 get rounded to 0, and AppKit
> replaces font size 0 with 12.
> 

Except that these are not "tiny" fonts (someone changed the Summary on me).  Unit-less font sizes are measured in user coordinate space, which, in this case, can be thought of as inches (the viewBox sets up the user coordinate space for a landscape plot, 11 X 8.5).  So, these fonts should render roughly 1/4 inch high, which they do in Firefox.  See "font-size=<length>" in SVG 1.1:

For SVG, if a <length> is provided without a unit identifier (e.g., an unqualified number
such as 128), the SVG user agent processes the <length> as a height value in the current user coordinate system.

It is as though the user coordinate space is either being ignored in this case, or not being correctly inherited.

[Eric Seidel (no email)]

CG must have some minimum size threshold that we're exceeding here.  Or maybe there is some other bug.

[Nikolas Zimmermann]

The patch on bug 12448 fixes this problem. Thanks a lot for the testcase, I've integrated it in my patch.

*** This bug has been marked as a duplicate of bug 12448 ***

[Jeroen Delcour]

Unfortunately, this bug needs to be reopened. Simply view the original attachment.

[Jeroen Delcour]

Unfortunately, this bug needs to be reopened. Simply view the original attachment to reproduce.

[Philip Rogers]

(In reply to comment #10)
> Unfortunately, this bug needs to be reopened. Simply view the original attachment to reproduce.

@Jason, this looks fine to me in Webkit nightly and Safari. Please file a new bug if you are still hitting an issue here.