Last Comment Bug 125390 - CSS letter-spacing style extends after last letter of element with letter-spacing
: CSS letter-spacing style extends after last letter of element with letter-spa...
Status: NEW
: testcase
Product: Core
Classification: Components
Component: Layout: Text (show other bugs)
: Trunk
: All All
: P3 normal with 6 votes (vote)
: Future
Assigned To: Nobody; OK to take it and work on it
data:text/html,<p style="letter-spaci...
: 501745 (view as bug list)
Depends on: 102016 299943
  Show dependency treegraph
Reported: 2002-02-13 17:12 PST by Brad Town
Modified: 2016-06-09 07:57 PDT (History)
12 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

Testcase (391 bytes, text/html)
2002-07-11 22:10 PDT, Greg K.
no flags Details
Evidence of current letter-spacing problem with right-align (1.62 KB, text/html)
2004-06-21 09:36 PDT, Roger Que
no flags Details

Description User image Brad Town 2002-02-13 17:12:04 PST
Given the following input:

<html><h1>Bra<span style="letter-spacing: 1em">dl</span>ey</h1></html>

With Mozilla 2002021203, I get "Brad l ey", whereas with IE6 I get "Brad ley". 
I believe that IE is the one that's right here.

letter-spacing is the only way to really do proper character kerning, but this
problem makes using it for this purpose difficult.
Comment 1 User image David Baron :dbaron: ⌚️UTC-8 2002-02-13 19:41:07 PST
->Layout, although I'm not sure what the correct behavior really should be. 
This proposal is reasonable though, except it might do weird things if a single
word has large letter spacing (which would be better if we put half the
letter-spacing around each character).
Comment 2 User image Brad Town 2002-02-14 07:48:14 PST
Mozilla is behaving properly, at least according to the CSS2 spec.  Section 9.1
of the CSS2 specification says, "The visual formatting model does not specify
all aspects of formatting (e.g., it does not specify a letter-spacing
algorithm). Conforming user agents [p. 32] may behave differently for those
formatting issues not covered by this specification."

Unfortunately, Mozilla's current interpretation of the letter-spacing style
attribute makes kerning letters difficult.  For example, I don't know if it's
possible to have the letters "To" in the word "Ton" kerned and have it display
properly on both IE and Mozilla.  In Mozilla, I'd apply the attribute to only
the "T"; in IE, I'd apply it to "To".
Comment 3 User image Chris Petersen 2002-02-26 12:49:41 PST
Confirming in the Feb 25th build.
Comment 4 User image Greg K. 2002-07-11 22:10:13 PDT
Reconfirmed using FizzillaCFM/2002070913. Setting All/All.
Comment 5 User image Greg K. 2002-07-11 22:10:53 PDT
Created attachment 91065 [details]
Comment 6 User image Greg K. 2002-10-03 15:31:13 PDT
Possible dup of/related to bug 102016 or bug 93168?
Comment 7 User image Hixie (not reading bugmail) 2002-10-04 08:47:12 PDT
IMHO we should do the half-either-side option. It makes the most sense in
scenarios such as this and with things like bidi.
Comment 8 User image Christopher Hoess (gone) 2003-06-07 21:44:02 PDT
Since this isn't actually a violation of the CSS1 spec, removing keyword &etc.
Comment 9 User image Benjamin Smedberg [:bsmedberg] 2004-01-17 12:47:45 PST

letter spacing should always go after the letter (after in the BIDI-after sense).

We should not add this space if:

1) the frame is the last frame in the line (LTR text) or the last frame in the
line (RTL text)

2) the frame has right padding (LTR text) or left padding (RTL text)

This fixes issues with right-alignment of spaced LTR text, and still gives web
authors precise control over kerning on a per-letter basis if needed. However,
it doesn't "fix" the original bug report, which I believe we render correctly.
Comment 10 User image Justin Stressman 2004-01-17 13:42:40 PST
after a lot of thought about this, I firmly believe that letter-spacing should
apply ONLY to 2 or more letters within a given span, ignoring both the preceding
and trailing ends. setting a letter-spacing property on a single letter should
have no effect.
if you think about it, this is how normal text is treated. a single letter has
no spacing set to it. placed within a cell, it's edges will rest flush against
the cells edges. if you place a char next to it, then the 2 chars together will
have a space between them. this is the spacing that you would be increasing
and/or decreasing. not a "trailing space" type of spacing, not a "half amount on
either side", and no allowing letter-spacing on a single letter, which leads to
HORRIFIC cases of trying to resolve conflicts between differing adjacent values
set on single letters or even spans of letters.
this is a perfectly logical and common sense solution to the problem.
here are some examples:

&lt;span style="letter-spacing:1em"&gt;a&lt;/span&gt;&lt;span

should be ignored, resulting in "ab" as per normal display.

&lt;span style="letter-spacing:1em"&gt;ab&lt;/span&gt;&lt;span

should result in "a bc d", as the spacing WITHIN EACH SPAN is set to set a 1em
spacing between the letters WITHIN EACH SPAN. this setting should not effect
those letters relation to letters outside the span, or a bounding cell etc. that
 property would be PADDING to be set on the span (internally) or MARGIN

with this simple solution, I do not see any unsolvable cases, or complex
situations to need complex solutions etc. no grey area. and this fits with the
behavior of many other aspects of the rendering engine, not only for text
rendering, but other elements as well.
Comment 11 User image David Baron :dbaron: ⌚️UTC-8 2004-01-17 16:02:42 PST
There are some serious flaws in the above proposals:

Re comment 9: discontinuities are disturbing to authors.  If 1 pixel of padding
causes there to be less space than 0 pixels of padding, that will lead to confusion.

Re comment 10: 'letter-spacing' is an inherited property.  Consider:
  <h2 style="letter-spacing: 0.3em">The <abbr title="...">ABC</abbr>'s work</h2>
Do you want there to be less space between "C" and "'" than between any other
Comment 12 User image David Baron :dbaron: ⌚️UTC-8 2004-01-17 16:10:26 PST
(I think the correct thing to do is put half the letter spacing on each side of
each letter.)
Comment 13 User image Justin Stressman 2004-01-18 04:17:00 PST
can someone explain to me why they think that letter-spacing should have any
effect on content outside of a span of letters? we're dealing with text here,
and to be consistent with the current behavior of text, we should ignore
anything outside of a given span WITH REGARD TO letter-spacing. padding and
margin both seem perfectly adequate in addressing the leading or trailing end of
such content.
this "half on each side" seems moot in regards to what I'm proposing. you still
shouldn't be affecting content outside the span... this behavior of affecting
content outside the span is what's causing this "bug" already. adding a trailing
space after the end of the span is WRONG. it's not supposed to be there. just
because you're splitting that FLAW in half and having half of it on both ends
doesn't make it any better and will still require frustrating work-arounds. the
CSS specification itself calls letter-spacing "the space between characters"
(not the space between a character and some other object) and should only affect
the letters INSIDE THE SPECIFIED SPAN with no leading or trailing space. the
entire problem here revolves around people insisting on this value affecting
content outside the span, which as I've said many times now, seems perfectly
suited to the already existing padding and margin properties.
now it's completely possible I'm missing something here, or not grasping some
fundamental concept... in which case I would appreciate some enlightenment.
otherwise, the rest of this debate is pointless. 

span { letter-spacing:1em;}

abc d efg

ab<span style="margin:0 1em;">cde</span>fg
ab c d e fg

this seems to me to allow proper control over letter-spacing etc without causing
any inconsistencies or ambiguous conditions etc.

again, please explain to me if I am somehow missing something here.
Comment 14 User image Hixie (not reading bugmail) 2004-01-18 05:16:05 PST
Justin: There was so much rhetoric in your last comment (comment 13) that I
couldn't actually work out what you were proposing.

Could you explain the proposal on its own terms, not describing it relative to
other implementations or proposals? Please take into account the point in
comment 11 regarding your proposal in comment 10, which as far as I can tell is
still an issue in your latest proposal. (Note that this is the most common case.)

For what it's worth, I agree with dbaron; letter-spacing should IMHO be rendered
as half on each side of the letter, except at the start and end of the line.
Comment 15 User image Justin Stressman 2004-01-18 05:39:42 PST
in response to #14, I think mozilla also incorrectly renders your example.
I don't see how my proposal doesn't handle this situation... I'll post a URL to
an image showing 2 things, and explain here what I'm describing.
in what I proposed, considering that all the characters within the specified
element are supposed to have spacing between them, this is rendered (almost)
correctly... the issue here seems to lie with the <abbr> tag continuing on with
the letter spacing rather than the letters themselves. this looks to me like yet
another flaw with the implementation. where it seems that your (collective)
proposal of spacing half on either side is closer to a better solution in
regards to this specific case -as implemented-, I don't see why the <abbr>
doesn't stop at either edge of the letters ABC. is there any spec that states
that it has to also encompass the letter spacing as well?

(I don't think I need to point out that the above example still tacks on the
extra space at the end, so that in something like an inline div with a border,
even with the text-align:center, there is still an "extra space" at the end.)
Comment 16 User image Hixie (not reading bugmail) 2004-01-18 05:50:36 PST
I'm sorry, I am having a great deal of difficulty actually understanding exactly
what it is you are proposing. Could you tersely describe the algorithm? As in,
describe your proposal in no more than 3 lines, without referring to any other
proposals or comparing it to any implementations, and without mentioning
previous comments, examples, or code snippets in this bug.

Comment 17 User image Justin Stressman 2004-01-18 07:49:11 PST
in a specified span of characters, only apply letter-spacing between characters
if there are 2 or more characters within the span.

letter-spacing should be ignored on the leading and trailing end of the span
even if there are other characters adjacent outside of the span.

padding and/or margin can be used to set left and/or right padding/margins to
the span of characters to add padding/margins in relation to other content.
Comment 18 User image Justin Stressman 2004-01-18 08:47:06 PST
another "test case"

interested in comments on this.
Comment 19 User image David Baron :dbaron: ⌚️UTC-8 2004-01-18 09:39:15 PST
The "Re comment 10:" part of comment 11 explains why that won't work.

(Being consise is good.  Otherwise nobody will read what you write.)
Comment 20 User image David Baron :dbaron: ⌚️UTC-8 2004-01-18 09:49:05 PST
...although I guess you could work around that problem by putting the full
letter spacing before/after any children.  That might work.  But it would be a
good bit harder to implement, and I'm really not interested in anything that
might make the code in question any more complicated, since it's far too
complicated already (needlessly).
Comment 21 User image Justin Stressman 2004-01-18 12:09:37 PST
David, could you explain to me a little more clearly what you mean? I don't understand 
how your "re comment #10" in comment #11 explains why my proposal won't work. 
also, which comment are you referring to specifically? 
also, what exactly do you mean about the children? I'm not sure what children you're 
referring to. 
thanks. (sorry if I'm being ignorant) 
Comment 22 User image Hixie (not reading bugmail) 2004-01-18 15:36:11 PST
Justin: regarding comment 17: Aha! Thanks. That made a lot more sense.

The problem that David pointed out is with this:


According to your description, if you said:

   span { letter-spacing: 1em; }

...then the rendering would be:

   A A AB B BC C C

...which is bad, since the addition of an identically styled inline element
child (the inner <span> here) should not make any visible difference to the
resulting rendering.
Comment 23 User image Justin Stressman 2004-01-18 16:12:43 PST
actually, if you look at what I posted in comment #18, you'll see that I was
under the impression that as the letter-spacing property is inherited, that it
would still render as you say it should. the image in comment #18 explains.
Comment 24 User image Hixie (not reading bugmail) 2004-01-19 12:13:16 PST
Your description in comment 17 does not match that.
Comment 25 User image Justin Stressman 2004-01-20 08:01:45 PST
I believe it does. those characters are still within the span. due to it's
inherited nature.
perhaps I should specify a fourth line to #17 clarifying that.

none the less, I thought #18 would make it clear how I thought it should behave.
my apologies.
Comment 26 User image Justin Stressman 2004-01-20 08:39:11 PST
let me rephrase that...
the characters adjacent to the child span are still within the parent span, and
due to the inherited nature of the letter-spacing property, the spacing between
B and C should still be applied, as it would still cover all the characters if
not for the child span taking precedence -only between- C and D.

another image to illustrate this follows:
Comment 27 User image Hixie (not reading bugmail) 2004-01-20 09:18:10 PST

   span { letter-spacing: 1em; }

...the rendering with your suggestion would be:


...instead of:

   T E S T it would be with the half-on-each-side idea. I think I prefer the latter 
rendering for that particular case.
Comment 28 User image Roger Que 2004-06-21 09:33:51 PDT
(In reply to comment #27) I don't understand why someone would do a <span> for
each letter. Having a <span> for the whole thing is generally what happens. If
you really have to have one for each letter, enclose it all in a <span> --
that's what I'd expect to have to do for this behavior.

The current proposal (with half on each side) makes no allowances, as far as I
can tell, when the letters in question end a line. It may not be noticeable if
text is left-aligned, but when right-aligned, it staggers it so that it looks
like somebody put a [letter-spacing]-wide space. Already a problem, and when
letter-spacing is 15px, 7px and 15px look just as ugly, especially when
something nearby shows the true right margin.
Comment 29 User image Roger Que 2004-06-21 09:36:40 PDT
Created attachment 151364 [details]
Evidence of current letter-spacing problem with right-align

My sig on a forum. This is an example of the problems caused by the current
implementation and the half-spacing proposal. The spaces after
"come/create/:ize" are irregular and don't belong there. Looks fine in IE6.
Comment 30 User image Hixie (not reading bugmail) 2004-06-27 07:53:28 PDT
> The current proposal (with half on each side) makes no allowances, as far as I
> can tell, when the letters in question end a line.

The full proposal is "put half the letter-spacing on either side of the letter, 
except at the edges of the line".
Comment 31 User image Steven Willis 2004-07-23 09:24:46 PDT
(In reply to comment #30)
> > The current proposal (with half on each side) makes no allowances, as far as I
> > can tell, when the letters in question end a line.
> The full proposal is "put half the letter-spacing on either side of the letter, 
> except at the edges of the line".

But wouldn't this still have the same "problem" as the other proposal with:

span { letter-spacing: 1em }

rendering as TEST.

And how would it handle:

<span style="letter-spacing: 1em">T<span style="letter-spacing:

Would there be .5 em between T and E, or no spacing, or 1em? From what I
understand it would be .5em which would be counter intuitive since the
letter-spacing is only being increased.
Comment 32 User image Hixie (not reading bugmail) 2004-07-23 09:41:20 PDT
"put half the letter-spacing on either side of the letter, except at the edges 
of the line".

> span { letter-spacing: 1em }
> <span>T</span><span>E</span><span>S</span><span>T</span>

That would render as "T E S T" since each letter would have 0.5em letter spacing 
on either side, except at the edges.

> <span style="letter-spacing: 1em">T<span style="letter-spacing:
> 2em">ES</span>T</span>

There would be 1.5em space between the T and the E, 2em between the E and the S, 
and 1.5em between the S and the final T: "T E  S T".

> Would there be .5 em between T and E, or no spacing, or 1em?

1.5em. Half of the T's letter-spacing from the T's right side, and half of the 
E's letter spacing from the E's left side.
Comment 33 User image Steven Willis 2004-07-23 12:51:20 PDT
> That would render as "T E S T" since each letter would have 0.5em letter spacing 
> on either side, except at the edges.

Gotcha, I thought by edges you meant the edge of each span. This seems like a
pretty good solution. Although I don't think this will solve the original
poster's problems with kerning. After thinking about it for a while I don't
think there's really any perfect way to do it which will accomodate all desired
uses of letter-spacing (unless css was expanded to have stuff like
letter-spacing-right, letter-spacing-left, letter-spacing-outer,

I still think that a proper usage of letter-spacing would be to reduce or expand
the spacing between just two adjacent letters, which wouldn't be possible with
the current suggestion.
Comment 34 User image David Reitter 2004-12-06 09:48:38 PST
another realistic test case is here:

The W3C CSS spec clearly states that letter-spacing controls the space BETWEEN the letters, and not to 
the right (or left) of letters:

Comment 35 User image Anne (:annevk) 2004-12-06 10:27:29 PST
The W3C specification defines presentation, it doesn't define an algorithm.
Comment 36 User image David Baron :dbaron: ⌚️UTC-8 2009-07-01 14:28:51 PDT
*** Bug 501745 has been marked as a duplicate of this bug. ***
Comment 37 User image David Baron :dbaron: ⌚️UTC-8 2010-10-13 18:42:59 PDT
We should fix this by implementing the rules in .

That said, it looks like there's work ongoing in bug 299943.
Comment 38 User image Sebastian Zartner [:sebo] 2016-02-03 01:13:51 PST
I just stumbled over this issue recently[1] having this as test case:

data:text/html,<input maxlength="5"
style="box-sizing:content-box;width:17.1ch;border:1px solid
black;background-image:repeating-linear-gradient(to right, transparent,
transparent 1.72ch, gray 1.72ch, gray 1.82ch);padding:0

My idea to solve this is similar to the one mentioned by Steven in comment 33. That is, introduce some syntax to allow to change the behavior. Therefore I proposed[2] to extend letter-spacing to this:

  letter-spacing: [ normal | <length> ] [ inside || [ outside | inline-start | inline-end ] ]?


Comment 39 User image David Baron :dbaron: ⌚️UTC-8 2016-02-03 01:20:29 PST
We should just fix bug 299943.

Note You need to log in before you can comment on or make changes to this bug.