diff --git a/files/en-us/web/css/css_logical_properties_and_values/sizing/index.md b/files/en-us/web/css/css_logical_properties_and_values/sizing/index.md index 45ce47a048f1361..5f687871fc55c0b 100644 --- a/files/en-us/web/css/css_logical_properties_and_values/sizing/index.md +++ b/files/en-us/web/css/css_logical_properties_and_values/sizing/index.md @@ -8,7 +8,7 @@ page-type: guide In this guide we will explain the flow-relative mappings between physical dimension properties and logical properties used for sizing elements on our pages. -When specifying the size of an item, the [Logical Properties and Values](https://drafts.csswg.org/css-logical/) specification gives you the ability to indicate sizing as it relates to the flow of text (inline and block) rather than physical sizing which relates to the physical dimensions of horizontal and vertical (e.g. left and right). While these flow relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. You might want some features to always relate to the physical dimensions whatever the writing mode. +When specifying the size of an item, the [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module gives you the ability to indicate sizing as it relates to the flow of text (inline and block) rather than physical sizing which relates to the physical dimensions of horizontal and vertical (e.g. left and right). While these flow relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. You might want some features to always relate to the physical dimensions whatever the writing mode. ## Mappings for dimensions @@ -29,7 +29,7 @@ If you were in a vertical writing mode then {{CSSxRef("inline-size")}} would be The logical mappings for {{CSSxRef("width")}} and {{CSSxRef("height")}} are {{CSSxRef("inline-size")}}, which sets the length in the inline dimension and {{CSSxRef("block-size")}}, which sets the length in the block dimension. When working in English, replacing `width` with `inline-size` and `height` with `block-size` will give the same layout. -In the live example below I have set the Writing Mode to `horizontal-tb`. Change it to `vertical-rl` and you will see that the first example — which uses `width` and `height` — remains the same size in each dimension, despite the text becoming vertical. The second example — which uses `inline-size` and `block-size` — will follow the text direction as if the entire block has rotated. +In the live example below, the `writing-mode` is set to `horizontal-tb`. Change it to `vertical-rl` and you will see that the first example — which uses `width` and `height` — remains the same size in each dimension, despite the text becoming vertical. The second example — which uses `inline-size` and `block-size` — will follow the text direction as if the entire block has rotated. {{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}