Skip to content

Commit 1fae25f

Browse files
fantasaifantasai
committed
[css-fonts-5] Extend font-size-adjust to additional metrics. w3c#6160 
1 parent fe974dc commit 1fae25f

1 file changed

Lines changed: 140 additions & 104 deletions

File tree

‎css-fonts-5/Overview.bs‎

Lines changed: 140 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -95,40 +95,109 @@ Relative sizing: the 'font-size-adjust' property</h3>
9595

9696
<pre class="propdef">
9797
Name: font-size-adjust
98-
Value: none | from-font | <<number>>
98+
Value: none | [ ex | cap | ch | ic ]? [ from-font | <<number>> ]
9999
Initial: none
100100
Applies to: all elements and text
101101
Inherited: yes
102102
Percentages: N/A
103-
Computed value: a number or the keyword ''font-size-adjust/none''
104-
Animation type: by computed value type
103+
Computed value: the keyword ''font-size-adjust/none'', or a pair of a metric keyword and a <<number>>
104+
Animation type: discrete if the keywords differ, otherwise by computed value type
105105
</pre>
106106

107107
For any given font size, the apparent size and effective legibility of text
108-
varies across fonts.
109-
For bicameral scripts such as Latin or Cyrillic that
108+
varies across fonts as a function of their design.
109+
For example,
110+
for bicameral scripts such as Latin or Cyrillic that
110111
distinguish between upper and lowercase letters,
111112
the relative height of lowercase letters
112113
compared to their uppercase counterparts
113114
is a determining factor of legibility.
114-
This is commonly referred to as the <dfn>aspect value</dfn>
115-
and is equal to the x-height of a font
116-
divided by the font size.
117-
118-
Note: For text which uses diacritics,
119-
too large an x-height will actually decrease legibility
120-
as the diacritics become cramped.
121-
122115
In situations where font fallback occurs,
123-
fallback fonts might not share the same aspect value
124-
as the desired font family
125-
and will thus be less readable.
126-
The 'font-size-adjust' property is a way
127-
to preserve the readability of text when font fallback occurs.
128-
It does this by adjusting the font-size
129-
so that the x-height is the same
116+
fallback fonts might not share
117+
the same ratios as the desired font family
118+
for key typographic metrics,
119+
and will thus appear to be a different size
120+
and possibly be less readable.
121+
122+
The 'font-size-adjust' property provides a way
123+
to preserve the readability and apparent size of text
124+
when font fallback occurs.
125+
It does this by adjusting the used font size
126+
so that the specified metric is the same
130127
regardless of the font used.
131128

129+
Values have the following meanings:
130+
131+
<dl dfn-type=value dfn-for="font-size-adjust">
132+
<dt><dfn>none</dfn>
133+
<dd>
134+
No special 'font-size' adjustment is applied.
135+
136+
<dt><dfn>ex | cap | ch | ic</dfn>
137+
<dd>
138+
Specifies the font metric to normalize,
139+
defaulting to ''font-size-adjust/ex'':
140+
141+
<dl>
142+
<dt><dfn>ex</dfn>
143+
<dd>
144+
Normalize the <dfn dfn>aspect value</dfn> of the fonts,
145+
using the x-height divided by the font size.
146+
147+
<dt><dfn>cap</dfn>
148+
<dd>
149+
Normalize the cap-height of the fonts,
150+
using the cap-height by the font size.
151+
152+
<dt><dfn>ch</dfn>
153+
<dd>
154+
Normalize the narrow pitch of the fonts,
155+
using the advance measure of “0” (ZERO, U+0030)
156+
divided by the font size.
157+
158+
<dt><dfn>ic</dfn>
159+
<dd>
160+
Normalize the wide pitch of the font,
161+
using the advance measure of “水” (CJK water ideograph, U+6C34)
162+
divided by the font size.
163+
</dl>
164+
165+
ISSUE(6384):
166+
If the required font metric cannot be derived from a font,
167+
then that font’s size is not adjusted.
168+
169+
<dt><dfn><<number>></dfn>
170+
<dd>
171+
Each font’s [=used value|used=] size is normalized
172+
to match the chosen font metric to
173+
this specified proportion of the [=computed value|computed=] 'font-size'.
174+
In other words,
175+
for each glyph,
176+
the adjusted font size to use <var>u</var>
177+
is calculated as:
178+
179+
<pre><var>u</var> = ( <var>m</var> / <var>m′</var> ) <var>s</var></pre>
180+
181+
where:
182+
183+
<pre>
184+
<var>s</var> = computed 'font-size' value
185+
<var>m</var> = metric as specified by the 'font-size-adjust' property
186+
<var>m′</var> = metric as specified in the actual font
187+
<var>u</var> = adjusted font-size to use
188+
</pre>
189+
190+
Negative values are invalid.
191+
192+
<dt><dfn>from-font</dfn>
193+
<dd>
194+
Computes to the <<number>> corresponding to
195+
the specified metric of the [=first available font=].
196+
197+
ISSUE(6384): Shouldn't this be the first available font
198+
that can provide the required metric?
199+
</dl>
200+
132201
<div class="example">
133202
The style defined below defines Verdana as the desired font family,
134203
but if Verdana is not available Futura or Times will be used.
@@ -154,90 +223,59 @@ Relative sizing: the 'font-size-adjust' property</h3>
154223
and so if fallback occurs,
155224
the text will be less legible at small sizes than Verdana
156225
unless font-size-adjust is also specified.
157-
</div>
158226

159-
How text rendered in each of these fonts compares is shown below,
160-
the columns show text rendered in Verdana, Futura and Times.
161-
The same font-size value is used across cells
162-
within each row and red lines are included to show the differences in x-height.
163-
In the upper half, each row is rendered in the same font-size value.
164-
The same is true for the lower half,
165-
but in this half the 'font-size-adjust' property is also set
166-
to 0.545,
167-
so that the actual font size is adjusted
168-
to preserve the x-height of Verdana across each row.
169-
Note how small text remains relatively legible across each row in the lower half.
170-
171-
<figure>
172-
<img alt="text with and without 'font-size-adjust'" src="images/fontsizeadjust.png" >
173-
<figcaption>Text with and without the use of 'font-size-adjust'</figcaption>
174-
</figure>
175-
176-
This property allows authors to specify an <a>aspect value</a> for an element
177-
that will effectively preserve the x-height of the first choice font,
178-
whether it is substituted or not.
179-
Values have the following meanings:
227+
Note: For text which uses diacritics,
228+
too large an x-height will actually decrease legibility
229+
as the diacritics become cramped.
230+
231+
How text rendered in each of these fonts compares is shown below,
232+
the columns show text rendered in Verdana, Futura and Times.
233+
The same font-size value is used across cells
234+
within each row and red lines are included to show the differences in x-height.
235+
In the upper half, each row is rendered in the same font-size value.
236+
The same is true for the lower half,
237+
but in this half the 'font-size-adjust' property is also set
238+
to 0.545,
239+
so that the actual font size is adjusted
240+
to preserve the x-height of Verdana across each row.
241+
Note how small text remains relatively legible across each row in the lower half.
180242

181-
<dl dfn-type=value dfn-for=font-size-adjust>
182-
<dt><dfn id="font-size-adjust-none-value">none</dfn>
183-
<dd>
184-
Do not preserve the font's x-height.
185-
186-
<dt><dfn id="aspect-ratio-value"><<number>></dfn>
187-
188-
<dd>
189-
Specifies the <a>aspect value</a> used in the calculation below
190-
to calculate the adjusted font size:
191-
192-
<pre>c = ( a / a' ) s</pre>
193-
194-
where:
195-
196-
<pre>
197-
s = font-size value
198-
a = <a>aspect value</a> as specified by the 'font-size-adjust' property
199-
a' = <a>aspect value</a> of actual font
200-
c = adjusted font-size to use
201-
</pre>
202-
203-
Negative values are invalid.
204-
205-
This value applies to any font that is selected
206-
but in typical usage it should be based on the <a>aspect value</a>
207-
of the first font in the font-family list.
208-
If this is specified accurately,
209-
the <code>(a/a')</code> term in the formula above
210-
is effectively 1 for the first font
211-
and no adjustment occurs.
212-
If the value is specified inaccurately,
213-
text rendered using the first font in the family list
214-
will display differently in older user agents
215-
that don't support 'font-size-adjust'.
216-
217-
<dt><dfn>from-font</dfn>
218-
<dd>
219-
Computes to the <<number>> corresponding to
220-
the <a>aspect value</a> of the [=first available font=].
221-
</dl>
243+
<figure>
244+
<img alt="text with and without 'font-size-adjust'" src="images/fontsizeadjust.png" >
245+
<figcaption>Text with and without the use of 'font-size-adjust'</figcaption>
246+
</figure>
247+
</div>
222248

223-
The value of 'font-size-adjust' affects the used value of 'font-size'
224-
but does not affect the computed value.
225-
It affects the size of relative units
249+
The value of 'font-size-adjust' affects the [=used value|used=] value of 'font-size'
250+
but does not affect the [=computed value|computed=] value.
251+
Therefore it can affect the size of relative units
226252
that are based on font metrics
227253
such as <code>ex</code> and <code>ch</code>
228254
but does not affect the size of <code>em</code> units.
229255
Since numeric values of 'line-height'
230-
refer to the computed size of 'font-size',
231-
'font-size-adjust' does not affect the used value of 'line-height'.
232-
233-
Note: In CSS, authors often specify 'line-height'
234-
as a multiple of the 'font-size'.
235-
Since the 'font-size-adjust' property affects the used value of 'font-size',
236-
authors should take care setting the line height
237-
when 'font-size-adjust' is used.
238-
Setting the line height too tightly can result in
239-
overlapping lines of text in this situation.
240-
256+
refer to the [=computed value|computed=] size of 'font-size',
257+
'font-size-adjust' also does not affect the [=used value|used=] value of 'line-height'.
258+
259+
Note: Since 'font-size-adjust' does not factor into the 'line-height',
260+
specifying a line height too tightly can result in overlapping lines of text.
261+
For example, when a fallback font with a low [=aspect value=]
262+
is normalized to match one with a high [=aspect value=],
263+
its ascenders and descenders are likely to extend outside the line box
264+
with ''line-height: 1''.
265+
266+
The 'font-size-adjust' adjustment applies to any font that is selected
267+
but in typical usage it would be based
268+
on the corresponding metric value
269+
of the first (most desired) font in the 'font-family' list.
270+
If this is specified accurately,
271+
the <code>(<var>m</var>/<var>m′</var>)</code> term in the adjustment formula
272+
will resolve to <code>1</code> for the first font
273+
and no adjustment occurs for that font;
274+
and the rest of the fonts will resolve to match.
275+
If the value is specified inaccurately,
276+
text rendered using the first font in the family list
277+
will display differently in older user agents
278+
that don't support 'font-size-adjust'.
241279

242280
<div class="example">
243281
Authors can calculate the <a>aspect value</a> for a given font
@@ -279,13 +317,11 @@ Relative sizing: the 'font-size-adjust' property</h3>
279317
Adjust the value until the boxes align.
280318
</div>
281319

282-
The 'font-size-adjust' property is applied after the 'size-adjust' descriptor.
283-
284-
Note: The consequence of applying 'font-size-adjust' after 'size-adjust' is that
285-
'size-adjust' appears to have no effect.
286-
287-
Issue(5539):
288-
320+
Note: If the specified metric has been overridden in ''@font-face'',
321+
e.g. by 'size-adjust',
322+
then the overridden metric will be used in the 'font-size-adjust' calculation.
323+
Consequently, applying 'font-size-adjust' and 'size-adjust' together
324+
means that 'size-adjust' appears to have no effect.
289325

290326
<h2 id="font-resources">
291327
Font Resources</h2>

0 commit comments

Comments
 (0)