[css-text] Make ::first-letter { text-transform: capitalize } a no-op for text in languages that don't have letter case #2135

amire80 · 2017-12-25T09:03:46Z

Consider the following code:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>first-letter issue demo</title>
  <style type="text/css">
    .cap::first-letter {
      text-transform: capitalize;
    }
  </style>
</head>

<body>
<div dir="rtl" lang="ar">
<p dir="ltr" lang="en">Incorrect, with capitalize:</p>
<p class="cap">عائلة</p>
<p dir="ltr" lang="en">Correct, without capitalize:</p>
<p>عائلة</p>
</div>
</body>
</html>

In the latest versions of Firefox and Chrome the rendering of the Arabic text in the section marked as "incorrect" is broken: the first letter is disconnected from the rest of the word. I guess that the rendering engines try to apply separate styling to the first letter and disconnect it, which is unnecessary because capitalization cannot work anyway.

While "first-letter" may have some useful meaning in all writing systems, "capitalize" is meaningless in writing systems that don't have letter case. Applying these rules to text in these writing systems should do nothing. I'm not sure how exactly this is supposed to be written, but this should be defined explicitly as a no-operation on the standards level.

The relevant standards section is probably
https://www.w3.org/TR/css-text-3/#text-transform-property

See the related discussion at https://lists.w3.org/Archives/Public/www-international/2017OctDec/0142.html

amire80 · 2017-12-25T09:23:20Z

I also reported these related issues:

Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1427032

Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=797571

fantasai · 2018-01-07T12:22:20Z

Thanks for reporting the bugs. As for the spec, it is already specified here: https://www.w3.org/TR/css-text-3/#boundary-shaping

litherum · 2018-01-08T20:57:27Z

The spec says "Text shaping must not be broken across inline box boundaries when there is no change in formatting." so it seems to me this is just a browser bug and not a spec bug.

Related to w3c/csswg-drafts#2135

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385 UltraBlame original commit: da69f9ccccc0a3e7c4dfc836c6d8ec7a554bc68a

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385 UltraBlame original commit: 791c347d66c2a8ddab9261abeb63aa31239fbcac

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385 UltraBlame original commit: da69f9ccccc0a3e7c4dfc836c6d8ec7a554bc68a

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385 UltraBlame original commit: 791c347d66c2a8ddab9261abeb63aa31239fbcac

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385 UltraBlame original commit: da69f9ccccc0a3e7c4dfc836c6d8ec7a554bc68a

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385 UltraBlame original commit: 791c347d66c2a8ddab9261abeb63aa31239fbcac

…rb shaping in arabic, a=testonly Automatic update from web-platform-tests [css-text] text-transform must not disturb shaping in arabic Related to w3c/csswg-drafts#2135 -- Merge pull request #13385 from frivoal/text-2135 [css-text] text-transform must not disturb shaping in arabic -- wpt-commits: a1e342c18c90f8386adf9e23495814ed6e7f2804, 9b22a2f64e0199794898ae88bf29ae558e2a2f5a wpt-pr: 13385

amire80 changed the title ~~[css-text] Make ::first-letter: { text-transform: capitalize } a no-op for text in languages that don't have letter case~~ [css-text] Make ::first-letter { text-transform: capitalize } a no-op for text in languages that don't have letter case Dec 25, 2017

fantasai added the css-text-3 Current Work label Jan 7, 2018

fantasai added the Needs Testcase (WPT) label Jan 11, 2018

fantasai closed this as completed Jan 11, 2018

fantasai added the Tracked in DoC label Mar 6, 2018

frivoal self-assigned this Oct 3, 2018

frivoal added a commit to frivoal/wpt that referenced this issue Oct 5, 2018

[css-text] text-transform must not disturb shaping in arabic

8f46a52

Related to w3c/csswg-drafts#2135

frivoal mentioned this issue Oct 5, 2018

[css-text] text-transform must not disturb shaping in arabic web-platform-tests/wpt#13385

Merged

frivoal added Needs Review of Test Case(s) and removed Needs Testcase (WPT) labels Oct 5, 2018

frivoal added a commit to frivoal/wpt that referenced this issue Oct 9, 2018

[css-text] text-transform must not disturb shaping in arabic

ad53f25

Related to w3c/csswg-drafts#2135

frivoal added a commit to frivoal/wpt that referenced this issue Dec 26, 2018

[css-text] text-transform must not disturb shaping in arabic

a1e342c

Related to w3c/csswg-drafts#2135

frivoal removed the Needs Review of Test Case(s) label Dec 26, 2018

frivoal added the Tested Memory aid - issue has WPT tests label Apr 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[css-text] Make ::first-letter { text-transform: capitalize } a no-op for text in languages that don't have letter case #2135

[css-text] Make ::first-letter { text-transform: capitalize } a no-op for text in languages that don't have letter case #2135

amire80 commented Dec 25, 2017

amire80 commented Dec 25, 2017

Uh oh!

fantasai commented Jan 7, 2018

Uh oh!

litherum commented Jan 8, 2018

Uh oh!

[css-text] Make ::first-letter { text-transform: capitalize } a no-op for text in languages that don't have letter case #2135

[css-text] Make ::first-letter { text-transform: capitalize } a no-op for text in languages that don't have letter case #2135

Comments

amire80 commented Dec 25, 2017

amire80 commented Dec 25, 2017

Uh oh!

fantasai commented Jan 7, 2018

Uh oh!

litherum commented Jan 8, 2018

Uh oh!