Reinier68
Reputation: 3242
Why is FireFox not properly displaying my text (Arial)
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:
Font looking normal:
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?
Upvotes: 3
Views: 454
Answers (1)
herrstrietzel
Reputation: 17195
There are several reasons for this rendering behaviour:
- 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.
- 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: geometricPrecisioncan 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>Upvotes: 1
Related Questions
- Why does the browser not render my fonts properly
- my font's does not render on firefox as well as it is on google chrome
- CSS Font family not working in Firefox
- font style not working in firefox
- CSS Font displaying fine in Chrome but not FF or IE
- Font not displaying corrently in Firefox
- Firefox won't render fonts
- Firefox failing at fonts
- FireFox not rendering font correctly
- HTML font weird behavior in Firefox