Search code examples
csstext-alignjustify

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

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
Solution

  • 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.