Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update css guide #33907

Merged
merged 1 commit into from
Jun 4, 2024
Merged

Update css guide #33907

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 10 additions & 12 deletions ...-us/web/css/css_logical_properties_and_values/floating_and_positioning/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ page-type: guide

{{CSSRef}}

The [Logical Properties and Values specification](https://drafts.csswg.org/css-logical/) contains logical mappings for the physical values of {{cssxref("float")}} and {{cssxref("clear")}}, and also for the positioning properties used with [positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout). This guide takes a look at how to use these.
The [CSS logical properties and values](/en-US/docs/Web/CSS/CSS_logical_properties_and_values) module contains logical mappings for the physical values of {{cssxref("float")}} and {{cssxref("clear")}}, and also for the positioning properties used with [positioned layout](/en-US/docs/Web/CSS/CSS_positioned_layout). This guide takes a look at how to use these.

## Mapped properties and values

The table below details the properties and values discussed in this guide along with their physical mappings. They assume a horizontal {{cssxref("writing-mode")}}, with a left-to-right direction.
The table below details the {{glossary("logical properties")}} and values discussed in this guide along with their {{glossary("physical properties")}} and values mappings. They assume a horizontal {{cssxref("writing-mode")}}, with a left-to-right direction.

| Logical property or value | Physical property or value |
| ---------------------------------- | -------------------------------- |
Expand All @@ -25,7 +25,7 @@ The table below details the properties and values discussed in this guide along
| {{cssxref("text-align")}}: start | {{cssxref("text-align")}}: left |
| {{cssxref("text-align")}}: end | {{cssxref("text-align")}}: right |

In addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. These have no mapping to physical properties, aside from the {{cssxref("inset")}} property.
In addition to these mapped properties, there are some additional shorthand properties made possible by being able to address block and inline dimensions. These have no mapping to physical properties, aside from the {{cssxref("inset")}} property.

| Logical property | Purpose |
| --------------------------- | ------------------------------------------------------------------------------- |
Expand All @@ -35,37 +35,35 @@ In addition to these mapped properties there are some additional shorthand prope

## Float and clear example

The physical values used with the {{cssxref("float")}} and {{cssxref("clear")}} properties are `left`, `right` and `both`. The Logical Properties specification defines the values `inline-start` and `inline-end` as mappings for `left` and `right`.
The physical values used with the {{cssxref("float")}} and {{cssxref("clear")}} properties are `left`, `right` and `both`. The CSS logical properties and values module defines the values `inline-start` and `inline-end` as mappings for `left` and `right`.

In the example below I have two boxes — the first has the box floated with `float: left`, the second with `float: inline-start`. If you change the `writing-mode` to `vertical-rl` or the `direction` to `rtl` you will see that the left-floated box always sticks to the left, whereas the `inline-start`-floated item follows the `direction` and `writing-mode`.
This example has two boxes — the first has the box floated with `float: left`, the second with `float: inline-start`. If you change the `writing-mode` to `vertical-rl` or the `direction` to `rtl` you will see that the left-floated box always sticks to the left, whereas the `inline-start`-floated item follows the `direction` and `writing-mode`.

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

## Example: Inset properties for positioned layout

Positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. To do this we have historically used the physical properties {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} and {{cssxref("left")}}.
CSS positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. To position an element relative to the viewport, use the physical properties {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} and {{cssxref("left")}}. When you want the positioning to relate to the flow of text in your writing mode, use {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} and {{cssxref("inset-inline-end")}} instead.

These properties take a length or a percentage as a value, and relate to the user's screen dimensions.

New properties have been created in the Logical Properties specification for when you want the positioning to relate to the flow of text in your writing mode. These are as follows: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} and {{cssxref("inset-inline-end")}}.

In the below example I have used the `inset-block-start` and `inset-inline-end` properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has `position: relative`. Change the `writing-mode` property to `vertical-rl`, or add `direction: rtl`, and see how the flow relative box stays with the text direction.
In the below example, the `inset-block-start` and `inset-inline-end` properties are used to position the blue box using absolute positioning inside the area with the grey dotted border, which has `position: relative`. Change the `writing-mode` property to `vertical-rl`, or add `direction: rtl`, and see how the flow relative box stays with the text direction.

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

## New two- and four-value shorthands

As with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once.
As with other properties in the module, we have shorthand properties which give the ability to set two or four values at once.

- {{cssxref("inset")}} — sets all four sides together with physical mapping.
- {{cssxref("inset-inline")}} — sets both logical inline insets.
- {{cssxref("inset-block")}} — sets both logical block insets.

## Example: Logical values for text-align

The {{cssxref("text-align")}} property has logical values that relate to text direction — rather than using `left` and `right` we can use `start` and `end`. In the below example I have set `text-align: right` in the first block and `text-align: end` in the second.
The {{cssxref("text-align")}} property has logical values that relate to text direction — rather than using `left` and `right` you can use `start` and `end`. In the below example, `text-align: right` is set in the first block and `text-align: end` in the second.

If you change the value of `direction` to `rtl` you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second.
If you change the value of `direction` to `rtl`, you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second.

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

Expand Down