text-transform:capitalize bug
Reported by
arhi...@gmail.com,
Apr 12 2018
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Example URL: https://jsfiddle.net/websiter/g1mk6wv5/ Steps to reproduce the problem: 1. Add the markup on only 1 line. 2. Observe `text-transform:capitalize` applied, but not working 3. If any space or line end is applied between the elements the bug is not present. What is the expected behavior? `capitalize` should apply at each element's start, even if no space is provided before the element's text. What went wrong? `capitalize` is not applied on element text content Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? No Firefox (other browsers are not available on this machine - i'll test others and update) Chrome version: 65.0.3325.181 Channel: stable OS Version: Ubuntu 17.10 Flash Version: Shockwave Flash 29.0 r0 Initial SO question (how I ran into it) here: https://stackoverflow.com/questions/49783681/text-transform-capitalize-css-not-working-in-react#
,
Apr 12 2018
Adding empty `inline-block` pseudos also fixes it, since it breaks the `inline` flow.
,
Apr 12 2018
,
Apr 12 2018
,
Apr 13 2018
Able to reproduce this issue on reported version 65.0.3325.181, on latest beta 66.0.3359.106 and latest canary 67.0.3396.0 using Windows 10, Mac 10.13.3 and Ubuntu 14.04 with JSfiddle given in comment#0. This issue is seen from M-60. Hence considering this issue as Non-Regression and marking as Untriaged. Thanks!
,
Apr 18 2018
,
Apr 18 2018
I believe this is by design. 'text-transform: capitalize' recognize word boundary in DOM, and elements boundaries should not create a word boundaries. You need a space between elements, or make them inline-block as you found in #3. > `capitalize` should apply at each element's start, even if no space is provided before the element's text. What makes you to believe this? If you have pointers to the spec, or discussions, could you please point to the URL? We can then ask at W3C which is the correct interpretation of the spec. Gecko does not capitalize either.
,
Apr 18 2018
Thanks, @Kojii. Thinking about it, I realize you are correct. Inline elements should be thought of as letters, from flow's point of view. So if one chooses to place their links in a single "word", it's only the first letter that should be capitalized. Therefore I consider the implementation correct and the proper fix is to either use `inline-block` or to insert some character that will be interpreted as word boundary by browser before each element. Thank you. This should be closed.
,
Apr 18 2018
Thank you for the feedback! |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by arhi...@gmail.com
, Apr 12 2018