Skip to content
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

Jump to bottom

Line height fixes #1993

Merged
merged 7 commits into from Dec 6, 2017
Merged

Line height fixes #1993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c2a93bf
[css2] Correct misleading note
frivoal Nov 16, 2017
a3c7617
[css2] Make line-height match implementations for values other than n…
frivoal Nov 16, 2017
b55a734
[css2] Make line-height:normal match implementations
frivoal Nov 16, 2017
d8f466a
[css2] Fix line-height:normal with only fallback fonts
frivoal Nov 16, 2017
4fd2698
[css2] Tighten the definition of the content area height for inlines
frivoal Nov 16, 2017
0add755
[css-fonts] tighten the definition of First Available Font
frivoal Nov 16, 2017
71aaa7d
[css2] Editorial tweaks about line-height
frivoal Nov 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 8 additions & 8 deletions css-fonts-3/Fonts.html
View file
Open in desktop
Expand Up @@ -3478,14 +3478,14 @@ <h3 id=font-style-matching><span class=secno>5.2. </span>Matching font
consistent as possible across user agents, given an identical set of
available fonts and rendering technology.

<p>The <dfn id=first-available-font>first available font</dfn>, used in the
definition of <a
href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative
lengths</em></a> such as ‘<code class=property>ex</code>’ and ‘<code
class=property>ch</code>’, is defined to be the first available font
that would match any character given font families in the ‘<code
class=property>font-family</code>’ list (or a user agent's default font
if none are available).
<p>The <dfn id=first-available-font>first available font</dfn>,
used for example in the definition of <a href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative lengths</em></a>
such as ‘<code class=property>ex</code>’ and ‘<code class=property>ch</code>’
or in the definition of the <a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">‘<code class=property>line-height</code>’</a> property,
is defined to be the first available font
that would match the U+0020 (space) character
given font families in the ‘<code class=property>font-family</code>’ list
(or a user agent's default font if none are available).

<h3 id=cluster-matching><span class=secno>5.3. </span>Cluster matching</h3>

Expand Down
13 changes: 8 additions & 5 deletions css-fonts-3/Fonts.src.html
View file
Open in desktop
Expand Up @@ -2566,11 +2566,14 @@ <h3 id="font-style-matching">Matching font styles</h3>
as consistent as possible across user agents, given an identical set
of available fonts and rendering technology.</p>

<p>The <dfn>first available font</dfn>, used in the definition of
<a href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative lengths</em></a>
such as 'ex' and 'ch', is defined to be the first available font that
would match any character given font families in the 'font-family'
list (or a user agent's default font if none are available).</p>
<p>The <dfn>first available font</dfn>,
used for example in the definition of <a href="https://www.w3.org/TR/css3-values/#font-relative-lengths"><em>font-relative lengths</em></a>
such as 'ex' and 'ch'
or in the definition of the <a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a> property,
is defined to be the first available font
that would match the U+0020 (space) character
given font families in the 'font-family' list
(or a user agent's default font if none are available).</p>

<h3 id="cluster-matching">Cluster matching</h3>

Expand Down
5 changes: 3 additions & 2 deletions css-fonts-4/Overview.bs
View file
Open in desktop
Expand Up @@ -2610,9 +2610,10 @@ to ensure that the results are as consistent as possible across user agents,
given an identical set of available fonts and rendering technology.

The <dfn>first available font</dfn>,
used in the definition of <a>font-relative lengths</a> such as ''ex'' and ''ch'',
used for example in the definition of <a>font-relative lengths</a> such as ''ex'' and ''ch''
or in the definition of the 'line-height' property
is defined to be the first available font
that would match any character
that would match the U+0020 (space) character
given font families in the 'font-family' list
(or a user agent's default font if none are available).

Expand Down
6 changes: 3 additions & 3 deletions css2/indexlist.html
View file
Open in desktop
Expand Up @@ -370,7 +370,7 @@ <H1 id="q0">Appendix I. Index</H1>
<li>definition of, <a href="visufx.html#value-def-left" title="&lt;left&gt;, definition of" class="index-def"><strong>1</strong></a>
</ul>
<li>'left', <a href="visuren.html#propdef-left" title="'left'" class="index-def"><strong>1</strong></a>
<li>&lt;length&gt;, <a href="colors.html#x9" title="&lt;length&gt;" class="index-inst"><span>1</span></a>, <a href="text.html#x1" title="&lt;length&gt;" class="index-inst"><span>2</span></a>, <a href="text.html#x10" title="&lt;length&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x7" title="&lt;length&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x11" title="&lt;length&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x15" title="&lt;length&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x19" title="&lt;length&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x24" title="&lt;length&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x4" title="&lt;length&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x8" title="&lt;length&gt;" class="index-inst"><span>10</span></a>
<li>&lt;length&gt;, <a href="colors.html#x9" title="&lt;length&gt;" class="index-inst"><span>1</span></a>, <a href="text.html#x1" title="&lt;length&gt;" class="index-inst"><span>2</span></a>, <a href="text.html#x10" title="&lt;length&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x7" title="&lt;length&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x11" title="&lt;length&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x15" title="&lt;length&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x18" title="&lt;length&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x23" title="&lt;length&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x24" title="&lt;length&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x4" title="&lt;length&gt;" class="index-inst"><span>10</span></a>, <a href="visudet.html#x8" title="&lt;length&gt;" class="index-inst"><span>11</span></a>
<ul class="index">
<li>definition of, <a href="syndata.html#value-def-length" title="&lt;length&gt;, definition of" class="index-def"><strong>1</strong></a>
</ul>
Expand Down Expand Up @@ -435,7 +435,7 @@ <H1 id="q0">Appendix I. Index</H1>
<li>as display value, <a href="visuren.html#x22" title="'none', as display value" class="index-def"><strong>1</strong></a>
</ul>
<li>normal, <a href="generate.html#x10" title="normal" class="index-inst"><span>1</span></a>
<li>&lt;number&gt;, <a href="aural.html#x11" title="&lt;number&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x32" title="&lt;number&gt;" class="index-inst"><span>2</span></a>, <a href="aural.html#x39" title="&lt;number&gt;" class="index-inst"><span>3</span></a>, <a href="aural.html#x4" title="&lt;number&gt;" class="index-inst"><span>4</span></a>, <a href="aural.html#x41" title="&lt;number&gt;" class="index-inst"><span>5</span></a>, <a href="aural.html#x43" title="&lt;number&gt;" class="index-inst"><span>6</span></a>, <a href="aural.html#x6" title="&lt;number&gt;" class="index-inst"><span>7</span></a>, <a href="aural.html#x8" title="&lt;number&gt;" class="index-inst"><span>8</span></a>, <a href="syndata.html#x43" title="&lt;number&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x18" title="&lt;number&gt;" class="index-inst"><span>10</span></a>, <a href="visudet.html#x20" title="&lt;number&gt;" class="index-inst"><span>11</span></a>
<li>&lt;number&gt;, <a href="aural.html#x11" title="&lt;number&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x32" title="&lt;number&gt;" class="index-inst"><span>2</span></a>, <a href="aural.html#x39" title="&lt;number&gt;" class="index-inst"><span>3</span></a>, <a href="aural.html#x4" title="&lt;number&gt;" class="index-inst"><span>4</span></a>, <a href="aural.html#x41" title="&lt;number&gt;" class="index-inst"><span>5</span></a>, <a href="aural.html#x43" title="&lt;number&gt;" class="index-inst"><span>6</span></a>, <a href="aural.html#x6" title="&lt;number&gt;" class="index-inst"><span>7</span></a>, <a href="aural.html#x8" title="&lt;number&gt;" class="index-inst"><span>8</span></a>, <a href="syndata.html#x43" title="&lt;number&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x19" title="&lt;number&gt;" class="index-inst"><span>10</span></a>
<ul class="index">
<li>definition of, <a href="syndata.html#value-def-number" title="&lt;number&gt;, definition of" class="index-def"><strong>1</strong></a>
</ul>
Expand Down Expand Up @@ -485,7 +485,7 @@ <H1 id="q0">Appendix I. Index</H1>
<li>'pause', <a href="aural.html#propdef-pause" title="'pause'" class="index-def"><strong>1</strong></a>
<li>'pause-after', <a href="aural.html#propdef-pause-after" title="'pause-after'" class="index-def"><strong>1</strong></a>
<li>'pause-before', <a href="aural.html#propdef-pause-before" title="'pause-before'" class="index-def"><strong>1</strong></a>
<li>&lt;percentage&gt;, <a href="aural.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x17" title="&lt;percentage&gt;" class="index-inst"><span>2</span></a>, <a href="colors.html#x8" title="&lt;percentage&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x2" title="&lt;percentage&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x16" title="&lt;percentage&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x21" title="&lt;percentage&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x23" title="&lt;percentage&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x5" title="&lt;percentage&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x9" title="&lt;percentage&gt;" class="index-inst"><span>10</span></a>
<li>&lt;percentage&gt;, <a href="aural.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>1</span></a>, <a href="aural.html#x17" title="&lt;percentage&gt;" class="index-inst"><span>2</span></a>, <a href="colors.html#x8" title="&lt;percentage&gt;" class="index-inst"><span>3</span></a>, <a href="text.html#x2" title="&lt;percentage&gt;" class="index-inst"><span>4</span></a>, <a href="visudet.html#x12" title="&lt;percentage&gt;" class="index-inst"><span>5</span></a>, <a href="visudet.html#x16" title="&lt;percentage&gt;" class="index-inst"><span>6</span></a>, <a href="visudet.html#x20" title="&lt;percentage&gt;" class="index-inst"><span>7</span></a>, <a href="visudet.html#x22" title="&lt;percentage&gt;" class="index-inst"><span>8</span></a>, <a href="visudet.html#x5" title="&lt;percentage&gt;" class="index-inst"><span>9</span></a>, <a href="visudet.html#x9" title="&lt;percentage&gt;" class="index-inst"><span>10</span></a>
<ul class="index">
<li>definition of, <a href="syndata.html#value-def-percentage" title="&lt;percentage&gt;, definition of" class="index-def"><strong>1</strong></a>
</ul>
Expand Down
79 changes: 39 additions & 40 deletions css2/visudet.html
View file
Open in desktop
Expand Up @@ -971,12 +971,10 @@ <h3>10.6.1 <a name="inline-non-replaced">Inline, non-replaced elements</a></h3>
<p>The <a href="visudet.html#propdef-height" class="noxref"><span class="propinst-height">'height'</span></a> property does not
apply. The height of the content area should be based on the font, but
this specification does not specify how. A UA may, e.g., use the
em-box or the maximum ascender and descender of the font. (The latter
the maximum ascender and descender of the font. (This
would ensure that glyphs with parts above or below the em-box still
fall within the content area, but leads to differently sized boxes for
different fonts; the former would ensure authors can control
background styling relative to the 'line-height', but leads to glyphs
painting outside their content area.)
different fonts.)
</p>
<p class=note>Note: level 3 of CSS will probably include a property to
select which measure of the font is used for the content height.
Expand All @@ -989,14 +987,10 @@ <h3>10.6.1 <a name="inline-non-replaced">Inline, non-replaced elements</a></h3>
the height of the line box.
</p>
<p><a name="multi-font-inline-height"></a> If more than one font is
used (this could happen when glyphs are found in different fonts), the
height of the content area is not defined by this specification.
However, we suggest that the height is chosen such that the content
area is just high enough for either (1) the em-boxes, or (2) the
maximum ascenders and descenders, of <em>all</em> the fonts in the
element. Note that this may be larger than any of the font sizes
involved, depending on the baseline alignment of the fonts.
</p>
used (this could happen when glyphs are found in different fonts),
the height of the content area is not affected
by the glyphs from the fallback fonts,
and only depends on the first available font.</p>

<h3>10.6.2 <a name="inline-replaced-height">Inline replaced elements</a>,
block-level replaced elements in normal flow, 'inline-block' replaced
Expand Down Expand Up @@ -1415,24 +1409,38 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
each glyph, determine the <var>A</var> and <var>D</var>. Note that
glyphs in a single element may come from different fonts and thus need
not all have the same <var>A</var> and <var>D</var>. If the inline box
contains no glyphs at all, it is considered to contain a <a
contains no glyphs at all,
or if it contains only glyphs from fallback fonts,
it is considered to contain a <a
href="#strut">strut</a> (an invisible glyph of zero width) with the
<var>A</var> and <var>D</var> of the element's first available font.

<p>Still for each glyph, determine the leading <var>L</var> to add,
<p id="inline-box-height">When the value of the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
is something other than 'normal',
determine the leading <var>L</var> to add,
where <var>L</var> = <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> - <var>AD</var>. Half
the leading is added above <var>A</var> and the other half below
<var>D</var>, giving the glyph and its leading a total height above
class="propinst-line-height">'line-height'</span></a> - <var>AD</var> of the first available font.
Half the leading is added above <var>A</var> of the first available font, and the other half below
<var>D</var> of the first available font, giving a total height above
the baseline of <var>A'</var> = <var>A</var> + <var>L</var>/2 and a
total depth of <var>D'</var> = <var>D</var> + <var>L</var>/2.
Glyphs from fonts other than the first available font
do not impact the height or baseline of the inline box
for <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> values other than 'normal'.

<p class=note><strong>Note.</strong> <var>L</var> may be negative.

<p id="inline-box-height">The height of the inline box encloses all
glyphs and their half-leading on each side and is thus exactly
'line-height'. Boxes of
child elements do not influence this height.
<p>Boxes of child elements do not influence this height.

<p>When the value of the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
is 'normal',
the height of the inline box encloses all glyphs, going from the highest <var>A</var> to the deepest <var>D</var>.

<p>User Agents may use different sets of font metrics when determining <var>A</var> and <var>D</var>
depending on whether the <a href="" class="noxref"><span class="propinst-line-heigh">'line-height'</span></a> property
is 'normal' or some other value,
for instance taking external leading metrics into account
only in the 'normal' case.

<p>Although margins, borders, and padding of non-replaced elements do
not enter into the line box calculation, they are still rendered
Expand Down Expand Up @@ -1493,29 +1501,25 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>

<dl>
<dt><strong>normal</strong> </dt>
<dd>Tells user agents to set the used
value to a "reasonable" value based on the font of the element. The
value has the same meaning as <span class="index-inst"
title="&lt;number&gt;" id="x18"><a href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number">&lt;number&gt;</span></a></span>. We recommend a
used value for 'normal' between 1.0 to 1.2. The <a
href="cascade.html#computed-value">computed value</a> is 'normal'.
<dd>Tells user agents to determine the height of the inline box
automatically based on font metrics.
See above for details.
</dd>
<dt><span class="index-inst" title="&lt;length&gt;" id="x19"><a href="syndata.html#value-def-length" class="noxref"><span
<dt><span class="index-inst" title="&lt;length&gt;" id="x18"><a href="syndata.html#value-def-length" class="noxref"><span
class="value-inst-length"><strong>&lt;length&gt;</strong></span></a></span>
</dt>
<dd>The specified length is used in the calculation of the line box
height. Negative values are illegal.
</dd>
<dt><span class="index-inst" title="&lt;number&gt;" id="x20"><a href="syndata.html#value-def-number" class="noxref"><span
<dt><span class="index-inst" title="&lt;number&gt;" id="x19"><a href="syndata.html#value-def-number" class="noxref"><span
class="value-inst-number"><strong>&lt;number&gt;</strong></span></a></span>
</dt>
<dd>The used value of the property is this number multiplied by the
element's font size. Negative values are illegal. The <a
href="cascade.html#computed-value">computed value</a> is the same as
the specified value.
</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x21"><a href="syndata.html#value-def-percentage" class="noxref"><span
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x20"><a href="syndata.html#value-def-percentage" class="noxref"><span
class="value-inst-percentage"><strong>&lt;percentage&gt;</strong></span></a></span>
</dt>
<dd>The <a href="cascade.html#computed-value">computed value</a> of the
Expand All @@ -1534,14 +1538,9 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
</pre>
</div>

<p>When an element contains text that is rendered
in more than one font, user agents may determine the 'normal' <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> value according to
the largest font size.
</p>
<p class=note><em><strong>Note.</strong> When there is only one value of <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> for all inline
boxes in a block container box and they are all in the same font (and
class="propinst-line-height">'line-height'</span></a> (other than 'normal') for all inline
boxes in a block container box and they all use the same first available font (and
there are no replaced elements, inline-block
elements, etc.), the above will ensure that
baselines of successive lines are exactly <a href="visudet.html#propdef-line-height" class="noxref"><span
Expand Down Expand Up @@ -1608,14 +1607,14 @@ <h3>10.8.1 <a name="leading">Leading and half-leading</a></h3>
<dd>Align the bottom of the box with the bottom of the parent's
content area (see <a
href="#inline-non-replaced">10.6.1</a>).</dd>
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x23"><a href="syndata.html#value-def-percentage" class="noxref"><span
<dt><span class="index-inst" title="&lt;percentage&gt;" id="x22"><a href="syndata.html#value-def-percentage" class="noxref"><span
class="value-inst-percentage"><strong>&lt;percentage&gt;
</strong></span></a></span></dt>
<dd>Raise (positive value) or lower (negative value) the box
by this distance (a percentage of the <a href="visudet.html#propdef-line-height" class="noxref"><span
class="propinst-line-height">'line-height'</span></a> value).
The value '0%' means the same as 'baseline'.</dd>
<dt><span class="index-inst" title="&lt;length&gt;" id="x24"><a href="syndata.html#value-def-length" class="noxref"><span
<dt><span class="index-inst" title="&lt;length&gt;" id="x23"><a href="syndata.html#value-def-length" class="noxref"><span
class="value-inst-length"><strong>&lt;length&gt;
</strong></span></a></span></dt>
<dd>Raise (positive value) or lower (negative value) the box
Expand Down