Intent to Experiment: CSS line-height-step property

[Koji Ishii]

​​Contact emails

ko...@chromium.org

Spec

https://drafts.csswg.org/css-rhythm/#line-height-step

Summary

The CSS line-height-step property provides an ability to round the heights of line boxes to the multiple of the specified length. This property allows authors to control vertical rhythm.

The vertical rhythm is a broad, fundamental typographic technique that can apply to many scenarios. This property primarily focuses on East Asian use cases.

Link to “Intent to Implement” blink-dev discussion

Intent to Ship in April 2017

Goals for experimentation

Although the Intent to Ship has gotten 3 LGTMs in April, multiple people in Mozilla raised concerns after that, such as:

• On dev.platform, was a question of whether author really want this feature.
• Chromium has it behind a flag, have people been building websites with it and saying "yes I absolutely want this", haven't really seen that.
  
• People want vertical rhythm, but is this the feature that will solve it.
• It will work in simple cases but fail in more complex (and realistic) ones.

With these feedback, I suspended shipping and I'm trying to address these concerns in this experiment.

A few Japanese sites were built since then and I'm hearing very positive feedback from the web developers. But I also heard that origin trials can help more developers to experiment, and also for them to gather feedback from more users than who enabled the experimental web platform features.

Experimental timeline

Currently the Origin Trials is going to support CSS properties in M64, whose estimated week of stable is Jan 23rd, 2018.

The plan is to experiment in M64, gather feedback, and report back to W3C CSS WG, either at their weekly conference calls or at Berlin F2F April 2018.

Any risks when the experiment finishes?

No. Sites are supposed to use "@supports" to check the availability of the property and should fallback if it is not available. I'm going to write an article for how to write such CSS at a Japanese site.

Ongoing technical constraints

None.

Gecko and WebKit have done WIP patches, though Gecko doesn't want to land for the reasons above. WebKit is waiting for the WG discussion, and Edge showed the public positive signal.

Will this feature be supported on all five Blink platforms supported by Origin Trials (Windows, Mac, Linux, Chrome OS, and Android)?

Yes.

Link to entry on the feature dashboard

https://www.chromestatus.com/feature/5734273533345792

[Chris Harrelson]

Sounds like you have commitment from several of these Japanese sites to try out the feature, or that they have already included this CSS in their site? If their sites are sufficiently complex, can't they try out Chrome with the flag enabled and give you feedback on whether the content displays with the expected quality? That would be a lot simpler than a full experiment.

Chris

--
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/CACQRE%2BRzyub%2BMzoOc2dOwxqYasO42j71kaCrMmoO6nFqQAdLaw%40mail.gmail.com.

[Koji Ishii]

On Nov 9, 2017 4:36 AM, "Chris Harrelson" <chri...@chromium.org> wrote:

Sounds like you have commitment from several of these Japanese sites to try out the feature, or that they have already included this CSS in their site?

Yes, they already included this CSS in their sites.

If their sites are sufficiently complex, can't they try out Chrome with the flag enabled and give you feedback on whether the content displays with the expected quality? That would be a lot simpler than a full experiment.

I think their sites are sufficiently complex, and they gave good feedback to me.

Part of the WG feedback was that "all we hear are only through Koji", and that I expected the origin trials can formalize the feedback, but that was before these sites go live. I'll double check with the WG if they are comfortable for us to ship now.

[Jet Villegas]

Got URLs?

[Koji Ishii]

2017-11-09 17:59 GMT+09:00 Jet Villegas <jvil...@mozilla.com>:

Got URLs?

​Two sites are up currently:

https://blog.jxck.io/entries/2017-10-09/css-rhythmic-sizing.html

https://app.codegrid.net/entry/z-index-1

and 5 more companies are working on. The progress is tracked in a github issue here:

https://github.com/w3c/csswg-drafts/issues/1942

​

[Jet Villegas]

Viewing the CSS for the 2 pages below does not show any usage of line-height-step.

--Jet

[Koji Ishii]

​​

2017-11-10 4:56 GMT+09:00 Jet Villegas <jvil...@mozilla.com>:

Viewing the CSS for the 2 pages below does not show any usage of line-height-step. 

Do you mean you could not find where it is used?

The 2nd page includes CSS at:

https://app.codegrid.net/cg-ui/css/codegrid-ui.min.css

which has:

@supports (line-height-step: 1em) {
  article.CG2-article {
    & > p {
      line-height: 1.2;
      line-height-step: var(--step-grid);
      margin: var(--step-grid) 0;
    }​

​You can open Inspector and check <p> tags to see the above `line-height-step` is applied.

Does this help?

[Philip Jägenstedt]

Koji, was this discussed at TPAC, and do do you have feedback from sites that you've channeled to the WG?

Or, in other words, is this intent on hold or waiting for an LGTM?

--

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

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

[Koji Ishii]

Allow me to hold this one, I'll ask at WG ML or weekly and come back to here. Didn't have time in TPAC.

Sorry for not updating sooner, thought Intent to Experiment doesn't require LGTM, but I don't have good understanding of the process.

[Philip Jägenstedt]

It was initially unclear to everyone, but https://dev.chromium.org/blink/origin-trials/running-an-origin-trial now says that intent to experiment needs just 1xLGTM.

[Koji Ishii]

Thank you, found it in "How to setup an extension or continued experiment?" section.