"text-transform: capitalize" misses word boundaries




3 years ago
2 years ago


(Reporter: mike.lewitz, Unassigned)


(Blocks: 1 bug)

44 Branch

Firefox Tracking Flags

(Not tracked)



(1 attachment)

343 bytes, text/html


3 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160210153822

Steps to reproduce:

Firefox v44.0.2 (Windows 7)

#foot { font-size: 13px; text-transform: capitalize }
#foot a { padding-left: 10px; padding-right: 10px }

<div id="foot">ACME inc.<a href="contact-us">contact us</a>|<a href="privacy">privacy policy</a>|<a herf="disclaimer">income disclaimer</a></div>

Actual results:

ACME Inc.  contact Us  |  privacy Policy  |  income Disclaimer

Expected results:

ACME Inc.  Contact Us  |  Privacy Policy  |  Income Disclaimer

Notes: Renders correctly in other browsers...
Chrome 48.0.2564.116, Opera 35.0.2066.82, Safari 5.1.7, IE 9.0.8112.16421, Dolphin v11.5.5 (tablet).

Recognize that there are no spaces between the "pipes" (or after the period) and the html. The spaces are created visually via css. Adding a space after the pipe or period renders correctly.


3 years ago
Component: Untriaged → Layout: Text
Product: Firefox → Core

Comment 1

3 years ago
Created attachment 8725807 [details]
Jonathan, looks like gecko current implementation is different from Blink and Webkit, is it expected or a todo?
Blocks: 104960
Ever confirmed: true
Flags: needinfo?(jfkthame)
Priority: -- → P3
See Also: → bug 1143324
The issue here is that browsers differ regarding what is a "word boundary" for text-transform:capitalize purposes. Reduced testcase:

  data:text/html;charset=utf-8,<div style="text-transform:capitalize">

Here, Gecko doesn't capitalize anything except the initial "One", while Blink also capitalizes "Four", "Five", "Six", "Nine" and "Ten".

Note that the spec[1] says:

# For capitalize, what constitutes a “word“ is UA-dependent; [UAX29] is suggested
# (but not required) for determining such word boundaries.

so as far as the spec is concerned, nobody is particularly "right" or "wrong" here; but equally, we're free to modify our behavior if we think it would improve things.

The other aspect of the original example, the CSS-created "spacing" between the items, is something of a red herring, at least from the interop PoV: in a testcase like:

  data:text/html,<style>div{text-transform:capitalize}span{margin:0 1em}</style>

neither Gecko nor Blink capitalizes "two", despite the generous amount of visual space separating the "words". Arguably, it might be good to treat non-zero margin/border/padding at the inline-start/end edges of an element as constituting a word boundary here.

[1] https://drafts.csswg.org/css-text/#text-transform-property
Flags: needinfo?(jfkthame)
You need to log in before you can comment on or make changes to this bug.