Intent to Ship: CSS Initial Letters

[Yoshifumi Inoue]

Contact emailsyo...@chromium.org, ko...@chromium.org

ExplainerNone

Specificationhttps://drafts.csswg.org/css-inline/#initial-letter-styling

Design docs
https://bit.ly/3KzJ27G

Summary

Initial letters are large, decorative letters have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely. Blink will support CSS property "initial-letter".

Blink componentBlink>Layout>Inline

TAG reviewWebKit shipped `-webkit-initial-letter`.

TAG review statusNot applicable

Risks

Interoperability and Compatibility

Chrome supports full syntax of `initial-letter`: 1 `initial-letter:` number 2 `initial-letter:` number integer 3.`initial-letter:` number `drop` 4.`initial-letter:` number `raise` However Safari supports: 1. `-webkit-initial-letter:` integer 2. `-webkit-initial-letter:` integer integer So, web authors needs to use Safari compatible syntax.

Gecko: In development (https://github.com/mozilla/standards-positions/issues/711) No active development since 2017.

WebKit: Shipped/Shipping (https://github.com/WebKit/standards-positions/issues/94) Needs to use prefix version `-webkit-initial-letter`. Supports only an integer size. No `drop` and `raise` keyword support.

Web developers: No signals It’s implemented only in Safari, but the usage is high. * 40.2% usage ratio according to CSS2021 Usage Overview[1]. * 23.9% have used it according to CSS2021 Typography features[2]. [1] https://2021.stateofcss.com/en-US/features/#features_overview [2] https://2021.stateofcss.com/en-US/features/typography/#initial_letter

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None.

Debuggability

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?No

Is this feature fully tested by web-platform-tests?No

DevTrial instructionshttps://output.jsbin.com/basukanebo/1

Flag name

Requires code in //chrome?False

Tracking bughttps://bugs.chromium.org/p/chromium/issues/detail?id=1276900

Non-OSS dependencies

Does the feature depend on any code or APIs outside the Chromium open source repository and its open-source dependencies to function?

No.

Sample links
https://output.jsbin.com/basukanebo/1

Estimated milestones

M110

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None.

Link to entry on the Chrome Platform Statushttps://chromestatus.com/feature/5167442033115136

Links to previous Intent discussionsIntent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CABJ-EHNMC29gEMkgopMJFW6LfWCCuxXmC0F%2BRPpOuM%3Dznbo5LQ%40mail.gmail.com
Intent to Experiment: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CABJ-EHPFVLa-frSXmjhbK97L%3D8eh7ZeS6Uap3BiSNfksDicdHA%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

[Rick Byers]

On Tue, Nov 22, 2022 at 3:41 AM Yoshifumi Inoue <yo...@chromium.org> wrote:

Contact emailsyo...@chromium.org, ko...@chromium.org

ExplainerNone

Specificationhttps://drafts.csswg.org/css-inline/#initial-letter-styling

Design docs
https://bit.ly/3KzJ27G

Summary

Initial letters are large, decorative letters have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely. Blink will support CSS property "initial-letter".

Blink componentBlink>Layout>Inline

TAG reviewWebKit shipped `-webkit-initial-letter`.

TAG review statusNot applicable

Risks

Interoperability and Compatibility

Chrome supports full syntax of `initial-letter`: 1 `initial-letter:` number 2 `initial-letter:` number integer 3.`initial-letter:` number `drop` 4.`initial-letter:` number `raise` However Safari supports: 1. `-webkit-initial-letter:` integer 2. `-webkit-initial-letter:` integer integer So, web authors needs to use Safari compatible syntax.

Gecko: In development (https://github.com/mozilla/standards-positions/issues/711) No active development since 2017.

WebKit: Shipped/Shipping (https://github.com/WebKit/standards-positions/issues/94) Needs to use prefix version `-webkit-initial-letter`. Supports only an integer size. No `drop` and `raise` keyword support.

Web developers: No signals It’s implemented only in Safari, but the usage is high. * 40.2% usage ratio according to CSS2021 Usage Overview[1]. * 23.9% have used it according to CSS2021 Typography features[2]. [1] https://2021.stateofcss.com/en-US/features/#features_overview [2] https://2021.stateofcss.com/en-US/features/typography/#initial_letter

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None.

Debuggability

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?No

Is this feature fully tested by web-platform-tests?No

Why not? Is there any reason tests couldn't reasonably be added prior to shipping?

DevTrial instructionshttps://output.jsbin.com/basukanebo/1

Flag name

Requires code in //chrome?False

Tracking bughttps://bugs.chromium.org/p/chromium/issues/detail?id=1276900

Non-OSS dependencies

Does the feature depend on any code or APIs outside the Chromium open source repository and its open-source dependencies to function?

No.

Sample links
https://output.jsbin.com/basukanebo/1

Estimated milestones

M110

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None.

Any idea what the position in the CSS WG is about the maturity of the spec for this feature? I see a bunch of open spec issues mentioning initial letter. To what extent are you confident that none of them represent a potential breaking change depending on their resolution?

 

Link to entry on the Chrome Platform Statushttps://chromestatus.com/feature/5167442033115136

Links to previous Intent discussionsIntent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CABJ-EHNMC29gEMkgopMJFW6LfWCCuxXmC0F%2BRPpOuM%3Dznbo5LQ%40mail.gmail.com
Intent to Experiment: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CABJ-EHPFVLa-frSXmjhbK97L%3D8eh7ZeS6Uap3BiSNfksDicdHA%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

[Yoshifumi Inoue]

Thanks for reviewing!

I forgot to update web-platform-test section in the tool. We have test cases in wpt.

https://wpt.live/css/css-inline/initial-letter/

>Any idea what the position in the CSS WG is about the maturity of the spec for this feature? I see a bunch of open spec issues mentioning initial letter. To what extent are you confident that none of them represent a potential breaking change depending on their resolution?

In this release, we focus on basic functionality, apply only to ::first-letter, as WebKit does.

I think current spec is stable for Western language in ::first-letter. So, I don't think we'll have breaking change for them.

For non-Western language, we need to do some handling of them once CSS WG has resolutions.

We also hope web developers will have some idea from experience, these help CSS WG's resolutions somehow.

- yosi

2022年11月24日木曜日 1:27:09 UTC+9 Rick Byers:

On Tue, Nov 22, 2022 at 3:41 AM Yoshifumi Inoue <yo...@chromium.org> wrote:

Contact emailsyo...@chromium.org, kojii...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Yoshifumi Inoue]

This is summary of CSS WG Open Issues discussed with kojii and yosin. 

1. 5527  Hindi example for initial letter applicability 
   • non-Latin, not supported in the initial release
2. 5476  kerning of initial letter when initial letter has negative side bearing
   • New feature, can add without breaking change
3. 5425  Define interaction of initial-letter and ::first-line
   • : Add a test of ::first-line + ::first-letter (example) CL/4054845
4. 5398 Add new value "auto" for initial-letter-align 
   • initial-letter-align not supported in the initial release
5. 5366 initial-letter sizing for non-western scripts 
   • non-Latin, not supported in the initial release
6. 5244 top metrics for non-Western non-CJK writing systems with obvious top edge 
   • : non-Latin, not supported in the initial release
7. 5220 Alternative initial-letter-align based on glyph bounds
   • New feature, can add without breaking change
8. 4988 initial-letters changing used, not computed font-size 
   • Current matches spec and WebKit. If the proposal is accepted, I think we can change even after ship.
9. 3968  initial-letter should allow zero sink?
   • New feature, can add without breaking change
10. 3240 Leading control at start/end of block
    • New feature, can add without breaking change
11. 3217 initial-letters applicability to inlines after a forced break
    • test, when impl is limited to `::first-letter`, this is an edge case that we can match when resolved even after ship
12. 2886 Line breaks inside drop-caps?
    • Without ::first-letter case, not supported in the initial release
13. 965 support adjacent initial-letter as well 
    • New feature, can add without breaking change
14. 887 should define how the initial-letter relates to line boxes
    • We can match when resolved even after ship
15. 864 alignment of initial-letter for South Asian scripts without hanging baseline
    • non-Latin, not supported in the initial release
16. 410 should initial-letter-wrap have an auto value? 
    • `initial-letter-wrap` not supported in the initial release
17. 310 Initial Letter selection and hanging punctuation
    • : N/A because we don't support hanging punctuation yet

-yosi

2022年11月24日木曜日 11:22:22 UTC+9 Yoshifumi Inoue:

[Yoav Weiss]

That's a lot of open issues :) Can you tell which of them have compatibility risk once resolved?

Contact emailsyo...@chromium.org, ko...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ca90a9b3-e58d-48c8-a46f-62a2c39ed429n%40chromium.org.

[Yoshifumi Inoue]

Thanks for reply!

We think these open issues are related feature we don't support yet and edge case except below.

4988 initial-letters changing used, not computed font-size 

At this time, the spec uses used font but this issue wants to use computed font.

If the resolution is changed to use computed font, meaning of font relative unit "em", "ex", "n" are changed.

This can be avoided by using non-font-relative unit.

Do you have open issues will cause compatibility risk?

-yosi

2022年11月25日金曜日 18:38:06 UTC+9 Yoav Weiss:

Contact emailsyo...@chromium.org, kojii...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Koji Ishii]

I think the one Yosi pointed out has some compat risks, but majority of usages won't be affected, and that we can change Blink if the WG resolves to change the spec.

Let me also note that Blink shipping the initial-letter property solves a big interoperability issue authors have today. Adjusting the drop caps position without the property requires hard coding the font metrics into their CSS, and the font metrics vary between Blink/WebKit and Gecko. So today, authors must detect the browsers and apply different baseline shift values for Blink and Gecko. When Blink ships this property, authors can use the property for Blink and WebKit (with prefix), and apply the font metrics only for one browser, eliminating the need to detect the browsers.

Contact emailsyo...@chromium.org, ko...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ca90a9b3-e58d-48c8-a46f-62a2c39ed429n%40chromium.org.

--

You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/01366215-cf05-4acf-beff-fefbc5f08757n%40chromium.org.

[Alex Russell]

LGTM1 with nits:

In the list above, it doesn't seem correct to me that we'll be able to change this one later if WebKit and Blink agree on a behaviour and the future spec changes:

1. 887 should define how the initial-letter relates to line boxes
   • We can match when resolved even after ship

Is there future compat risk here that we can reduce via WPT tests?

Best,

Alex

Contact emailsyo...@chromium.org, kojii...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ca90a9b3-e58d-48c8-a46f-62a2c39ed429n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Rick Byers]

Thanks for this. It looks like the feature is status=test instead of status=experimental, so I can't easily see WPT results on the dashboard. Can you share the test results please?

Also can you characterize the extent to which our implementation is compatible with the prefixed WebKit implementation? Are there known major differences? Especially in the case of the open spec issues which could have future compat implications, I'd feel much more comfortable aligning with what developers are already using via -webkit-initial-letter than if we were aligning with some new behavior with an open issue that considers matching WebKit.

>Any idea what the position in the CSS WG is about the maturity of the spec for this feature? I see a bunch of open spec issues mentioning initial letter. To what extent are you confident that none of them represent a potential breaking change depending on their resolution?

In this release, we focus on basic functionality, apply only to ::first-letter, as WebKit does.

I think current spec is stable for Western language in ::first-letter. So, I don't think we'll have breaking change for them.

For non-Western language, we need to do some handling of them once CSS WG has resolutions.

We also hope web developers will have some idea from experience, these help CSS WG's resolutions somehow.

- yosi

2022年11月24日木曜日 1:27:09 UTC+9 Rick Byers:

On Tue, Nov 22, 2022 at 3:41 AM Yoshifumi Inoue <yo...@chromium.org> wrote:

Contact emailsyo...@chromium.org, ko...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ca90a9b3-e58d-48c8-a46f-62a2c39ed429n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[Koji Ishii]

For the Rick's 2nd question:

Also can you characterize the extent to which our implementation is compatible with the prefixed WebKit implementation?

The coverage of Blink's current impl, prefixed WebKit's, and Gecko's WIP match for the following area:

• It works only when it is applied to ::first-letter pseudo element (the spec requires to do this automatically if used outside of ::first-letter)
• Supports Latin only (the spec covers other languages)

Among the 17 open spec issues:

• 6 issues (5527, 5366, 5244, 3217, 2866, and 864) are for these areas.
• 9 issues (5476, 5425, 5398, 5220, 3698, 3240, 965, 410, 310) are about adding new features, or interactions with features Blink doesn't support yet.
• 4988 (used vs computed): Blink matches the current spec, WebKit's prefix impl, and Gecko's WIP.
• 887 (relation with line boxes):
• Is the initial letter part of the block's first line box? Blink matches the prefixed WebKit, and matches to what dbaron thinks in the issue.
• Underline (test): Blink matches WebKit for how it draws underline on. But the offset and thickness don't match; WebKit draws a thicker underline. This is because WebKit doesn't support the "decorating box" definition of CSS text decorations yet. Also note that Blink supported the "decorating box" recently this year, changing the existing behavior. So if WG resolves differently for the initial-letter, changing the behavior is likely fine.

In short, Blink matches prefixed WebKit for open issues. The biggest known difference between Blink and WebKit is the interaction with floats; i.e., when there are floats in blocks with initial-letter. This was discussed at WG after WebKit shipped, and Blink matches what WG resolved.

Yosi will respond to other questions.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY-8fWVHxN2LQuHqftf%2BogyV7rgVwFBgbBcg0ARHuEYbHw%40mail.gmail.com.

[Yoshifumi Inoue]

Thanks for response!

I really apricate Koji for detailed explanation about WebKit.

Here is my answers of rest of questions.

Alex's question

887 should define how the initial-letter relates to line boxes

Is there future compat risk here that we can reduce via WPT tests?

We have tests, text-decoration (will commit soon) and ::first-line in wpt for recording current Blink's behavior. 

We're watching the spec resolution and wpt test changes. We'll work for changes.

Rick's question

It looks like the feature is status=test instead of status=experimental, 

I change feature to status=experimental on Dec 1 UTC+9. So, we can see initial-letter in canary soon.

so I can't easily see WPT results on the dashboard. Can you share the test results please?

All tests for initial-letter is written by me and these tests are in wpt and chromium repository.

CQ verifies whether these tests are pass or failed.

-yosi

2022年12月1日木曜日 17:17:53 UTC+9 Koji Ishii:

Contact emailsyo...@chromium.org, kojii...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ca90a9b3-e58d-48c8-a46f-62a2c39ed429n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/01366215-cf05-4acf-beff-fefbc5f08757n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

[Rick Byers]

Thanks for the detailed analysis and explanation folks. This all sounds good to me. I'm convinced that this is mature enough to ship and that we'll continue to engage with the standards community to reasonably resolve any outstanding edge cases. LGTM2

Contact emailsyo...@chromium.org, ko...@chromium.org

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc32334-ed12-4c85-b80e-0eb97027496cn%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ca90a9b3-e58d-48c8-a46f-62a2c39ed429n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/01366215-cf05-4acf-beff-fefbc5f08757n%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

[TAMURA, Kent]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY_aYVYY_gHghv_joMBkc29NZhqzRhUD9%3DVJ%2Bv9F9ytz1A%40mail.gmail.com.

--

TAMURA Kent
Software Engineer, Google