[css21][css3-text] inline horizontal alignment and the effect of 'text-align' either ambiguous or underspecified

I was again surprised by CSS 2.1 with a test case like

  data:text/html,<style> div { width: 5em; border: red solid;
text-align: right; margin: auto; } span { border: blue solid;
padding-left:50px; }</style><div><span>jfoiasdjodfasdf</span></div>

. That is, when an unbreakable inline box has a width bigger then the
linebox, 'text-align' has no effect and is treated as 'left'. But I
don't think this is clear from the spec.

The closest thing I can find is this paragraph in 9.4.2

  # When the total width of the inline-level boxes on a line is less
  # than the width of the line box containing them, their horizontal
  # distribution within the line box is determined by the 'text-align'
  # property. If that property has the value 'justify', the user agent
  # may stretch spaces and words in inline boxes (but not inline-table
  # and inline-block boxes) as well.

, which does imply that 'text-align' has no effect when the total width
is bigger than the width of the line box, but what's the default
behavior? This paragraph in the same section

  # In an inline formatting context, boxes are laid out horizontally,
  # one after the other, beginning at the top of a containing block.
  # Horizontal margins, borders, and padding are respected between
  # these boxes. The boxes may be aligned vertically in different ways:
  # their bottoms or tops may be aligned, or the baselines of text
  # within them may be aligned. The rectangular area that contains the
  # boxes that form a line is called a line box.

seems quite ambiguous. In particular, it doesn't say

  1. It's the start side where the boxes are started being laid out. In
     fact, this section doesn't mention 'direction' at all and I don't
     think "9.10 Text direction: the 'direction' and 'unicode-bidi'
     properties" mentions inline box layout either.

  2. By default there should be no spacing between the inline boxes.

In terms of implementations, it's true that all browsers are
interoperable but WeasyPrint is aligning the inline box's right edge
with the right of the line box in the above test case.


I think css3-text should be clear about this. Perhaps

change

  # This property describes how inline contents of a block are aligned
  # along the inline axis if the contents do not completely fill the
  # line box.

to

  | This property describes how inline contents of a block are aligned
  | along the inline axis if the contents do not completely fill the
  | line box. Except 'justify', the value is treated as ‘start’ in a
  | line where the contents overflow the line box. For 'justify', when
  | compression exceeds the limit, the physical first inline box
  | should also be placed flush against the start side of the line box.

or something. I care less about CSS 2.1, but

  # In an inline formatting context, boxes are laid out horizontally,
  # one after the other, beginning at the top of a containing block.
  # Horizontal margins, borders, and padding are respected between
  # these boxes.

  | In an inline formatting context, boxes are laid out horizontally,
  | one after the other, beginning at the top of a containing block and
  | by default starting at the left if 'direction' is 'ltr' and the
  | right if 'direction' is 'rtl', without spacing between each
  | adjacent inline boxes.

might or might not work.


Cheers,
Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/

Received on Tuesday, 13 November 2012 10:27:12 UTC