text-align: justify not working in some browsers after applying normalize.css

Question

text-align: justify is working fine with this minimal example:

<p>Long Loremp Ipsum text.</p>

p { text-align: justify; }

http://fiddle.jshell.net/nJsuJ/show/light/

If I apply normalize.css, text alignment is fine in desktop browsers and Opera Mobile, but in Android's default browser and Dolphin it switches to regular left alignment (actually I think it looks worser than left alignment, it's kind of messed up and wobbles around when resizing).

http://fiddle.jshell.net/nJsuJ/1/show/light/

What's going on?

Works in:

• Mozilla Firefox 21.0
• Google Chrome 27.0.1453.110
• Opera Mobile 12.10
• Microsoft Internet Explorer 10.0

Does not work in:

• Android Browser (not sure which version, it's Android 2.3 Gingerbread)
• Dolphin Browser 9.4.2

Answer 1

normalize.css adds in a property, text-rendering: optimizeLegibility. Try turning that off and see how justify works. Justify affects your word spacing, while the text rendering affects your letter spacing. I'd start there.