Why is FireFox not properly displaying my text (Arial)

user_11225065 0
Viewed 105

I got a weird problem on Firefox. I have a <svg> element that has some <text> inside of it. The svg scales relative to the parent. Now I've noticed that something weird is happening on Firefox with my text (specifically in Arial font). Basically, when resizing the window, once the container is larger than 550px, it is displaying the font much larger than it should be.

Here is a Fiddle. Just resize the preview screen and see what happens between 645px and 652px.

Below is a gif of me resizing the window. You can clearly see that the text completely changes once the containerWidth exceeds a certain width. Almost as if it gets bolder:

https://gyazo.com/27b8284b0e3b4de88a36795a292b1bb3

I've also included 2 screenshots:

Font looking weird:

enter image description here

Font looking normal:

enter image description here

I've read here that FireFox by default displays fonts 'bolder' than Chrome & Edge, but that does not explain the fact that it only appears to happen when the container exceeds a certain width...

What is causing this and how can I fix it?

firefox fonts css html javascript
1 Answers

There are several reasons for this rendering behaviour:

  1. Arial has very sophisticated hinting instructions.
    Actually a great concept to optimize rendering for low resolution. Unfortunately different browsers (on different OS) will render the same font quite differently. Sometimes you see overly thick (or smudged) glyph stems (like in "ill") in some applications due to pixel grid alignment.

Hinting

  1. Your "text block" is split into a lot of <text> elements resulting in quirky spacing in some sizes.

Workarounds to mitigate this effect

  • You could use a <foreignObject> instead:
    The Arial will be rendered using subpixel rendering.
  • text-rendering: geometricPrecision can slightly mitigate this effect at some sizes – but might also introduce similar issues at other font sizes :(

p,
text {
  font-family: Arial, sans-serif;
  font-size: 11.5px;
}

.container {
  border: 1px solid #ccc;
  overflow: auto;
  resize: both;
  width: 90%;
}

svg {
  border: 1px solid red;
  display: inline-block;
  width: 45%;
}

.textRendering text {
  text-rendering: geometricPrecision!important;
}
<p>Resize me</p>
<div class="container">


  <svg class="textRendering " viewBox="0 100 595 240" xmlns="http://www.w3.org/2000/svg">
            <text x="50" y="150">text-rendering:<tspan x="50" dy="12">geometricPrecision</tspan></text>
            <g class="gScale">
            <text x="220" y="148.15">
                Lorem
            </text>
            <text x="255.8125" y="148.15">
                ipsum
            </text>
            <text x="289.703125" y="148.15">
                dolor
            </text>
            <text x="318.484375" y="148.15">
                sit
            </text>
            <text x="333.1875" y="148.15">
                amet,
            </text>
            <text x="365.15625" y="148.15">
                consectetur
            </text>
            <text x="427.8125" y="148.15">
                adipiscing
            </text>
            <text x="482.171875" y="148.15">
                elit,
            </text>
            <text x="503.28125" y="148.15">
                sed
            </text>
            <text x="525.03125" y="148.15">
                do
            </text>
            <text x="220" y="163.1">
                eiusmod
            </text>
            <text x="266.671875" y="163.1">
                tempor
            </text>
            <text x="305.671875" y="163.1">
                incididunt
            </text>
            <text x="357.46875" y="163.1">
                ut
            </text>
            <text x="370.265625" y="163.1">
                labore
            </text>
            <text x="405.4375" y="163.1">
                et
            </text>
            <text x="418.234375" y="163.1">
                dolore
            </text>
            <text x="453.40625" y="163.1">
                magna
            </text>
            <text x="491.78125" y="163.1">
                aliqua.
            </text>
            <text x="528.875" y="163.1">
                Ut
            </text>
            <text x="543.578125" y="163.1">
                enim
            </text>
            <text x="220" y="178.04999999999998">
                ad
            </text>
            <text x="236" y="178.04999999999998">
                minim
            </text>
            <text x="269.875" y="178.04999999999998">
                veniam,
            </text>
            <text x="313.359375" y="178.04999999999998">
                quis
            </text>
            <text x="337.671875" y="178.04999999999998">
                nostrud
            </text>
            <text x="379.234375" y="178.04999999999998">
                exercitation
            </text>
            <text x="441.25" y="178.04999999999998">
                ullamco
            </text>
            <text x="484.09375" y="178.04999999999998">
                laboris
            </text>
            <text x="521.1875" y="178.04999999999998">
                nisi
            </text>
            <text x="541.65625" y="178.04999999999998">
                ut
            </text>
            <text x="220" y="192.99999999999997">
                aliquip
            </text>
            <text x="256.453125" y="192.99999999999997">
                ex
            </text>
            <text x="271.8125" y="192.99999999999997">
                ea
            </text>
            <text x="287.8125" y="192.99999999999997">
                commodo
            </text>
            <text x="341.515625" y="192.99999999999997">
                consequat.
            </text>
            <text x="400.984375" y="192.99999999999997">
                Duis
            </text>
            <text x="427.203125" y="192.99999999999997">
                aute
            </text>
            <text x="452.796875" y="192.99999999999997">
                irure
            </text>
            <text x="479.015625" y="192.99999999999997">
                dolor
            </text>
            <text x="507.796875" y="192.99999999999997">
                in
            </text>
            <text x="220" y="207.94999999999996">
                reprehenderit
            </text>
            <text x="291.609375" y="207.94999999999996">
                in
            </text>
            <text x="303.765625" y="207.94999999999996">
                voluptate
            </text>
            <text x="353.65625" y="207.94999999999996">
                velit
            </text>
            <text x="377.3125" y="207.94999999999996">
                esse
            </text>
            <text x="404.8125" y="207.94999999999996">
                cillum
            </text>
            <text x="437.40625" y="207.94999999999996">
                dolore
            </text>
            <text x="472.578125" y="207.94999999999996">
                eu
            </text>
            <text x="488.578125" y="207.94999999999996">
                fugiat
            </text>
            <text x="519.921875" y="207.94999999999996">
                nulla
            </text>
            <text x="220" y="222.89999999999995">
                pariatur.
            </text>
            <text x="264.765625" y="222.89999999999995">
                Excepteur
            </text>
            <text x="319.75" y="222.89999999999995">
                sint
            </text>
            <text x="340.859375" y="222.89999999999995">
                occaecat
            </text>
            <text x="390.09375" y="222.89999999999995">
                cupidatat
            </text>
            <text x="439.984375" y="222.89999999999995">
                non
            </text>
            <text x="462.375" y="222.89999999999995">
                proident,
            </text>
            <text x="510.34375" y="222.89999999999995">
                sunt
            </text>
            <text x="535.296875" y="222.89999999999995">
                in
            </text>
            <text x="547.453125" y="222.89999999999995">
                culpa
            </text>
            <text x="220" y="237.84999999999994">
                qui
            </text>
            <text x="238.5625" y="237.84999999999994">
                officia
            </text>
            <text x="271.609375" y="237.84999999999994">
                deserunt
            </text>
            <text x="319.578125" y="237.84999999999994">
                mollit
            </text>
            <text x="349.625" y="237.84999999999994">
                anim
            </text>
            <text x="377.765625" y="237.84999999999994">
                id
            </text>
            <text x="389.921875" y="237.84999999999994">
                est
            </text>
        </g>
        </svg>






  <svg class="original" viewBox="0 100 595 240" xmlns="http://www.w3.org/2000/svg">
            <text x="50" y="150">Original</text>

            <text x="220" y="148.15">
                Lorem
            </text>
            <text x="255.8125" y="148.15">
                ipsum
            </text>
            <text x="289.703125" y="148.15">
                dolor
            </text>
            <text x="318.484375" y="148.15">
                sit
            </text>
            <text x="333.1875" y="148.15">
                amet,
            </text>
            <text x="365.15625" y="148.15">
                consectetur
            </text>
            <text x="427.8125" y="148.15">
                adipiscing
            </text>
            <text x="482.171875" y="148.15">
                elit,
            </text>
            <text x="503.28125" y="148.15">
                sed
            </text>
            <text x="525.03125" y="148.15">
                do
            </text>
            <text x="220" y="163.1">
                eiusmod
            </text>
            <text x="266.671875" y="163.1">
                tempor
            </text>
            <text x="305.671875" y="163.1">
                incididunt
            </text>
            <text x="357.46875" y="163.1">
                ut
            </text>
            <text x="370.265625" y="163.1">
                labore
            </text>
            <text x="405.4375" y="163.1">
                et
            </text>
            <text x="418.234375" y="163.1">
                dolore
            </text>
            <text x="453.40625" y="163.1">
                magna
            </text>
            <text x="491.78125" y="163.1">
                aliqua.
            </text>
            <text x="528.875" y="163.1">
                Ut
            </text>
            <text x="543.578125" y="163.1">
                enim
            </text>
            <text x="220" y="178.04999999999998">
                ad
            </text>
            <text x="236" y="178.04999999999998">
                minim
            </text>
            <text x="269.875" y="178.04999999999998">
                veniam,
            </text>
            <text x="313.359375" y="178.04999999999998">
                quis
            </text>
            <text x="337.671875" y="178.04999999999998">
                nostrud
            </text>
            <text x="379.234375" y="178.04999999999998">
                exercitation
            </text>
            <text x="441.25" y="178.04999999999998">
                ullamco
            </text>
            <text x="484.09375" y="178.04999999999998">
                laboris
            </text>
            <text x="521.1875" y="178.04999999999998">
                nisi
            </text>
            <text x="541.65625" y="178.04999999999998">
                ut
            </text>
            <text x="220" y="192.99999999999997">
                aliquip
            </text>
            <text x="256.453125" y="192.99999999999997">
                ex
            </text>
            <text x="271.8125" y="192.99999999999997">
                ea
            </text>
            <text x="287.8125" y="192.99999999999997">
                commodo
            </text>
            <text x="341.515625" y="192.99999999999997">
                consequat.
            </text>
            <text x="400.984375" y="192.99999999999997">
                Duis
            </text>
            <text x="427.203125" y="192.99999999999997">
                aute
            </text>
            <text x="452.796875" y="192.99999999999997">
                irure
            </text>
            <text x="479.015625" y="192.99999999999997">
                dolor
            </text>
            <text x="507.796875" y="192.99999999999997">
                in
            </text>
            <text x="220" y="207.94999999999996">
                reprehenderit
            </text>
            <text x="291.609375" y="207.94999999999996">
                in
            </text>
            <text x="303.765625" y="207.94999999999996">
                voluptate
            </text>
            <text x="353.65625" y="207.94999999999996">
                velit
            </text>
            <text x="377.3125" y="207.94999999999996">
                esse
            </text>
            <text x="404.8125" y="207.94999999999996">
                cillum
            </text>
            <text x="437.40625" y="207.94999999999996">
                dolore
            </text>
            <text x="472.578125" y="207.94999999999996">
                eu
            </text>
            <text x="488.578125" y="207.94999999999996">
                fugiat
            </text>
            <text x="519.921875" y="207.94999999999996">
                nulla
            </text>
            <text x="220" y="222.89999999999995">
                pariatur.
            </text>
            <text x="264.765625" y="222.89999999999995">
                Excepteur
            </text>
            <text x="319.75" y="222.89999999999995">
                sint
            </text>
            <text x="340.859375" y="222.89999999999995">
                occaecat
            </text>
            <text x="390.09375" y="222.89999999999995">
                cupidatat
            </text>
            <text x="439.984375" y="222.89999999999995">
                non
            </text>
            <text x="462.375" y="222.89999999999995">
                proident,
            </text>
            <text x="510.34375" y="222.89999999999995">
                sunt
            </text>
            <text x="535.296875" y="222.89999999999995">
                in
            </text>
            <text x="547.453125" y="222.89999999999995">
                culpa
            </text>
            <text x="220" y="237.84999999999994">
                qui
            </text>
            <text x="238.5625" y="237.84999999999994">
                officia
            </text>
            <text x="271.609375" y="237.84999999999994">
                deserunt
            </text>
            <text x="319.578125" y="237.84999999999994">
                mollit
            </text>
            <text x="349.625" y="237.84999999999994">
                anim
            </text>
            <text x="377.765625" y="237.84999999999994">
                id
            </text>
            <text x="389.921875" y="237.84999999999994">
                est
            </text>
        </svg>


  <svg class="foreign" viewBox="0 100 595 240" xmlns="http://www.w3.org/2000/svg">
            <text x="50" y="150">foreignObject</text>
            <foreignObject x="224" y="125" width="60%" height="50%">
                <div xmlns="http://www.w3.org/1999/xhtml">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
                    </p>
                </div>
            </foreignObject>
        </svg>

</div>

user_150156750
Related