New glossary: logical and physical properties #33860
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Preview URLs (comment last updated: 2024-06-06 08:33:37) |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
@chrisdavidmills I rewrote it, integrating your suggestions, and added a physical properties glossary entry |
estelle
changed the title
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
This was referenced Jun 3, 2024
chrisdavidmills
requested changes
Jun 4, 2024
|
|
||
| CSS **logical properties** provide a way to lay out content based on the document's writing mode and direction rather than the physical dimensions of the viewport. This enables more flexible and maintainable designs, especially for websites supporting multiple languages. | ||
|
|
||
| Whereas {{glossary("physical properties")}} define positions based on physical directions; with {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} referring to the physical dimensions of the viewport and properties like {{cssxref("margin-top")}}, {{cssxref("border-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("border-bottom-left-radius")}}reference specific sides of an element, logical properties are relative to the content flow and use directional keywords that are relative to the block and inline axes. |
There was a problem hiding this comment.
Suggested change
| Whereas {{glossary("physical properties")}} define positions based on physical directions; with {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} referring to the physical dimensions of the viewport and properties like {{cssxref("margin-top")}}, {{cssxref("border-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("border-bottom-left-radius")}}reference specific sides of an element, logical properties are relative to the content flow and use directional keywords that are relative to the block and inline axes. | |
| Whereas {{glossary("physical properties")}} define positions based on physical directions, logical properties such as {{cssxref("margin-block-start")}} and {{cssxref("padding-inline-end")}} use logical directional keywords relative to the content flow along the block and inline axes. |
I don't think all of the physical examples are needed. You link to the physical properties page, where you provide examples of such properties. The original was rather long and cumbersome to read.
I have also included the information provided by the sentence above the "See also" section, which I am suggesting you delete.
There was a problem hiding this comment.
Went with:
Whereas {{glossary("physical properties")}}, like {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("border-bottom-left-radius")}}, define positions and features based on physical directions and reference specific sides of an element, logical properties such as {{cssxref("block-start")}}, {{cssxref("inline-end")}}, {{cssxref("padding-block-end")}}, and {{cssxref("border-end-end-radius")}} use logical directional keywords that are relative to the content flow along the block and inline axes.
using 4 physical properties and their mapped logical property equivalents. I think that improves it a lot.
There was a problem hiding this comment.
Much better — my only issue is that I don't think block-start and inline-end are properties. Did you mean margin-block-start and margin-inline-end, or similar?
There was a problem hiding this comment.
The links are broken, you see. Of course, we might just not have documented them yet...
|
|
||
| **Inline-start** and **inline-end** represent the _start edge_ and _end edge_ of content along the inline axis, respectively, with the values and properties `inline-start` and `inline-end` being the equivalent of `left` and `right` properties and values in horizontal writing modes, but whether each means `right` or `left` depends on the writing direction (`inline-start` is `left` in left-to-right languages and `right` in right-to-left languages.) | ||
|
|
||
| Therefore, logical properties, like {{cssxref("margin-block-start")}} and {{cssxref("padding-inline-end")}}, use logical keywords relative to the content flow. |
There was a problem hiding this comment.
I'd suggest removing this and moving these details as per my suggestion above. This sentence feels a bit out of place and without context, in the current position.
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
estelle
commented
Jun 5, 2024
estelle
commented
Jun 5, 2024
|
|
||
| CSS **logical properties** provide a way to lay out content based on the document's writing mode and direction rather than the physical dimensions of the viewport. This enables more flexible and maintainable designs, especially for websites supporting multiple languages. | ||
|
|
||
| Whereas {{glossary("physical properties")}}, like {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("border-bottom-left-radius")}}, efine positions based on physical directions and reference specific sides of an element, logical properties logical properties such as {{cssxref("margin-block-start")}} and {{cssxref("padding-inline-end")}} use logical directional keywords that are relative to the content flow along the block and inline axes. |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| Whereas {{glossary("physical properties")}}, like {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("border-bottom-left-radius")}}, efine positions based on physical directions and reference specific sides of an element, logical properties logical properties such as {{cssxref("margin-block-start")}} and {{cssxref("padding-inline-end")}} use logical directional keywords that are relative to the content flow along the block and inline axes. | |
| Whereas {{glossary("physical properties")}}, like {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("border-bottom-left-radius")}}, efine positions based on physical directions and reference specific sides of an element, logical properties logical properties such as {{cssxref("margin-block-start")}} and {{cssxref("padding-inline-end")}} use logical directional keywords that are relative to the content flow along the block and inline axes. |
chrisdavidmills
approved these changes
Jun 6, 2024
There was a problem hiding this comment.
Nice work @estelle; LGTM, pending one little query about property names. Should be a quick fix, so I'll approve.
|
@estelle the query is here: #33860 (comment) (just in case you have trouble finding it) |
estelle
commented
Jun 6, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of openwebdocs/project#205;
which is needed for openwebdocs/project#178