Fix the description of the display property according to the CSS specification #26612
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: 2023-05-11 20:23:34) |
estelle
reviewed
May 9, 2023
There was a problem hiding this comment.
Thank you for your PR.
You're correct that inline element and block element are no longer used. Thanks for the PR.
An element generates either a block box or an inline box (or one or more inline boxes if it goes across multiple lines). The element, therefore, is a block-level element or an inline-level element. I made some suggestions to reflect this.
Welcome to the team!
files/en-us/web/css/display/index.md
Outdated
| @@ -168,7 +168,7 @@ This can be used together with {{CSSxRef("list-style-type")}} and {{CSSxRef("lis | |||
|
|
|||
| - `inline-block` | |||
|
|
|||
| - : The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). | |||
| - : The element generates a block level box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). | |||
There was a problem hiding this comment.
Suggested change
| - : The element generates a block level box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). | |
| - : The element generates a block box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). |
files/en-us/web/css/display/index.md
Outdated
| @@ -7,7 +7,7 @@ browser-compat: css.properties.display | |||
|
|
|||
| {{CSSRef}} | |||
|
|
|||
| The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline element](/en-US/docs/Web/CSS/CSS_Flow_Layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout), [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). | |||
| The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline level](/en-US/docs/Web/CSS/CSS_Flow_Layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout), [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). | |||
There was a problem hiding this comment.
Suggested change
| The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline level](/en-US/docs/Web/CSS/CSS_Flow_Layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout), [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). | |
| The **`display`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is treated as a [block or inline box](/en-US/docs/Web/CSS/CSS_Flow_Layout) and the layout used for its children, such as [flow layout](/en-US/docs/Web/CSS/CSS_Flow_Layout), [grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). |
files/en-us/web/css/display/index.md
Outdated
| @@ -66,9 +66,9 @@ The keyword values can be grouped into six value categories. | |||
| - : These keywords specify the element's outer display type, which is essentially its role in flow layout: | |||
|
|
|||
| - `block` | |||
| - : The element generates a block element box, generating line breaks both before and after the element when in the normal flow. | |||
| - : The element generates a block level box, generating line breaks both before and after the element when in the normal flow. | |||
There was a problem hiding this comment.
Suggested change
| - : The element generates a block level box, generating line breaks both before and after the element when in the normal flow. | |
| - : The element generates a block box, generating line breaks both before and after the element when in the normal flow. |
files/en-us/web/css/display/index.md
Outdated
| - `inline` | ||
| - : The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. | ||
| - : The element generates one or more inline level boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. |
There was a problem hiding this comment.
Suggested change
| - : The element generates one or more inline level boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. | |
| - : The element generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space. |
files/en-us/web/css/display/index.md
Outdated
| @@ -88,15 +88,15 @@ The keyword values can be grouped into six value categories. | |||
| Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context. | |||
|
|
|||
| - `flow-root` | |||
| - : The element generates a block element box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies. | |||
| - : The element generates a block level box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies. | |||
There was a problem hiding this comment.
Suggested change
| - : The element generates a block level box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies. | |
| - : The element generates a block box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies. |
files/en-us/web/css/display/index.md
Outdated
| - `table` | ||
| - : These elements behave like HTML {{HTMLElement("table")}} elements. It defines a block-level box. | ||
| - `flex` | ||
| - : The element behaves like a block element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). | ||
| - : The element behaves like a block level and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). |
There was a problem hiding this comment.
Suggested change
| - : The element behaves like a block level and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). | |
| - : The element behaves like a block-level element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). |
files/en-us/web/css/display/index.md
Outdated
| - `grid` | ||
| - : The element behaves like a block element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). | ||
| - : The element behaves like a block level and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). |
There was a problem hiding this comment.
Suggested change
| - : The element behaves like a block level and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). | |
| - : The element behaves like a block-level element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). |
files/en-us/web/css/display/index.md
Outdated
| - `ruby` {{Experimental_Inline}} | ||
| - : The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. | ||
| - : The element behaves like an inline level and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. |
There was a problem hiding this comment.
Suggested change
| - : The element behaves like an inline level and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. | |
| - : The element behaves like an inline-level element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement("ruby")}} elements. |
files/en-us/web/css/display/index.md
Outdated
| @@ -180,13 +180,13 @@ This can be used together with {{CSSxRef("list-style-type")}} and {{CSSxRef("lis | |||
|
|
|||
| - `inline-flex` | |||
|
|
|||
| - : The element behaves like an inline element and lays out its content according to the flexbox model. | |||
| - : The element behaves like an inline level and lays out its content according to the flexbox model. | |||
There was a problem hiding this comment.
Suggested change
| - : The element behaves like an inline level and lays out its content according to the flexbox model. | |
| - : The element behaves like an inline-level element and lays out its content according to the flexbox model. |
files/en-us/web/css/display/index.md
Outdated
|
|
||
| It is equivalent to `inline flex`. | ||
|
|
||
| - `inline-grid` | ||
|
|
||
| - : The element behaves like an inline element and lays out its content according to the grid model. | ||
| - : The element behaves like an inline level and lays out its content according to the grid model. |
There was a problem hiding this comment.
Suggested change
| - : The element behaves like an inline level and lays out its content according to the grid model. | |
| - : The element behaves like an inline-level element and lays out its content according to the grid model. |
|
@estelle I fixed it as per your suggestion. Would you please review. |
|
I'm glad to see that the other "inline element/block element" descriptions on MDN have been corrected! #25891 |
estelle
approved these changes
May 11, 2023
HannahPeuckmann
pushed a commit
to HannahPeuckmann/content
that referenced
this pull request
May 15, 2023
…ification (mdn#26612) * change: `block element box` -> `block level box` * change: `inline element boxes` -> `inline level boxes` * change: `block element` -> `block level` * change: `inline element` -> `inline level` * fix: `inline/block level box` -> `inline/block box` * change: `inline/block level` -> `inline-level/block-level element` * fix: `block level` -> `block-level element`
dipikabh
added a commit
that referenced
this pull request
Jun 13, 2023
* Updating content that storage is always partitioned and storage access grants are limited to cookies * Avoiding the phrase 'cookie storage' * implemented review from Tricolon * reverted changes to storage_access_policy * clean up * add service workers to partitioned APIs * linting * Fix: Use language keywords instead of framework type names in the examples of 'WebSocket' (#26725) * Add a bit about SPAs (#26711) * Bump @mdn/yari from 2.18.1 to 2.20.0 (#26730) * DNR corrections in URLTransform's queryTransform (#26732) * Fix the description of the display property according to the CSS specification (#26612) * change: `block element box` -> `block level box` * change: `inline element boxes` -> `inline level boxes` * change: `block element` -> `block level` * change: `inline element` -> `inline level` * fix: `inline/block level box` -> `inline/block box` * change: `inline/block level` -> `inline-level/block-level element` * fix: `block level` -> `block-level element` * Adding missing sections for `container*` (#25739) * Update sections for `container` * Update sections for `container-name` * Update sections for `container-type` * Update files/en-us/web/css/container-name/index.md --------- Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Brian Thomas Smith <[email protected]> * fix(prefers-reduced-motion): Edit text and improve example (#26630) * edits to page for clarity * improve example explanation * fix review comments * Update files/en-us/web/css/@media/prefers-reduced-motion/index.md --------- Co-authored-by: Estelle Weyl <[email protected]> * Added info for 'muted' driven emission (#26641) * Added info for 'muted' driven emission Fixing missing information that muting also fires this event. Standard spec: https://html.spec.whatwg.org/multipage/media.html#event-media-volumechange * Update files/en-us/web/api/htmlmediaelement/volumechange_event/index.md * lint --------- Co-authored-by: wbamberg <[email protected]> * Add page for prefers-reduced-transparency (#25289) * Add page for prefers-reduced-transparency * Update page for prefers-reduced-transparency Changed text as requested in PR comments. --------- Co-authored-by: Brian Thomas Smith <[email protected]> Co-authored-by: Dipika Bhattacharya <[email protected]> * Fix arrow syntax explanation (#26704) * remove bracket around the parameter The example should omit the brackets around the parameter, as described in the explanation above this code. * Update files/en-us/learn/javascript/building_blocks/functions/index.md * Update files/en-us/learn/javascript/building_blocks/functions/index.md * Update index.md --------- Co-authored-by: Joshua Chen <[email protected]> * Add RTCAudioSourceStats (#26667) * Add RTCAudioSourceStats * Update files/en-us/web/api/rtcaudiosourcestats/index.md Co-authored-by: wbamberg <[email protected]> * Apply suggestions from code review Co-authored-by: wbamberg <[email protected]> * Apply suggestions from code review Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/rtcaudiosourcestats/index.md * Add keys for BCD data * Make it clear that the audiolevel can also be calculated --------- Co-authored-by: wbamberg <[email protected]> * correct language tag of code fence (#26738) * Fix code comment in dialog example (#26669) * Update index.md (#26744) * Remove Prettier ignore for /web/web_components (#24225) * Bump @mdn/yari from 2.20.0 to 2.20.3 (#26747) * Update length values description (#26728) * Update length values description length values are not always absolute. For example we can use 2em for width property as a length value but it is not absolute. I corrected this in the Values section. * Update files/en-us/web/css/width/index.md Co-authored-by: Dipika Bhattacharya <[email protected]> --------- Co-authored-by: Dipika Bhattacharya <[email protected]> * Add TransformStream note about returning a promise (#26757) * Remove emphasis on WritableStream controller (#26758) * Remove emphasis on WritableStream controller * copy edit * lint --------- Co-authored-by: wbamberg <[email protected]> * fix: Updated description of example which in `JavaScript.Object` to be more accurate (#26742) Update index.md * Fix some more return statements (#26759) * Fix return value for toString * Fix some more return statements * Fix 26745: don't auto-play (#26748) * Fix 26743: Fix return value; improve example (#26753) * Fix return value for Range: getBoundingClientRect() (#26754) * Mention that Set iterators have a defined order (#26727) * Mention that Set iterators have a defined order * Do it for Map --------- Co-authored-by: Joshua Chen <[email protected]> * Accentuate month being 0-index in getMonth example (#26734) * Accentuate month being 0-index in get month example `Date.getMonth` behavior differ slightly from the similar method as it return the index of the month and is 0-indexed, while the other method return ordinal values instead of index and don't have this distinction. One could be tempted to run `${year}-${month}-${day}` and `${hour}:${minutes}:${seconds}` after the code in exemple to get iso formated date and time but the month would be off by one as iso month are 1-indexed, january being 1 and december being 12. Adding a comment with the actual output put emphasis on this difference in behavior and might prevent people being surprised by that after the fact. The value chosen for the date is partly random. 2000 is the first year not starting with 19; January cause the month part to be 0 which should call attention to itself; 17 is high enough so it cannot be a month and I like it; 16 is in the 24h hour clock; 45 is high enough to not be confused with an hour; 30 is here for lack of imagination. * Update files/en-us/web/javascript/reference/global_objects/date/index.md * Update files/en-us/web/javascript/reference/global_objects/date/index.md * Update files/en-us/web/javascript/reference/global_objects/date/index.md --------- Co-authored-by: Joshua Chen <[email protected]> * Do not use JSON.stringify in console.log (#26662) * Update index.md * fix: not use JSON.stringify when print via console.log * fix: Update the description of callbackFn's accumulator in `Array.reduceRight()` (#26594) * Update index.md * Update files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md * Update files/en-us/web/javascript/reference/global_objects/array/reduceright/index.md --------- Co-authored-by: Joshua Chen <[email protected]> * Remove random arrow from Endianness example (#26767) * Add missed redirect (#26769) * remove self-reference links (#26764) * remove a self reference link * Update index.md * Update index.md (#26771) * Update index.md Added the missing bracket * Update files/en-us/web/api/stylepropertymap/append/index.md --------- Co-authored-by: Hamish Willee <[email protected]> * correct http status code message (#26765) * Fix 26741: reduce ambiguity, remove unneeded word (#26750) * Fix 26741: reduce ambiguity, remove unneeded word * Update files/en-us/web/http/overview/index.md --------- Co-authored-by: Hamish Willee <[email protected]> * Window.beforeunload event requires sticky activation (#26772) * Update `:paused` content (#26768) * Update `:paused` content * Update files/en-us/web/css/_colon_paused/index.md * Update files/en-us/web/css/_colon_paused/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/css/_colon_paused/index.md Co-authored-by: Estelle Weyl <[email protected]> * Update files/en-us/web/css/_colon_paused/index.md Co-authored-by: A1lo <[email protected]> --------- Co-authored-by: Joshua Chen <[email protected]> Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: A1lo <[email protected]> * FF114 ECMAScript module support (#26774) * removed while loop from the example (#26588) Co-authored-by: Mohit Maheshwari <[email protected]> * Updating content that storage is always partitioned and storage access grants are limited to cookies * Avoiding the phrase 'cookie storage' * implemented review from Tricolon * less firefox centric * clean up merge * capitalization --------- Co-authored-by: Hannah Peuckmann <[email protected]> Co-authored-by: Bodhi van Baardewijk <[email protected]> Co-authored-by: wbamberg <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: rebloor <[email protected]> Co-authored-by: oti <[email protected]> Co-authored-by: yarusome <[email protected]> Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Estelle Weyl <[email protected]> Co-authored-by: Brian Thomas Smith <[email protected]> Co-authored-by: Dipika Bhattacharya <[email protected]> Co-authored-by: Ctibor Laky <[email protected]> Co-authored-by: CanadaHonk <[email protected]> Co-authored-by: nintendoit <[email protected]> Co-authored-by: Joshua Chen <[email protected]> Co-authored-by: Hamish Willee <[email protected]> Co-authored-by: A1lo <[email protected]> Co-authored-by: Fredrik Vaeng Røtnes <[email protected]> Co-authored-by: Sebastian Sobociński <[email protected]> Co-authored-by: Queen Vinyl Da.i'gyu-Kazotetsu <[email protected]> Co-authored-by: Amirhosain Shahsavari <[email protected]> Co-authored-by: Dan Cecile <[email protected]> Co-authored-by: Jason Lam <[email protected]> Co-authored-by: Mathias Stearn <[email protected]> Co-authored-by: L. Coues <[email protected]> Co-authored-by: Steven Nyman <[email protected]> Co-authored-by: Onkar Ruikar <[email protected]> Co-authored-by: Arka Poddar <[email protected]> Co-authored-by: Jason Ren <[email protected]> Co-authored-by: Wonder Dai <[email protected]> Co-authored-by: MohitMaheshwari1711 <[email protected]> Co-authored-by: Mohit Maheshwari <[email protected]>
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.
Description
"block element" and "inline element" term are old of HTML 4.01 era. The CSS Specification says "block level" and "inline level".
Motivation
The incorrect keywords "block element" and "inline element" have been translated into Japanese as they are, causing problems that some web developers cannot understand CSS specifications correctly.
e.g. https://zenn.dev/coedo/articles/html-css-inline-element-block-level-element
Additional details
https://www.w3.org/TR/css-display-3/#display-value-summary
Related issues and pull requests