New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-rhythm] Real sites using the `line-height-step` property #1942

Open
kojiishi opened this Issue Nov 6, 2017 · 9 comments

Comments

Projects
None yet
3 participants
@kojiishi
Contributor

kojiishi commented Nov 6, 2017

In Paris F2F, @jetvillegas requested that he wants to see real sites using the line-height-step property to prove that this property is what authors want.

Several Japanese companies started creating pages in response to the request. This issue keeps track of their progress.

/cc @frivoal @FremyCompany @litherum @fantasai @astearns @dbaron @eaenet

@kojiishi kojiishi self-assigned this Nov 6, 2017

@kojiishi

This comment has been minimized.

Contributor

kojiishi commented Nov 6, 2017

A web developer blog:
https://blog.jxck.io/

He even wrote an article from his experience.
https://blog.jxck.io/entries/2017-10-09/css-rhythmic-sizing.html

@kojiishi

This comment has been minimized.

Contributor

kojiishi commented Nov 6, 2017

A subscription service for web front end professional just applied the line-height-step to their articles.
Example: https://app.codegrid.net/entry/z-index-1

@kojiishi

This comment has been minimized.

Contributor

kojiishi commented Nov 6, 2017

As far as I know, 5 more companies are working on, but they will not make their pages live before TPAC unfortunately.

So far the feedback is very positive. All web engineer done so far could apply it to their pages within 2-3 hours.

@kojiishi

This comment has been minimized.

Contributor

kojiishi commented Nov 8, 2017

A Japanese article saying he wants the line-height-step but since it's still not available, he simulated it in Sass.

@kojiishi

This comment has been minimized.

Contributor

kojiishi commented Nov 14, 2017

My Japanese article is up. Hopefully Google Translate or Bing Translate can do good translation.

@kojiishi kojiishi changed the title from Real sites using the `line-height-step` property to [css-rhythm] Real sites using the `line-height-step` property Nov 16, 2017

@kojiishi

This comment has been minimized.

Contributor

kojiishi commented Nov 16, 2017

Two more sites are now live from KADOKAWA Corporation, one of the largest media company in Japan:

http://ascii.jp/elem/000/001/588/1588140/?topnew=1
http://weekly.ascii.jp/elem/000/000/407/407547/

These are very popular news sites.

@FremyCompany

This comment has been minimized.

Contributor

FremyCompany commented Nov 17, 2017

@kojiishi Could you include screenshots showing how the experience is improved on these sites, and how much code was written to achieve these improvements?

@kojiishi

This comment has been minimized.

Contributor

kojiishi commented Nov 28, 2017

@FremyCompany here's screenshots of https://blog.jxck.io/ , the left is off, the right is on.

line-height-step-jxck io-compare

and copying the CSS below:

@supports (line-height-step: 1px) {
  article {
    line-height: 1.5;
    --grid: 1.5em;
    line-height-step: var(--grid);
  }

  article h1,
  article h2,
  article h3,
  article h4,
  article h5,
  article h6 {
    display: inline-block;
    width: 100%;
    line-height-step: 0;
    line-height: 1.2;
    margin-bottom: 0;
  }

  article p {
    margin-top: var(--grid);
    margin-bottom: var(--grid);
  }

  article pre,
  article table {
    line-height-step: 0;
    line-height: normal;
  }
}
@frivoal

This comment has been minimized.

Collaborator

frivoal commented Dec 14, 2017

Maybe I am confused, but as far as I can tell this example from https://blog.jxck.io isn't actually demonstrating the need for line-height-step: no line is actually stepped, except the ones that contain the the titles, which would be much better handled with block-step-size than this artificial combination of display:inline-block and width: 100%.


PS: Also, if the lh unit was implemented, article p { margin-top: 1lh; margin-bottom: 1lh; } would work and remove the need for variables in this example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment