text-align bug

Back to the index.

This is a bug related to text-align: [not-left] and direction: [not-ltr] that occurs on some, but not all, of my Android 4 phones.

What seems to be happening is the following:

  1. Absent any width declaration, text blocks should be at most about 320px wide. (Why 320? duh iPhone duh.)
  2. If you set an explicit width on a container or the element itself, the block takes the correct width.
  3. And now the bug: if the text-align or text-direction is anything but left, the special 320px width is lost and the text blocks grow to their natural width. This may have unforeseen consequences; mainly that some text blocks are suddenly wider than others.

This is not a hugely important bug, but it’s still something to be aware of. And it shows that one Android 4 !== another Android 4. As if we needed more evidence of that.

Full list of phones below.

First test

Here are the tests in an unrestricted div that takes the width of the body. That width is 35em, which calculates to 448px in all WebKit-based browsers. The top box is restricted to about 300px.

This one has text-align: left.

This one has text-align: center.

This one has direction: rtl.

Further tests

This div has a width of 300px. All boxes are now restricted to 300px: the width declaration of a parent counts.

This one has text-align: left.

This one has text-align: center.

This one has direction: rtl.

This div has a width of 400px. Now the top box is restricted to about 300px, and the bottom two to 400px.

This one has text-align: left.

This one has text-align: center.

This one has direction: rtl.

Full test report

I tested this myself on my five Android 4 phones. The other ones come from my Twitter followers. If you see any pattern in these lists, please let me know.

Bug occurs on

  1. Any phone with Cyanogenmod up to and including 10.1
  2. My Sony Xperia S Android 4.0.4
  3. My Huawei C8813, Android 4.1.1
  4. Samsung Galaxy S2, I9100P, Orange UK, Android 4.2.
  5. LG L5, Android 4.0.3
  6. Nexus 4, Android 4.2.2
  7. Nexus S, Android 4.1.2
  8. Galaxy Nexus, Android 4.1
  9. Aldi phone, Android 4.0

Bug does not occur on

  1. Any phone with Cyanogenmod 10.2
  2. My Samsung Galaxy Note I, Android 4.0.3
  3. My Xiaomi M2, Android 4.1.1
  4. My HTC One X, Android 4.2.2
  5. Samsung Galaxy Note 2, Android 4.1.2
  6. Samsung Galaxy II (SC-02C), Android 4.0.3
  7. My Samsung Galaxy S3, Android 4.1.2
  8. HTC One S, Android 4.1.1
  9. Sony Experia E, Android 4.1.1
  10. HTC One, Android 4.2
  11. Samsung S III, Android 4.0