W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2017

Re: [csswg-drafts] [css-rhythm-1] Avoiding accidental double spacing

From: Florian Rivoal via GitHub <sysbot+gh@w3.org>
Date: Fri, 07 Apr 2017 05:28:52 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-292444751-1491542930-sysbot+gh@w3.org>
Alright, I think I have a solution that lets `line-height:normal` fulfill its purpose and solves the double spacing problem we've been discussing.

Hypothesis:
* `line-height:normal` needs to be left alone, for the reasons Koji said
* When **setting** the `line-heigh-step`, you (almost?) never want to set it to something smaller than the line height of the element that establishes the rhythm.
* When **inheriting** `line-height-step`, you do want it to be able to be smaller than the line height of the element it is inheriting into. That is what enables things like titles to be enlarged to a multiple of the step size.

Proposal:
` line-height-step: none | [ <length> [ safe | unsafe ]? ]`

* `none` computes to (or behaves as, I don't care) `0 unsafe`
* if both `safe` and `unsafe` are omitted, it is the same as `safe`
* `<length> unsafe` does the same as what the spec says now
* `<length> safe` computes to max( 1lh, <length>) unsafe. Nb: `lh` resolves at computed value time to an absolute lenght, so the computed value of `line-height-step`, and therefore what we will inherit, will be an absolute length.

Let's walk through that:

```html
<article>
<h1>Title!</h1>
Lorem Ipsum…
</article>
```
```css
article {
  font-size: 16px;
  line-height: normal;
  line-height-step: 20px;
}
h1 { font-size: 1.5em; }
```

First, assume a font for which `line-height: normal` gives 1.2:

* natural line height of article lines:  16px × 1.2 = 19.2px
* natural line height of h1 lines: 16px × 1.5 × 1.2 = 28.8px
* line-height-step on the article element: `20px safe` ⇒ 19.2px < 20px ⇒ `20px unsafe`
* line-height-step on the h1 element: inherit ⇒ `20px unsafe`
* adjusted line height of article lines: 19.2px ≤ 20px ⇒ 20px
* adjusted line height of article lines: 20px < 28.8px ≤ 2 × 20px ⇒ 2 × 20px = 40px

**⇒ Same as now**

Now, let's assume a font for which `line-height: normal` gives 1.3
* natural line height of article lines:  16px × 1.3 = 20.8px
  ** This is accidental. The author did not anticipate that on some other OS which they do not test on, the default font is different and larger than the step size. With the current spec, this would result in double lines for every line of the article, which is not what the author intended.**
* natural line height of h1 lines: 16px × 1.5 × 1.3 = 31.2px
* line-height-step on the article element: `20px safe` ⇒ 20.8px > 20px ⇒ `20.8px unsafe`
* line-height-step on the h1 element: inherit ⇒ `20.8px unsafe`
* adjusted line height of article lines: 20.8px ≤ 20.8px ⇒ 20.8px
* adjusted line height of article lines: 20.8px < 31.2px ≤ 2 × 20.8px ⇒ 2 × 20.8px = 41.6px

**⇒ The step size is a little larger than expected, allowing the rhythm to work without creating blank lines everywhere**


-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/938#issuecomment-292444751 using your GitHub account
Received on Friday, 7 April 2017 05:29:02 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:11 UTC