W3C home > Mailing lists > Public > www-style@w3.org > November 2012

[css3-text] letter-spacing doesn't normatively specify the correct way to apply spacing

From: John Daggett <jdaggett@mozilla.com>
Date: Wed, 28 Nov 2012 22:24:35 -0800 (PST)
To: www-style list <www-style@w3.org>
Message-ID: <1773220065.2010187.1354170275190.JavaMail.root@mozilla.com>
A long time ago in a galaxy far, far away at the San Diego F2F, we
discussed the CSS3 letter-spacing property [1]:

> jdaggett: http://people.mozilla.org/~jdaggett/tests/letter-spacing-tests.html
> jdaggett: I did some tests.
> jdaggett: Checking interopreability.
> jdaggett: letter spacing should control spacing on either side of char,
>          but should not affect last letter (if right aligned line)
> jdaggett: [shows image]
> jdaggett: But implementations add spacing after last letter.
> jdaggett: [shows another image]
> jdaggett: This image shows fully justified.
> <fantasai> http://dev.w3.org/csswg/css3-text/#letter-spacing
> <fantasai> "Letter-spacing must not be applied at the beginning or
>            at the end of a line."
> fantasai: The spec already says what UAs must do.
> jdaggett: It doesn't say *how* spacing is applied.
> jdaggett: at the end of the line you should not get space.
> fantasai: Yes, that is a bug according to the current spec.
> jdaggett: But the spec doesn't say exactly that
> dbaron: the spec is precise, but you are describing a different model,
>        equally precise, but different at element boundaries.
> jdaggett: I think you actually have to get into how it works, e.g., in rtl.
> fantasai/dbaron: What impls do is already bug, according to current spec.
> jdaggett: I don't see that text.
> jdaggett: What fantasai quoted is not precise enough.
> fantasai: Give me an example that is not covered by the spec, and we'll
>          improve the spec.
> jdaggett: and between ltr trl boundaries?
> fantasai: It is still "between chars" as the spec says.
> SteveZ: Half on each side, and you can't tell the difference.
> fantasai: You can do it as trailing edge internally, but you still have
>          to handle the boundaries correctly.
> jdaggett: I'll have to look more.

I've fiddled with this a bit more and tested the problem with the way
browsers currently always apply letter spacing to the trailing edge of
letters (except Webkit/Opera, which apply it to the right edge
independent of direction).

During the discussion above, David and Elika asserted that given the
rules in the spec describing how letter spacing is handled at element
boundaries, the effect is the same if letter spacing is applied only at
the trailing edge versus being split between the leading and trailing
edges.  I fiddled around with this some more and came up with a
testcase that demonstrates where this assertion fails:


In this example, the span with the red background covers from the
beginning of the text through the middle of the numeric value.  But
because spacing is only applied along the trailing edge, in Firefox
there is double letter spacing at one bidi break and none at the
other.  With a model that requires letter spacing to be split on both
sides of each letter, the letter spacing applied will be identical at
both bidi breaks.

I should mention that the documentation for the Flash Text Engine
explicitly notes the bidi case as a reason to split letter spacing
equally. [3]

I would suggest the following change:

  Letter-spacing must not be applied at the beginning or at
  the end of a line. 


  The value for letter spacing is split in half and applied
  equally to both the trailing and leading edges of a given
  letter.  This half value is however not applied to the
  leading edge at the beginning of a line nor to the
  trailing edge at the end of a line.


John Daggett

[1] San Diego F2F discussion

[2] Follow up post

[3] Flash Text Engine trailingLeft property
Received on Thursday, 29 November 2012 06:31:35 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:23 UTC