diff --git a/files/en-us/web/css/guides/fonts/index.md b/files/en-us/web/css/guides/fonts/index.md index d377bdb6cf773c4..9a493c10768c578 100644 --- a/files/en-us/web/css/guides/fonts/index.md +++ b/files/en-us/web/css/guides/fonts/index.md @@ -28,7 +28,7 @@ The CSS fonts module also supports variable fonts. Unlike regular fonts, where e - {{cssxref("font-palette")}} - {{cssxref("font-size")}} - {{cssxref("font-size-adjust")}} -- {{cssxref("font-stretch")}} +- {{cssxref("font-width")}} and its legacy alias {{cssxref("font-stretch")}} - {{cssxref("font-style")}} - {{cssxref("font-weight")}} @@ -48,8 +48,6 @@ The CSS fonts module also supports variable fonts. Unlike regular fonts, where e - {{cssxref("font-variant-position")}} - {{cssxref("font-variation-settings")}} -The specification also defines the `font-width` property, which is not yet supported by any browser. - ### At-rules and descriptors - At-rule: {{cssxref("@font-face")}} @@ -59,7 +57,7 @@ The specification also defines the `font-width` property, which is not yet suppo - {{cssxref("@font-face/font-display", "font-display")}} - {{cssxref("@font-face/font-family", "font-family")}} - {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}} - - {{cssxref("@font-face/font-stretch", "font-stretch")}} + - {{cssxref("@font-face/font-width", "font-width")}} and its legacy alias {{cssxref("@font-face/font-stretch", "font-stretch")}} - {{cssxref("@font-face/font-style", "font-style")}} - {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} - {{cssxref("@font-face/font-weight", "font-weight")}} @@ -68,7 +66,7 @@ The specification also defines the `font-width` property, which is not yet suppo - {{cssxref("@font-face/src", "src")}} - {{cssxref("@font-face/unicode-range", "unicode-range")}} -The CSS fonts module also defines the `font-language-override`, `font-named-instance`, `font-width`, `font-size`, `subscript-position-override`, `subscript-size-override`, `superscript-position-override`, and `superscript-size-override` descriptors. Currently, no browsers support these features. +The CSS fonts module also defines the `font-language-override`, `font-named-instance`, `font-size`, `subscript-position-override`, `subscript-size-override`, `superscript-position-override`, and `superscript-size-override` descriptors. Currently, no browsers support these features. - At-rule: {{cssxref("@font-feature-values")}} diff --git a/files/en-us/web/css/guides/fonts/variable_fonts/index.md b/files/en-us/web/css/guides/fonts/variable_fonts/index.md index 826bcb60752dee5..059d8afe750a9bb 100644 --- a/files/en-us/web/css/guides/fonts/variable_fonts/index.md +++ b/files/en-us/web/css/guides/fonts/variable_fonts/index.md @@ -167,7 +167,7 @@ font-stretch: 115%; font-variation-settings: "wdth" 115; ``` -Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font-width values. +Click "Play" in the code blocks below to edit the example in the MDN Playground. Edit the CSS code to play with font width values. ```html hidden live-sample___variable-fonts-width-example
diff --git a/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md b/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md index b4c7d1ba83a8a1e..fab3a804d5fa53b 100644 --- a/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md +++ b/files/en-us/web/css/reference/at-rules/@font-face/font-stretch/index.md @@ -7,11 +7,11 @@ sidebar: cssref --- > [!NOTE] -> The `font-stretch` descriptor was renamed to `font-width` in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-desc). To preserve compatibility, the specification retains `font-stretch` as an alias for the `font-width` descriptor. +> The `font-stretch` descriptor was renamed to {{cssxref("@font-face/font-width")}} in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-desc). To preserve compatibility, the specification retains `font-stretch` as a legacy alias for the `font-width` descriptor. The **`font-stretch`** [CSS](/en-US/docs/Web/CSS) descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the {{cssxref("@font-face")}} at-rule. -For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the `font-stretch` descriptor to explicitly specify the font face's stretch. The values for the CSS descriptor is same as that of its corresponding font property. +For a particular font family, authors can download various font faces corresponding to the different styles of the same font family, and then use the `font-stretch` descriptor to specify the font face's stretch explicitly. ## Syntax @@ -30,27 +30,27 @@ font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; -/* multiple values */ +/* Multiple values */ font-stretch: 75% 125%; font-stretch: condensed ultra-condensed; ``` -The `font-stretch` property is described using any one of the values listed below. +The `font-stretch` descriptor can take a single value from the list below. ### Values - `normal` - - : Specifies a normal font face. + - : Specifies a normally condensed font face. - `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` - - : Specifies a more condensed font face than normal, with ultra-condensed as the most condensed. + - : Specifies a more condensed font face than normal, with ultra-condensed being the most condensed. - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` - - : Specifies a more expanded font face than normal, with ultra-expanded as the most expanded. + - : Specifies a more expanded font face than normal, with ultra-expanded being the most expanded. - `` - - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this property. + - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this descriptor. -In earlier versions of the `font-stretch` specification, the property accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `` value as well. This enables variable fonts to offer something more like a continuum of character widths. For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying widths. +In earlier versions of the `font-stretch` specification, the descriptor accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `` value as well. This enables variable fonts to offer a continuous variation of character widths. For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying widths. -If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. +If the font does not provide a face that exactly matches the given value, then values less than `100%` map to a condensed face, and values greater than or equal to `100%` map to an expanded face. ### Keyword to numeric mapping @@ -105,13 +105,13 @@ The table below shows the mapping between keyword values and numeric percentages ### Variable fonts -Most fonts have a particular width which corresponds to one of the keyterm values. However some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight. For this, percentage ranges are useful. +Most fonts have a particular width that corresponds to one of the keyterm values. However, variable fonts can support a range of widths with fine granularity, giving the designer a greater degree of control over the chosen weight. For this, percentage ranges are useful. -For TrueType or OpenType variable fonts, the "wdth" variation is used to implement varying glyph widths. +For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying glyph widths. ## Accessibility -People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/Reference/Properties/color#accessibility). +People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low color contrast ratio](/en-US/docs/Web/CSS/Reference/Properties/color#accessibility). - [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) - [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) @@ -128,18 +128,48 @@ People with dyslexia and other cognitive conditions may have difficulty reading ### Setting a percentage range for font-stretch -The following find a local Open Sans font or import it, and allow using the font for normal, semi-condensed and semi-expanded states. +The following example uses the [League Mono](https://www.theleagueofmoveabletype.com/league-mono) font. It synthesizes different font families from the same font file using the `font-stretch` descriptor with different keywords and percentages. + +```html +

League Mono

+

League Mono

+

League Mono

+``` ```css @font-face { - font-family: "Open Sans"; - src: - local("Open Sans") format("woff2"), - url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); - font-stretch: 87.5% 112.5%; + font-family: "League Mono Ultra Condensed"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-stretch: ultra-condensed; /* same as 50% */ +} + +@font-face { + font-family: "League Mono Normal"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-stretch: 100%; /* same as normal */ +} + +@font-face { + font-family: "League Mono Ultra Expanded"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-stretch: ultra-expanded; /* same as 200% */ +} + +p:nth-child(1) { + font-family: "League Mono Ultra Condensed", sans-serif; +} + +p:nth-child(2) { + font-family: "League Mono Normal", sans-serif; +} + +p:nth-child(3) { + font-family: "League Mono Ultra Expanded", sans-serif; } ``` +{{EmbedLiveSample("Setting font stretch percentages", "100%", 200)}} + ## Specifications {{Specifications}} @@ -150,11 +180,12 @@ The following find a local Open Sans font or import it, and allow using the font ## See also -- {{cssxref("@font-face/font-display", "font-display")}} -- {{cssxref("@font-face/font-family", "font-family")}} -- {{cssxref("@font-face/font-weight", "font-weight")}} -- {{cssxref("@font-face/font-style", "font-style")}} -- {{cssxref("font-feature-settings", "font-feature-settings")}} -- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} -- {{cssxref("@font-face/src", "src")}} +- Modern {{cssxref("@font-face/font-width")}} descriptor, replacing `font-stretch` +- {{cssxref("@font-face/font-display")}} descriptor +- {{cssxref("@font-face/font-family")}} descriptor +- {{cssxref("@font-face/font-weight")}} descriptor +- {{cssxref("@font-face/font-style")}} descriptor +- {{cssxref("font-feature-settings")}} descriptor +- {{cssxref("@font-face/font-variation-settings")}} descriptor +- {{cssxref("@font-face/src")}} descriptor - {{cssxref("@font-face/unicode-range", "unicode-range")}} descriptor diff --git a/files/en-us/web/css/reference/at-rules/@font-face/font-width/index.md b/files/en-us/web/css/reference/at-rules/@font-face/font-width/index.md new file mode 100644 index 000000000000000..fd6d17e1e9c3735 --- /dev/null +++ b/files/en-us/web/css/reference/at-rules/@font-face/font-width/index.md @@ -0,0 +1,207 @@ +--- +title: font-width +slug: Web/CSS/Reference/At-rules/@font-face/font-width +page-type: css-at-rule-descriptor +browser-compat: css.at-rules.font-face.font-width +sidebar: cssref +--- + +> [!NOTE] +> The `font-width` descriptor is the modern replacement for the {{cssxref("@font-face/font-stretch")}} descriptor, which is a legacy alias. While `font-width` is the specification's preferred name, `font-stretch` currently has broader browser support. Check the [fallback example](#providing_a_font-stretch_fallback) and [browser compatibility](#browser_compatibility) table for details. + +The **`font-width`** [CSS](/en-US/docs/Web/CSS) descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the {{cssxref("@font-face")}} at-rule. + +For a particular font family, authors can download various font faces corresponding to the different styles of the same font family, and then use the `font-width` descriptor to specify the font face's width explicitly. The available `font-width` descriptor values are the same as those of the corresponding {{cssxref("font-width")}} property. + +## Syntax + +```css +/* Single values */ +font-width: ultra-condensed; +font-width: extra-condensed; +font-width: condensed; +font-width: semi-condensed; +font-width: normal; +font-width: semi-expanded; +font-width: expanded; +font-width: extra-expanded; +font-width: ultra-expanded; +font-width: 50%; +font-width: 100%; +font-width: 200%; + +/* Multiple values */ +font-width: 75% 125%; +font-width: condensed ultra-condensed; +``` + +The `font-width` descriptor can take a single value from the list below. + +### Values + +- `normal` + - : Specifies a normally condensed font face. +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : Specifies a more condensed font face than normal, with ultra-condensed being the most condensed. +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : Specifies a more expanded font face than normal, with ultra-expanded being the most expanded. +- `` + - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this descriptor. + +In earlier versions of the `font-width` specification, the descriptor accepts only the nine keyword values. CSS Fonts Level 4 extends the syntax to accept a `` value as well. This enables variable fonts to offer a continuous variation of character widths. For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying widths. + +If the font does not provide a face that exactly matches the given value, then values less than `100%` map to a condensed face, and values greater than or equal to `100%` map to an expanded face. + +### Keyword to numeric mapping + +The table below shows the mapping between keyword values and numeric percentages: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordPercentage
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
+ +### Variable fonts + +Most fonts have a particular width that corresponds to one of the keyterm values. However, variable fonts can support a range of widths with fine granularity, giving the designer a greater degree of control over the chosen weight. For this, percentage ranges are useful. + +For TrueType or OpenType variable fonts, the `wdth` variation is used to implement varying glyph widths. + +## Accessibility + +People with dyslexia and other cognitive conditions may have difficulty reading fonts that are too condensed, especially if the font has a [low color contrast ratio](/en-US/docs/Web/CSS/Reference/Properties/color#accessibility). + +- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{CSSSyntax("font-width")}} + +## Examples + +### Setting a percentage range for font-width + +The following example uses the [League Mono](https://www.theleagueofmoveabletype.com/league-mono) font. It synthesizes different font families from the same font file using the `font-width` descriptor with different keywords and percentages. + +```html +

League Mono

+

League Mono

+

League Mono

+``` + +```css +@font-face { + font-family: "League Mono Ultra Condensed"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-width: ultra-condensed; /* same as 50% */ +} + +@font-face { + font-family: "League Mono Normal"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-width: 100%; /* same as normal */ +} + +@font-face { + font-family: "League Mono Ultra Expanded"; + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-width: ultra-expanded; /* same as 200% */ +} + +p:nth-child(1) { + font-family: "League Mono Ultra Condensed", sans-serif; +} + +p:nth-child(2) { + font-family: "League Mono Normal", sans-serif; +} + +p:nth-child(3) { + font-family: "League Mono Ultra Expanded", sans-serif; +} +``` + +{{EmbedLiveSample("Setting font width percentages", "100%", 200)}} + +### Providing a font-stretch fallback + +Because `font-width` does not yet have broad browser support, you may want to include the legacy {{cssxref("@font-face/font-stretch")}} descriptor as a fallback. Place `font-stretch` before `font-width` so that supporting browsers use the modern descriptor: + +```css +@font-face { + font-family: "MyFont"; + src: url("myfont.woff2") format("woff2"); + font-stretch: condensed; /* for browsers that don't support font-width */ + font-width: condensed; +} +``` + +> [!NOTE] +> You can automate this fallback pattern using the [postcss-preset-env](https://preset-env.cssdb.org/) plugin for PostCSS, which includes the [postcss-font-width-property](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-font-width-property) transform to convert `font-width` declarations to `font-stretch` automatically. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- Legacy {{cssxref("@font-face/font-stretch")}} alias descriptor with better browser support +- {{cssxref("@font-face/font-display", "font-display")}} descriptor +- {{cssxref("@font-face/font-family", "font-family")}} descriptor +- {{cssxref("@font-face/font-weight", "font-weight")}} descriptor +- {{cssxref("@font-face/font-style", "font-style")}} descriptor +- {{cssxref("font-feature-settings", "font-feature-settings")}} property +- {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}} descriptor +- {{cssxref("@font-face/src", "src")}} descriptor +- {{cssxref("@font-face/unicode-range", "unicode-range")}} descriptor diff --git a/files/en-us/web/css/reference/properties/font-stretch/index.md b/files/en-us/web/css/reference/properties/font-stretch/index.md index 2fddbfccd64bf0c..ca39fdd6db870bc 100644 --- a/files/en-us/web/css/reference/properties/font-stretch/index.md +++ b/files/en-us/web/css/reference/properties/font-stretch/index.md @@ -7,7 +7,7 @@ sidebar: cssref --- > [!NOTE] -> The `font-stretch` property was renamed to `font-width` in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-prop). To preserve compatibility, the specification retains `font-stretch` as an alias for the `font-width` property. +> The `font-stretch` property was renamed to {{cssxref("font-width")}} in the [CSS Fonts specification](https://drafts.csswg.org/css-fonts/#font-stretch-prop). To preserve compatibility, the specification retains `font-stretch` as a legacy alias for the `font-width` property. The **`font-stretch`** [CSS](/en-US/docs/Web/CSS) property selects a normal, condensed, or expanded face from a font. @@ -55,7 +55,6 @@ font-stretch: 150%; font-family: "League"; font-style: normal; font-weight: normal; - font-stretch: 50% 200%; /* Required by Chrome - allow 50% to 200% */ } section { @@ -67,7 +66,7 @@ section { ## Syntax ```css -/* keyword values */ +/* Keyword values */ font-stretch: normal; font-stretch: ultra-condensed; font-stretch: extra-condensed; @@ -91,22 +90,22 @@ font-stretch: revert-layer; font-stretch: unset; ``` -This property may be specified as a single `` keyword value or a single {{cssxref("<percentage>")}} value. +This property may be specified as a single keyword or {{cssxref("<percentage>")}} value. ### Values - `normal` - - : Specifies a normal font face. + - : Specifies a normally condensed font face. - `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` - - : Specifies a more condensed font face than normal, with `ultra-condensed` as the most condensed. + - : Specifies a more condensed font face than normal, with `ultra-condensed` being the most condensed. - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` - - : Specifies a more expanded font face than normal, with `ultra-expanded` as the most expanded. + - : Specifies a more expanded font face than normal, with `ultra-expanded` being the most expanded. - `` - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this property. ### Keyword to numeric mapping -The table below shows the mapping between the `` keyword values and numeric percentages: +The table below shows the mapping between the keyword values and numeric percentages: | Keyword | Percentage | | ----------------- | ---------- | @@ -128,80 +127,88 @@ You can use `font-stretch` to select a condensed or expanded face from such font ### Font face selection -The face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. +The face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than `100%` map to a condensed face, and values greater than or equal to `100%` map to an expanded face. -The table below demonstrates the effect of supplying various different percentage values of `font-stretch` on two different fonts: +The table below demonstrates the effect of setting different percentage values of `font-stretch` on two different fonts: ```css hidden @font-face { font-family: "Inconsolata"; src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2") format("woff2"); - font-stretch: 50% 200%; } @font-face { font-family: "Anek Malayalam"; src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2") format("woff2"); - font-stretch: 75% 125%; +} + +body { + font-family: system-ui; +} + +table { + border-collapse: collapse; + width: 100%; +} + +tbody th { + text-align: right; +} + +th, +td { + padding: 0.25rem; + font-weight: normal; + text-align: center; } td { border: solid; border-width: 1px; + font-size: 5rem; } -#inconsolata td { - font: - 90px "Inconsolata", - sans-serif; +.inconsolata { + font-family: "Inconsolata", sans-serif; } -#anek-malayalam td { - font: - 90px "Anek Malayalam", - sans-serif; + +.anek-malayalam { + font-family: "Anek Malayalam", sans-serif; } -#inconsolata td:nth-child(2), -#anek-malayalam td:nth-child(2) { + +td:nth-child(2) { font-stretch: 50%; } -#inconsolata td:nth-child(3), -#anek-malayalam td:nth-child(3) { +td:nth-child(3) { font-stretch: 62.5%; } -#inconsolata td:nth-child(4), -#anek-malayalam td:nth-child(4) { +td:nth-child(4) { font-stretch: 75%; } -#inconsolata td:nth-child(5), -#anek-malayalam td:nth-child(5) { +td:nth-child(5) { font-stretch: 87.5%; } -#inconsolata td:nth-child(6), -#anek-malayalam td:nth-child(6) { +td:nth-child(6) { font-stretch: 100%; } -#inconsolata td:nth-child(7), -#anek-malayalam td:nth-child(7) { +td:nth-child(7) { font-stretch: 112.5%; } -#inconsolata td:nth-child(8), -#anek-malayalam td:nth-child(8) { +td:nth-child(8) { font-stretch: 125%; } -#inconsolata td:nth-child(9), -#anek-malayalam td:nth-child(9) { +td:nth-child(9) { font-stretch: 150%; } -#inconsolata td:nth-child(10), -#anek-malayalam td:nth-child(10) { +td:nth-child(10) { font-stretch: 200%; } ``` ```html hidden - +
@@ -217,7 +224,7 @@ td { - + @@ -229,7 +236,7 @@ td { - + @@ -245,10 +252,10 @@ td {
Inconsolata e ee e
Anek Malayalam e e
``` -{{EmbedLiveSample('Font_face_selection', "100%", "300px")}} +{{EmbedLiveSample('Font face selection', "100%", "250px")}} -- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font. - [Inconsolata](https://fonts.google.com/specimen/Inconsolata) is a variable font that offers a continuous range of widths from 50% to 200%. +- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font. ## Formal definition @@ -256,7 +263,7 @@ td { ## Formal syntax -{{csssyntax("font-width")}} +{{csssyntax("font-stretch")}} ## Examples @@ -270,10 +277,9 @@ td { ```css @font-face { - src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf"); + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); font-family: "LeagueMonoVariable"; font-style: normal; - font-stretch: 1% 500%; /* Required by Chrome */ } p { @@ -307,8 +313,10 @@ p { ## See also -- {{cssxref("font-style")}} -- {{cssxref("font-weight")}} +- {{cssxref("@font-face/font-stretch")}} descriptor for {{cssxref("@font-face")}} +- Modern {{cssxref("font-width")}} property, replacing `font-stretch` +- {{cssxref("font-style")}} property +- {{cssxref("font-weight")}} property - SVG {{SVGAttr("font-stretch")}} attribute - [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals) - [CSS fonts](/en-US/docs/Web/CSS/Guides/Fonts) module diff --git a/files/en-us/web/css/reference/properties/font-width/font-face-selection.png b/files/en-us/web/css/reference/properties/font-width/font-face-selection.png new file mode 100644 index 000000000000000..09ece9ed960385a Binary files /dev/null and b/files/en-us/web/css/reference/properties/font-width/font-face-selection.png differ diff --git a/files/en-us/web/css/reference/properties/font-width/index.md b/files/en-us/web/css/reference/properties/font-width/index.md new file mode 100644 index 000000000000000..420b28038c9735c --- /dev/null +++ b/files/en-us/web/css/reference/properties/font-width/index.md @@ -0,0 +1,340 @@ +--- +title: font-width +slug: Web/CSS/Reference/Properties/font-width +page-type: css-property +browser-compat: css.properties.font-width +sidebar: cssref +--- + +> [!NOTE] +> The `font-width` property is the modern replacement for {{cssxref("font-stretch")}}, which is a legacy alias. While `font-width` is the specification's preferred name, `font-stretch` currently has broader browser support. Check the [fallback example](#providing_a_font-stretch_fallback) and [browser compatibility](#browser_compatibility) table for details. + +The **`font-width`** [CSS](/en-US/docs/Web/CSS) property selects a normal, condensed, or expanded face from a font. + +{{InteractiveExample("CSS Demo: font-width")}} + +```css interactive-example-choice +font-width: condensed; +``` + +```css interactive-example-choice +font-width: expanded; +``` + +```css interactive-example-choice +font-width: ultra-expanded; +``` + +```css interactive-example-choice +font-width: 50%; +``` + +```css interactive-example-choice +font-width: 100%; +``` + +```css interactive-example-choice +font-width: 150%; +``` + +```html interactive-example +
+

+ London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the streets + as if the waters had but newly retired from the face of the earth, and it + would not be wonderful to meet a Megalosaurus, forty feet long or so, + waddling like an elephantine lizard up Holborn Hill. +

+
+``` + +```css interactive-example +@font-face { + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-family: "League"; + font-style: normal; + font-weight: normal; +} + +section { + font-size: 1.2em; + font-family: "League", sans-serif; +} +``` + +## Syntax + +```css +/* Keyword values */ +font-width: normal; +font-width: ultra-condensed; +font-width: extra-condensed; +font-width: condensed; +font-width: semi-condensed; +font-width: semi-expanded; +font-width: expanded; +font-width: extra-expanded; +font-width: ultra-expanded; + +/* Percentage values */ +font-width: 50%; +font-width: 100%; +font-width: 200%; + +/* Global values */ +font-width: inherit; +font-width: initial; +font-width: revert; +font-width: revert-layer; +font-width: unset; +``` + +This property may be specified as a single keyword or {{cssxref("<percentage>")}} value. + +### Values + +- `normal` + - : Specifies a normally condensed font face. +- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed` + - : Specifies a more condensed font face than normal, with `ultra-condensed` being the most condensed. +- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded` + - : Specifies a more expanded font face than normal, with `ultra-expanded` being the most expanded. +- `` + - : A {{cssxref("<percentage>")}} value between 50% and 200% (inclusive). Negative values are not allowed for this property. + +### Keyword to numeric mapping + +The table below shows the mapping between the keyword values and numeric percentages: + +| Keyword | Percentage | +| ----------------- | ---------- | +| `ultra-condensed` | 50% | +| `extra-condensed` | 62.5% | +| `condensed` | 75% | +| `semi-condensed` | 87.5% | +| `normal` | 100% | +| `semi-expanded` | 112.5% | +| `expanded` | 125% | +| `extra-expanded` | 150% | +| `ultra-expanded` | 200% | + +## Description + +Some font families offer additional faces in which the characters are narrower than the normal face (_condensed_ faces) or wider than the normal face (_expanded_ faces). + +You can use `font-width` to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect. + +### Font face selection + +The face selected for a given value of `font-width` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a condensed face, and values greater than or equal to 100% map to an expanded face. + +The table below demonstrates the effect of setting different percentage values of `font-width` on two different fonts: + +```css hidden +@font-face { + font-family: "Inconsolata"; + src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2") + format("woff2"); +} + +@font-face { + font-family: "Anek Malayalam"; + src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2") + format("woff2"); +} + +body { + font-family: system-ui; +} + +table { + border-collapse: collapse; + width: 100%; +} + +tbody th { + text-align: right; +} + +th, +td { + padding: 0.25rem; + font-weight: normal; + text-align: center; +} + +td { + border: solid; + border-width: 1px; + font-size: 5rem; +} + +.inconsolata { + font-family: "Inconsolata", sans-serif; +} + +.anek-malayalam { + font-family: "Anek Malayalam", sans-serif; +} + +td:nth-child(2) { + font-width: 50%; +} +td:nth-child(3) { + font-width: 62.5%; +} +td:nth-child(4) { + font-width: 75%; +} +td:nth-child(5) { + font-width: 87.5%; +} +td:nth-child(6) { + font-width: 100%; +} +td:nth-child(7) { + font-width: 112.5%; +} +td:nth-child(8) { + font-width: 125%; +} +td:nth-child(9) { + font-width: 150%; +} +td:nth-child(10) { + font-width: 200%; +} +``` + +```html hidden + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
50%62.5%75%87.5%100%112.5%125%150%200%
Inconsolataeeeeeeeee
Anek Malayalameeeeeeeee
+``` + +{{EmbedLiveSample('Font face selection', "100%", "250px")}} + +The following screenshot shows how the above table is rendered, in case your browser doesn't support the `font-width` property: + +![A two-row comparison table showing the lowercase letter e rendered at different widths (50%, 62.5%, 75%, 87.5%, 100%, 112.5%, 125%, 150%, 200%). The top row is labeled Inconsolata and the bottom row Anek Malayalam. Both fonts are sans-serif and Inconsolata's letters are slightly wider compared to Anek Malayalam's.](font-face-selection.png) + +- [Inconsolata](https://fonts.google.com/specimen/Inconsolata) is a variable font that offers a continuous range of widths from 50% to 200%. +- [Anek Malayalam](https://fonts.google.com/specimen/Anek+Malayalam) is a variable google font that supports widths from 75% to 125%. Values below and above this range select the closest matching font. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax("font-width")}} + +## Examples + +### Setting font width percentages + +```html +

an elephantine lizard

+

an elephantine lizard

+

an elephantine lizard

+``` + +```css +@font-face { + src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype"); + font-family: "LeagueMonoVariable"; + font-style: normal; +} + +p { + font: + 1.5rem "LeagueMonoVariable", + sans-serif; +} + +.condensed { + font-width: 50%; +} + +.normal { + font-width: 100%; +} + +.expanded { + font-width: 200%; +} +``` + +{{EmbedLiveSample("Setting font width percentages", "100%", 200)}} + +### Providing a font-stretch fallback + +Because `font-width` does not yet have broad browser support, you may want to include the legacy {{cssxref("font-stretch")}} property as a fallback. Place `font-stretch` before `font-width` so that supporting browsers use the modern property: + +```css +p { + font-stretch: condensed; /* for browsers that don't support font-width */ + font-width: condensed; +} +``` + +> [!NOTE] +> You can automate this fallback pattern using the [postcss-preset-env](https://preset-env.cssdb.org/) plugin for PostCSS, which includes the [postcss-font-width-property](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-font-width-property) transform to convert `font-width` properties to `font-stretch` automatically. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("@font-face/font-width")}} descriptor for {{cssxref("@font-face")}} +- Legacy {{cssxref("font-stretch")}} alias property with better browser support +- {{cssxref("font-style")}} property +- {{cssxref("font-weight")}} property +- SVG {{SVGAttr("font-stretch")}} attribute +- [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals) +- [CSS fonts](/en-US/docs/Web/CSS/Guides/Fonts) module diff --git a/files/en-us/web/webdriver/reference/classic/commands/back/index.md b/files/en-us/web/webdriver/reference/classic/commands/back/index.md new file mode 100644 index 000000000000000..d0bbdece80964f3 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/back/index.md @@ -0,0 +1,66 @@ +--- +title: Back +short-title: Back +slug: Web/WebDriver/Reference/Classic/Commands/Back +page-type: webdriver-command +browser-compat: webdriver.classic.Back +sidebar: webdriver +--- + +The _Back_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API navigates to the previous page in the browsing history. This is equivalent to clicking the browser's back button or calling {{domxref("History.back()")}} in JavaScript. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ---------------------------- | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session/{session id}/back` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +`null` if successful. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. +- Timeout + - : The navigation did not complete before its timeout expired. + +## Examples + +### Navigating back in browsing history + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to at least two pages. To navigate back to the previous page, use the `back` command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i -H "Content-Type: application/json" -d '{}' http://localhost:4444/session/ID/back +``` + +The server responds with a null value to indicate success: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":null} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Forward command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Forward) +- [Refresh command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Refresh) diff --git a/files/en-us/web/webdriver/reference/classic/commands/forward/index.md b/files/en-us/web/webdriver/reference/classic/commands/forward/index.md new file mode 100644 index 000000000000000..94d1260474a8a52 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/forward/index.md @@ -0,0 +1,66 @@ +--- +title: Forward +short-title: Forward +slug: Web/WebDriver/Reference/Classic/Commands/Forward +page-type: webdriver-command +browser-compat: webdriver.classic.Forward +sidebar: webdriver +--- + +The _Forward_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API navigates to the next page in the browsing history. This is equivalent to clicking the browser's forward button or calling {{domxref("History.forward()")}} in JavaScript. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ------------------------------- | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session/{session id}/forward` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +`null` if successful. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. +- Timeout + - : The navigation did not complete before its timeout expired. + +## Examples + +### Navigating forward in browsing history + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to at least two pages and gone back. To navigate forward to the next page, use the `forward` command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i -H "Content-Type: application/json" -d '{}' http://localhost:4444/session/ID/forward +``` + +The server responds with a null value to indicate success: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":null} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Back command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Back) +- [Refresh command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Refresh) diff --git a/files/en-us/web/webdriver/reference/classic/commands/gettitle/index.md b/files/en-us/web/webdriver/reference/classic/commands/gettitle/index.md new file mode 100644 index 000000000000000..9533bab555cb3e0 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/gettitle/index.md @@ -0,0 +1,59 @@ +--- +title: Get Title +short-title: Get Title +slug: Web/WebDriver/Reference/Classic/Commands/GetTitle +page-type: webdriver-command +browser-compat: webdriver.classic.GetTitle +sidebar: webdriver +--- + +The _Get Title_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API returns the document title of the current top-level browsing context. This is equivalent to reading the {{domxref("Document.title")}} property in JavaScript. + +## Syntax + +| Method | URI template | +| --------------------------------------------------- | ----------------------------- | +| [`GET`](/en-US/docs/Web/HTTP/Reference/Methods/GET) | `/session/{session id}/title` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +A string containing the title of the current document, equivalent to the value of {{domxref("Document.title")}}. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. + +## Examples + +### Retrieving the page title + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to `https://example.org`. You can retrieve the document title by using the following command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i http://localhost:4444/session/ID/title +``` + +The server responds with the document title as shown here: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":"Example Domain"} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/webdriver/reference/classic/commands/newsession/index.md b/files/en-us/web/webdriver/reference/classic/commands/newsession/index.md new file mode 100644 index 000000000000000..871f76f94d90b0e --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/newsession/index.md @@ -0,0 +1,68 @@ +--- +title: New Session +short-title: New Session +slug: Web/WebDriver/Reference/Classic/Commands/NewSession +page-type: webdriver-command +browser-compat: webdriver.classic.NewSession +sidebar: webdriver +--- + +The _New Session_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API creates a new WebDriver session with the browser. +The session identifier returned in the response is required for all subsequent commands. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ------------ | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session` | + +### Payload + +- `capabilities` + - : Used to define the features the driver must satisfy when creating a new session. + See [Capabilities](/en-US/docs/Web/WebDriver/Reference/Classic/Capabilities#list_of_capabilities) for available options. + +### Response + +The response payload is a JSON object with: + +- `sessionId` + - : The unique identifier of the session. +- `capabilities` + - : The negotiated capabilities of the session. + +### Errors + +- Session not created + - : A new session could not be created. + +## Examples + +### Starting a new session + +With a WebDriver server running on `localhost:4444`, the following command starts a new WebDriver session requesting Firefox as the browser: + +```bash +curl -i -H "Content-Type: application/json" -d '{"capabilities": {"alwaysMatch": {"browserName": "firefox"}}}' http://localhost:4444/session +``` + +The output will look similar to the following, where `27c8437e-5e42-43f9-a26f-2db0fd509ec1` is the unique identifier of this session: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":{"sessionId":"27c8437e-5e42-43f9-a26f-2db0fd509ec1","capabilities":{"acceptInsecureCerts":false,"browserName":"firefox","browserVersion":"147.0.4","pageLoadStrategy":"normal","platformName":"mac","proxy":{},"setWindowRect":true,"strictFileInteractability":false,"timeouts":{"implicit":0,"pageLoad":300000,"script":30000}}}} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Capabilities](/en-US/docs/Web/WebDriver/Reference/Classic/Capabilities) diff --git a/files/en-us/web/webdriver/reference/classic/commands/refresh/index.md b/files/en-us/web/webdriver/reference/classic/commands/refresh/index.md new file mode 100644 index 000000000000000..885ace909857b65 --- /dev/null +++ b/files/en-us/web/webdriver/reference/classic/commands/refresh/index.md @@ -0,0 +1,66 @@ +--- +title: Refresh +short-title: Refresh +slug: Web/WebDriver/Reference/Classic/Commands/Refresh +page-type: webdriver-command +browser-compat: webdriver.classic.Refresh +sidebar: webdriver +--- + +The _Refresh_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of the [WebDriver](/en-US/docs/Web/WebDriver) API reloads the current page in the active browsing context. This is equivalent to clicking the browser's reload button or calling {{domxref("Location.reload()")}} in JavaScript. + +## Syntax + +| Method | URI template | +| ----------------------------------------------------- | ------------------------------- | +| [`POST`](/en-US/docs/Web/HTTP/Reference/Methods/POST) | `/session/{session id}/refresh` | + +### URL parameters + +- `session id` + - : Identifier of the session. + +### Return value + +`null` if successful. + +### Errors + +- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Classic/Errors/InvalidSessionID) + - : Session does not exist. +- No such window + - : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed. +- Unexpected alert open + - : A modal dialog was open, blocking this operation. + +## Examples + +### Reloading the current page + +With a WebDriver server running on `localhost:4444`, assume an active session has navigated to a page. To reload the current page, use the `refresh` command, replacing `ID` with the `sessionId` from the [New Session](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/NewSession) response: + +```bash +curl -i -H "Content-Type: application/json" -d '{}' http://localhost:4444/session/ID/refresh +``` + +The server responds with a null value to indicate success: + +```http +HTTP/1.1 200 OK +content-type: application/json; charset=utf-8 + +{"value":null} +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Back command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Back) +- [Forward command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands/Forward)