Skip to content

Commit 199c0fe

Browse files
svgeesussvgeesus
committed
[css-fonts-4] Clean up font-size-adjust section
1 parent 68a3eee commit 199c0fe

1 file changed

Lines changed: 152 additions & 126 deletions

File tree

‎css-fonts-4/Overview.bs‎

Lines changed: 152 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -919,149 +919,175 @@ Font size: the 'font-size' property</h3>
919919
<h3 id="font-size-adjust-prop">
920920
Relative sizing: the 'font-size-adjust' property</h3>
921921

922-
<pre class="propdef">
923-
Name: font-size-adjust
924-
Value: none | <<number>>
925-
Initial: none
926-
Applies to: all elements
927-
Inherited: yes
928-
Percentages: N/A
929-
Computed value: as specified
930-
Media: visual
931-
Animatable: as <<number>>
932-
</pre>
933-
934-
For any given font size, the apparent size and legibility of text
935-
varies across fonts. For scripts such as Latin or Cyrillic that
936-
distinguish between upper and lowercase letters, the relative height
937-
of lowercase letters compared to their uppercase counterparts is a
938-
determining factor of legibility. This is commonly referred to as the
939-
<dfn>aspect value</dfn>.
940-
Precisely defined, it is equal to the x-height of a font divided by
941-
the font size.
942-
943-
In situations where font fallback occurs, fallback fonts might not
944-
share the same aspect value as the desired font family and will thus
945-
appear less readable. The 'font-size-adjust' property is a way to
946-
preserve the readability of text when font fallback occurs. It does
947-
this by adjusting the font-size so that the x-height is the same
948-
regardless of the font used.
949-
950-
<div class="example">
951-
The style defined below defines Verdana as the desired font family, but if Verdana is not available Futura or Times
952-
will be used.
953-
954-
<pre>
955-
p {
956-
font-family: Verdana, Futura, Times;
957-
}
958-
959-
&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
922+
<pre class="propdef">
923+
Name: font-size-adjust
924+
Value: none | <<number>>
925+
Initial: none
926+
Applies to: all elements
927+
Inherited: yes
928+
Percentages: N/A
929+
Computed value: as specified
930+
Media: visual
931+
Animatable: as <<number>>
960932
</pre>
961933

962-
Verdana has a relatively high aspect value, lowercase letters are relatively tall compared to uppercase
963-
letters, so at small sizes text appears legible. Times has a lower aspect value and so if fallback occurs,
964-
the text will be less legible at small sizes than Verdana.
965-
</div>
934+
For any given font size, the apparent size and effective legibility of text
935+
varies across fonts.
936+
For scripts such as Latin or Cyrillic that
937+
distinguish between upper and lowercase letters,
938+
the relative height of lowercase letters
939+
compared to their uppercase counterparts
940+
is a determining factor of legibility.
941+
This is commonly referred to as the <dfn>aspect value</dfn>
942+
and is equal to the x-height of a font
943+
divided by the font size.
944+
945+
In situations where font fallback occurs,
946+
fallback fonts might not share the same aspect value as the desired font family
947+
and will thus be less readable.
948+
The 'font-size-adjust' property is a way
949+
to preserve the readability of text when font fallback occurs.
950+
It does this by adjusting the font-size
951+
so that the x-height is the same
952+
regardless of the font used.
966953

967-
How text rendered in each of these fonts compares is shown below, the columns show text rendered in Verdana, Futura and Times.
968-
The same font-size value is used across cells
969-
within each row and red lines are included to show the differences in x-height. In the upper half each row is rendered in the same font-size value. The same is true
970-
for the lower half but in this half the 'font-size-adjust' property is also set so that the actual font size is adjusted
971-
to preserve the x-height across each row. Note how small text remains relatively legible across each row in the lower half.
954+
<div class="example">
955+
The style defined below defines Verdana as the desired font family,
956+
but if Verdana is not available Futura or Times will be used.
972957

973-
<figure>
974-
<img alt="text with and without 'font-size-adjust'" src="images/fontsizeadjust.png" >
975-
<figcaption>Text with and without the use of 'font-size-adjust'</figcaption>
976-
</figure>
958+
<pre>
959+
p {
960+
font-family: Verdana, Futura, Times;
961+
}
977962

978-
This property allows authors to specify an <a>aspect value</a> for an element that
979-
will effectively preserve the x-height of the first choice font, whether it is substituted
980-
or not. Values have the following meanings:
963+
&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
964+
</pre>
981965

982-
<dl dfn-type=value dfn-for=font-size-adjust>
983-
<dt><dfn id="font-size-adjust-none-value">none</dfn>
984-
<dd>
985-
Do not preserve the font's x-height.
966+
Verdana has a relatively high aspect value,
967+
lowercase letters are relatively tall compared to uppercase letters,
968+
so at small sizes text appears legible.
969+
Times has a lower aspect value and so if fallback occurs,
970+
the text will be less legible at small sizes than Verdana.
971+
</div>
986972

987-
<dt><dfn id="aspect-ratio-value"><<number>></dfn>
973+
How text rendered in each of these fonts compares is shown below,
974+
the columns show text rendered in Verdana, Futura and Times.
975+
The same font-size value is used across cells
976+
within each row and red lines are included to show the differences in x-height.
977+
In the upper half each row is rendered in the same font-size value.
978+
The same is true for the lower half
979+
but in this half the 'font-size-adjust' property is also set
980+
so that the actual font size is adjusted
981+
to preserve the x-height across each row.
982+
Note how small text remains relatively legible across each row in the lower half.
988983

989-
<dd>
990-
Specifies the <a>aspect value</a> used in the calculation below to calculate the adjusted
991-
font size:
984+
<figure>
985+
<img alt="text with and without 'font-size-adjust'" src="images/fontsizeadjust.png" >
986+
<figcaption>Text with and without the use of 'font-size-adjust'</figcaption>
987+
</figure>
992988

993-
<pre>c = ( a / a' ) s</pre>
989+
This property allows authors to specify an <a>aspect value</a> for an element
990+
that will effectively preserve the x-height of the first choice font,
991+
whether it is substituted or not.
992+
Values have the following meanings:
993+
994+
<dl dfn-type=value dfn-for=font-size-adjust>
995+
<dt><dfn id="font-size-adjust-none-value">none</dfn>
996+
<dd>
997+
Do not preserve the font's x-height.
998+
999+
<dt><dfn id="aspect-ratio-value"><<number>></dfn>
1000+
1001+
<dd>
1002+
Specifies the <a>aspect value</a> used in the calculation below
1003+
to calculate the adjusted font size:
1004+
1005+
<pre>c = ( a / a' ) s</pre>
1006+
1007+
where:
1008+
1009+
<pre>
1010+
s = font-size value
1011+
a = <a>aspect value</a> as specified by the 'font-size-adjust' property
1012+
a' = <a>aspect value</a> of actual font
1013+
c = adjusted font-size to use
1014+
</pre>
1015+
1016+
Negative values are invalid.
1017+
1018+
This value applies to any font that is selected
1019+
but in typical usage it should be based on the <a>aspect value</a>
1020+
of the first font in the font-family list.
1021+
If this is specified accurately,
1022+
the <code>(a/a')</code> term in the formula above
1023+
is effectively 1 for the first font
1024+
and no adjustment occurs.
1025+
If the value is specified inaccurately,
1026+
text rendered using the first font in the family list
1027+
will display differently in older user agents
1028+
that don't support 'font-size-adjust'.
1029+
</dl>
1030+
1031+
The value of 'font-size-adjust' affects the used value of 'font-size'
1032+
but does not affect the computed value.
1033+
It affects the size of relative units
1034+
that are based on font metrics of the <a>first available font</a>
1035+
such as <code>ex</code> and <code>ch</code>
1036+
but does not affect the size of <code>em</code> units.
1037+
Since numeric values of 'line-height'
1038+
refer to the computed size of 'font-size',
1039+
'font-size-adjust' does not affect the used value of 'line-height'.
1040+
1041+
Note: In CSS, authors often specify 'line-height'
1042+
as a multiple of the 'font-size'.
1043+
Since the 'font-size-adjust' property affects the used value of 'font-size',
1044+
authors should take care setting the line height
1045+
when 'font-size-adjust' is used.
1046+
Setting the line height too tightly can result in
1047+
overlapping lines of text in this situation.
1048+
1049+
Issue(2859): replace with an example of actually using font-size-adjust
1050+
rather than how to measure it
9941051

995-
where:
1052+
<div class="example">
1053+
Authors can calculate the <a>aspect value</a> for a given font
1054+
by comparing spans with the same content
1055+
but different 'font-size-adjust' properties.
1056+
If the same font-size is used, the spans will match
1057+
when the 'font-size-adjust' value is accurate for the given font.
1058+
1059+
Two spans with borders are used to determine the <a>aspect value</a> of a font.
1060+
The 'font-size' is the same for both spans
1061+
but the 'font-size-adjust' property is specified only for the right span.
1062+
Starting with a value of 0.5,
1063+
the aspect value can be adjusted
1064+
until the borders around the two letters line up.
9961065

9971066
<pre>
998-
s = font-size value
999-
a = <a>aspect value</a> as specified by the 'font-size-adjust' property
1000-
a' = <a>aspect value</a> of actual font
1001-
c = adjusted font-size to use
1002-
</pre>
1003-
1004-
Negative values are invalid.
1005-
1006-
This value applies to any font that is selected but in typical usage it should be based
1007-
on the <a>aspect value</a> of the first font in the font-family list. If this is specified accurately,
1008-
the <code>(a/a')</code> term in the formula above is effectively 1 for the first font and no adjustment occurs.
1009-
If the value is specified inaccurately, text rendered using the first font in the family
1010-
list will display differently in older user agents that don't support 'font-size-adjust'.
1011-
</dl>
1012-
1013-
The value of 'font-size-adjust' affects the used value of 'font-size' but
1014-
does not affect the computed value. It affects the size of relative units
1015-
that are based on font metrics of the <a>first available font</a> such
1016-
as <code>ex</code> and <code>ch</code> but does not affect the size of
1017-
<code>em</code> units. Since numeric values of
1018-
'line-height'
1019-
refer to the computed size of 'font-size', 'font-size-adjust' does not affect the used value of
1020-
'line-height'.
1021-
1022-
Note: In CSS, authors often specify
1023-
'line-height'
1024-
as a multiple of the 'font-size'. Since the 'font-size-adjust'
1025-
property affects the used value of 'font-size', authors should take
1026-
care setting the line height when 'font-size-adjust' is used. Setting
1027-
the line height too tightly can result in overlapping lines of text
1028-
in this situation.
1029-
1030-
Authors can calculate the
1031-
<a>aspect value</a> for a given font by comparing spans with the same content but
1032-
different 'font-size-adjust' properties. If the same font-size is used, the spans will match when the 'font-size-adjust'
1033-
value is accurate for the given font.
1034-
1035-
<div class="example">
1036-
Two spans with borders are used to determine the <a>aspect value</a> of a font. The 'font-size' is the same for both spans but the
1037-
'font-size-adjust' property is specified only for the right span. Starting with a value of 0.5, the aspect
1038-
value can be adjusted until the borders around the two letters line up.
1039-
1040-
<pre>
1041-
p {
1042-
font-family: Futura;
1043-
font-size: 500px;
1044-
}
1067+
p {
1068+
font-family: Futura;
1069+
font-size: 500px;
1070+
}
10451071

1046-
span {
1047-
border: solid 1px red;
1048-
}
1072+
span {
1073+
border: solid 1px red;
1074+
}
10491075

1050-
.adjust {
1051-
font-size-adjust: 0.5;
1052-
}
1076+
.adjust {
1077+
font-size-adjust: 0.5;
1078+
}
10531079

1054-
&lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
1055-
</pre>
1080+
&lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
1081+
</pre>
10561082

1057-
<figure>
1058-
<img alt="Futura with an aspect value of 0.5" src="images/beforefontsizeadjust.png" >
1059-
<figcaption>Futura with an <a>aspect value</a> of 0.5</figcaption>
1060-
</figure>
1083+
<figure>
1084+
<img alt="Futura with an aspect value of 0.5" src="images/beforefontsizeadjust.png" >
1085+
<figcaption>Futura with an <a>aspect value</a> of 0.5</figcaption>
1086+
</figure>
10611087

1062-
The box on the right is a bit bigger than the one on the left, so the <a>aspect value</a> of this font is something less than 0.5.
1063-
Adjust the value until the boxes align.
1064-
</div>
1088+
The box on the right is a bit bigger than the one on the left, so the <a>aspect value</a> of this font is something less than 0.5.
1089+
Adjust the value until the boxes align.
1090+
</div>
10651091

10661092
<h3 id="font-prop">
10671093
Shorthand font property: the 'font' property</h3>

0 commit comments

Comments
 (0)