Skip to content

Commit 1919304

Browse files
litherumlitherum
committed
[css-fonts-4] Clean up font-size, font-min-size, and font-max-size
r=fantasai
1 parent f09dcb5 commit 1919304

File tree

1 file changed

+180
-154
lines changed

1 file changed

+180
-154
lines changed

‎css-fonts-4/Overview.bs‎

Lines changed: 180 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -706,186 +706,212 @@ Font style: the 'font-style!!property' property</h3>
706706
<h3 id="font-size-prop">
707707
Font size: the 'font-size' property</h3>
708708

709-
<pre class="propdef">
710-
Name: font-size
711-
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>>
712-
Initial: medium
713-
Applies to: all elements
714-
Inherited: yes
715-
Percentages: refer to parent element's font size
716-
Computed value: absolute length
717-
Media: visual
718-
Animatable: As <<length>>
719-
</pre>
709+
<pre class="propdef">
710+
Name: font-size
711+
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>>
712+
Initial: medium
713+
Applies to: all elements
714+
Inherited: yes
715+
Percentages: refer to parent element's font size
716+
Computed value: an absolute length, as clamped by 'font-min-size' and 'font-max-size'
717+
Media: visual
718+
Animatable: As <<length>>
719+
</pre>
720720

721-
This property indicates the desired height of glyphs from the
722-
font. For scalable fonts, the font-size is a scale factor applied to the EM unit
723-
of the font. (Note that certain glyphs might bleed outside their EM box.) For
724-
non-scalable fonts, the font-size is converted into absolute units and matched
725-
against the declared font-size of the font, using the same absolute coordinate
726-
space for both of the matched values.
727-
Values have the following meanings:
721+
This property indicates the desired height of glyphs from the font.
722+
For scalable fonts, the font-size is a scale factor applied to the EM unit of the font.
723+
For non-scalable fonts, the font-size is converted into absolute units
724+
and matched against the declared font-size of the font,
725+
using the same absolute coordinate space for both of the matched values.
728726

729-
<dl dfn-for=font-size dfn-type=value>
730-
<dt><dfn><<absolute-size>></dfn>
731-
<dd>
732-
An <<absolute-size>> keyword refers to an entry
733-
in a table of font sizes computed and kept by the user agent. Possible values
734-
are:
727+
Note: There is no requirement on how closely a glyph should fit its EM box.
728+
Individual fonts can have a different apparent visual size
729+
when rendered at the same 'font-size'.
730+
Additionally, glyphs might render arbitrarily far outside their EM box;
731+
and if they overflow their <a>containing block</a>
732+
can induce <a>ink overflow</a>.
735733

736-
<pre class=prod>[ xx-small | x-small | small | medium | large | x-large | xx-large ]</pre>
734+
Values have the following meanings:
737735

738-
<dt><dfn><<relative-size>></dfn>
739-
<dd>
740-
A <<relative-size>> keyword is interpreted
741-
relative to the computed 'font-size' of the
742-
parent element and possibly the table of font sizes. Possible values are:
736+
<dl dfn-for=font-size dfn-type=value>
737+
<dt><dfn><<absolute-size>></dfn>
738+
<dd>
739+
An <<absolute-size>> keyword refers to an entry in a table of font sizes
740+
computed and kept by the user agent.
741+
See [[#absolute-size-mapping]].
743742

744-
<pre class=prod>[ larger | smaller ]</pre>
743+
Possible values are:
745744

746-
If the parent element has a keyword font size in the previous table, ''larger''
747-
may make the font size equal to the next entry in the
748-
table, and ''smaller'' may make the font size of the current element equal to the previous entry in the table.
745+
<pre class=prod>[ xx-small | x-small | small | medium | large | x-large | xx-large ]</pre>
749746

750-
For example, if the parent element has a font size of ''medium'', a value of ''larger'' may make the font size of the current element be ''large''.
747+
<dt><dfn><<relative-size>></dfn>
748+
<dd>
749+
A <<relative-size>> keyword is interpreted
750+
relative to the computed 'font-size' of the parent element
751+
and possibly the table of font sizes. Possible values are:
752+
753+
<pre class=prod>[ larger | smaller ]</pre>
754+
755+
If the parent element has a keyword font size in the absolute size keyword mapping table,
756+
''larger'' may compute the font size to the next entry in the table,
757+
and ''smaller'' may compute the font size to the previous entry in the table.
758+
For example, if the parent element has a font size of ''medium'',
759+
specifying a value of ''larger'' may make the font size of the child element ''large''.
760+
761+
Instead of using next and previous items in the previous keyword table,
762+
User Agents may instead use a simple ratio
763+
to increase or decrease the font size
764+
relative to the parent element.
765+
The specific ratio is unspecified,
766+
but should be around 1.2&ndash;1.5.
767+
This ratio may vary across different elements.
768+
769+
Note: A sight-impared user may request a User Agent use a higher ratio than default,
770+
in order to aid readability.
771+
In addition, a User Agent may choose to use different ratios
772+
when it detects paragraph text as opposed to title text.
773+
774+
<dt><dfn><<length-percentage>></dfn>
775+
<dd>
776+
A length value specifies an absolute font size
777+
(independent of the user agent's font table).
778+
Negative lengths are invalid.
751779

752-
Instead of using next and previous items in the previous keyword table,
753-
User Agents may instead use a simple ratio to increase or decrease the
754-
font size relative to the parent element. The specific ratio is unspecified,
755-
but should be around 1.2 - 1.5. This ratio may vary across different elements.
780+
A percentage value specifies an absolute font size relative
781+
to the parent element's computed 'font-size'.
782+
Negative percentages are invalid.
756783

757-
Note: A sight-impared user may request a User Agent use a higher ratio than default, in order to aid readability. In addition, a User Agent may choose to use different ratios when it detects paragraph text as opposed to title text.
784+
Note: Use of percentage values or values in <a>font-relative units<a> such as ''em''s and ''rem''s
785+
leads to more robust and cascadable style sheets.
786+
</dl>
758787
759-
<dt><dfn><<length-percentage>></dfn>
760-
<dd>
761-
A length value specifies an absolute font size
762-
(independent of the user agent's font table).
763-
Negative lengths are invalid.
764-
765-
A percentage value specifies an absolute font size relative
766-
to the parent element's font size. Use of percentage values, or
767-
values in ''em''s, leads to more robust and cascadable style sheets.
768-
Negative percentages are invalid.
769-
</dl>
788+
<div class="example">
789+
The following style sheet demonstrates
790+
various ways of specifying the font size.
770791
771-
The following table provides user agent guidelines for the
772-
absolute-size scaling factor and their mapping to HTML heading and
773-
absolute font-sizes. The ''medium'' value is used as the reference
774-
middle value. The user agent may fine-tune these values for different
775-
fonts or different types of display devices.
792+
<pre>
793+
p { font-size: 12pt; }
794+
blockquote { font-size: larger }
795+
em { font-size: 150% }
796+
em { font-size: 1.5em }
797+
</pre>
798+
</div>
776799
777-
<table class="data">
778-
<thead>
779-
<th>CSS absolute-size values
780-
<th>xx-small
781-
<th>x-small
782-
<th>small
783-
<th>medium
784-
<th>large
785-
<th>x-large
786-
<th>xx-large
787-
<th>&nbsp;
788-
<tbody>
789-
<tr>
790-
<th>scaling factor
791-
<td>3/5
792-
<td>3/4
793-
<td>8/9
794-
<td>1
795-
<td>6/5
796-
<td>3/2
797-
<td>2/1
798-
<td>3/1
799-
<tr>
800-
<th>HTML headings
801-
<td>h6
802-
<td>&nbsp;
803-
<td>h5
804-
<td>h4
805-
<td>h3
806-
<td>h2
807-
<td>h1
808-
<td>&nbsp;
809-
<tr>
810-
<th>HTML font sizes
811-
<td>1
812-
<td>&nbsp;
813-
<td>2
814-
<td>3
815-
<td>4
816-
<td>5
817-
<td>6
818-
<td>7
819-
</table>
800+
Note: The computed value of this property is clamped by
801+
the computed values of 'font-min-size' and 'font-max-size'.
802+
Furthermore,
803+
the used value of this property can differ from its computed value
804+
due to 'font-size-adjust'.
805+
However, child elements inherit the computed 'font-size' value,
806+
which is not affected by 'font-size-adjust'
807+
(otherwise, the effect of 'font-size-adjust' would compound).
820808
821-
Note: To preserve readability, an UA applying
822-
these guidelines should nevertheless avoid creating font-size resulting
823-
in less than 9 device pixels per EM unit on a computer display.
809+
The actual value of this property can differ from the used value
810+
due to the unavailability of certain font sizes.
824811
825-
Note: In CSS1, the suggested
826-
scaling factor between adjacent indexes was 1.5 which user experience
827-
proved to be too large. In CSS2, the suggested scaling factor for computer
828-
screen between adjacent indexes was 1.2 which still created issues for the small
829-
sizes. The new scaling factor varies between each index to provide a better
830-
readability.
812+
<h4 id="absolute-size-mapping">
813+
Absolute Size Keyword Mapping Table</h4>
831814
832-
The actual value of this property might differ from the computed
833-
value due a numerical value on 'font-size-adjust' and the
834-
unavailability of certain font sizes.
815+
The following table provides user agent guidelines for the absolute-size scaling factor
816+
and their mapping to HTML heading and absolute font-sizes.
817+
The ''font-size/medium'' value is used as the reference middle value.
818+
The user agent may fine-tune these values for different fonts or different types of display devices.
835819
836-
The computed value of this property is affected by the computed value of 'font-min-size'
837-
and 'font-max-size'.
820+
<table class="data">
821+
<thead>
822+
<th>CSS absolute-size values
823+
<th>xx-small
824+
<th>x-small
825+
<th>small
826+
<th>medium
827+
<th>large
828+
<th>x-large
829+
<th>xx-large
830+
<th>&nbsp;
831+
<tbody>
832+
<tr>
833+
<th>scaling factor
834+
<td>3/5
835+
<td>3/4
836+
<td>8/9
837+
<td>1
838+
<td>6/5
839+
<td>3/2
840+
<td>2/1
841+
<td>3/1
842+
<tr>
843+
<th>HTML headings
844+
<td>h6
845+
<td>&nbsp;
846+
<td>h5
847+
<td>h4
848+
<td>h3
849+
<td>h2
850+
<td>h1
851+
<td>&nbsp;
852+
<tr>
853+
<th>HTML <{font}> sizes
854+
<td>1
855+
<td>&nbsp;
856+
<td>2
857+
<td>3
858+
<td>4
859+
<td>5
860+
<td>6
861+
<td>7
862+
</table>
838863
839-
Child elements inherit the computed 'font-size' value (otherwise, the
840-
effect of 'font-size-adjust' would compound).
864+
Note: In CSS1, the suggested scaling factor between adjacent indexes was 1.5,
865+
which user experience proved to be too large.
866+
In CSS2, the suggested scaling factor for computer screen between adjacent indexes was 1.2
867+
which still created issues for the small sizes.
868+
The new scaling factor varies between each index to provide a better readability.
841869
842-
<div class="example">
843-
<pre>
844-
p { font-size: 12pt; }
845-
blockquote { font-size: larger }
846-
em { font-size: 150% }
847-
em { font-size: 1.5em }
848-
</pre>
849-
</div>
870+
To preserve readability, an UA applying these guidelines
871+
should nevertheless avoid creating font sizes
872+
of less than 9 device pixels per EM unit.
850873
851874
<h3 id="font-min-max-size-prop">Minimum and maximum font size: the 'font-min-size' and 'font-max-size' properties</h3>
852875
853-
<pre class="propdef">
854-
Name: font-min-size
855-
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>>
856-
Initial: 0
857-
Applies to: all elements
858-
Inherited: yes
859-
Percentages: refer to parent element's font size
860-
Computed value: absolute length
861-
Media: visual
862-
Animatable: As <<length>>
863-
</pre>
864-
865-
<pre class="propdef">
866-
Name: font-max-size
867-
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>> | infinity
868-
Initial: infinity
869-
Applies to: all elements
870-
Inherited: yes
871-
Percentages: refer to parent element's font size
872-
Computed value: absolute length
873-
Media: visual
874-
Animatable: As <<length>>
875-
</pre>
876+
<pre class="propdef">
877+
Name: font-min-size
878+
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>>
879+
Initial: 0
880+
Applies to: all elements
881+
Inherited: yes
882+
Percentages: refer to parent element's font size
883+
Computed value: absolute length
884+
Media: visual
885+
Animatable: As <<length>>
886+
</pre>
876887
877-
These two properties allow a website or user to require an element's font size to be clamped within the range
878-
supplied with these two properties. If the computed value 'font-size' is outside the bounds created by 'font-min-size'
879-
and 'font-max-size', the use value of 'font-size' is clamped to the values specified in these two properties.
888+
<pre class="propdef">
889+
Name: font-max-size
890+
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>> | infinity
891+
Initial: infinity
892+
Applies to: all elements
893+
Inherited: yes
894+
Percentages: refer to parent element's font size
895+
Computed value: absolute length
896+
Media: visual
897+
Animatable: As <<length>>
898+
</pre>
880899
881-
Some user agents provide a nonstandard mapping between the computed value of 'font-size' and the used value of 'font-size'.
882-
The interaction of those nonstandard algorithms with 'font-min-size' or 'font-max-size' is explicitly undefined.
900+
These two properties allow an author or user to require that an element's font size be clamped
901+
within the specified range.
902+
If the specified value 'font-size' is outside the bounds created by
903+
the used 'font-min-size' and 'font-max-size',
904+
the computed value of 'font-size' is clamped to the values specified in these two properties.
883905
884-
If the 'font-min-size' property is computed to be larger than the 'font-max-size' property, then the 'font-max-size' property is not used for the purposes of text rendering or rasterization. However, the computed value of 'font-max-size' is not affected.
906+
If the computed 'font-min-size' is larger than the computed 'font-max-size',
907+
then the used 'font-max-size' is increased to match the 'font-min-size'.
885908
886-
Users with accessibility preferences can set this in a <a>user style sheet</a> to force websites' text to become larger or smaller.
909+
Some user agents provide a non-standard mapping between the computed value of 'font-size' and the used value of 'font-size'.
910+
The interaction of those nonstandard algorithms with 'font-min-size' or 'font-max-size' is explicitly undefined.
887911
888-
The computed value of these two properties affects the computed value of 'font-size'.
912+
Note: Users with accessibility preferences can set these properties
913+
as ''!important'' rules in a <a>user style sheet</a>
914+
to force websites‘ text to become larger or smaller.
889915

890916
<h3 id="font-size-adjust-prop">
891917
Relative sizing: the 'font-size-adjust' property</h3>

0 commit comments

Comments
 (0)