New module: css inline layout (#36582)

* New module: css inline layout * Apply suggestions from code review Co-authored-by: Chris Mills <[email protected]> --------- Co-authored-by: Chris Mills <[email protected]>
mdn · Nov 11, 2024 · 58dd075 · 58dd075
1 parent 14f294a
commit 58dd075
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/files/en-us/glossary/baseline/typography/index.md b/files/en-us/glossary/baseline/typography/index.md
@@ -6,11 +6,14 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-The **baseline** is a term used in European and West Asian typography meaning an imaginary line upon which the most characters of a font rest.
+A **baseline** is an imaginary line along the inline axis of a line box along which individual glyphs of text are aligned. Baselines guide the design of glyphs in a font and the alignment of glyphs from different fonts or font sizes when typesetting.
 
-East Asian scripts have no baseline; each glyph sits in a square box, with neither ascenders nor descenders. When mixed with scripts with a low baseline, East Asian characters should be set so that the bottom of the character is between the baseline and the descender height.
+The **alphabetic baseline** is the value of the CSS `baseline` keyword. The bottom of most alphabetic glyphs typically align with the alphabetic baseline; most characters of European and West Asian fonts rest _on top_ of the alphabetic baseline.
+
+Other writing systems have different baselines. For example, Tibetan and similar unicameral scripts with a strong but not absolute top edge are aligned to the bottom of a "hanging" baseline. East Asian scripts have no baseline; each glyph sits in a square box, with neither ascenders nor descenders. When mixed with scripts with a low baseline, East Asian characters should be set so that the bottom of the character is between the baseline and the descender height.
 
 ## See also
 
 - [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment#types_of_alignment)
+- [CSS inline layout](/en-US/docs/Web/CSS/CSS_inline_layout) module
 - [Baseline (Typography)](<https://en.wikipedia.org/wiki/Baseline_(typography)>) on Wikipedia
diff --git a/files/en-us/web/css/css_inline_layout/index.md b/files/en-us/web/css/css_inline_layout/index.md
@@ -0,0 +1,44 @@
+---
+title: CSS inline layout
+slug: Web/CSS/CSS_inline_layout
+page-type: css-module
+spec-urls: https://drafts.csswg.org/css-inline
+---
+
+{{CSSRef}}
+
+The **CSS inline layout** module defines the block-axis alignment and sizing of inline-level content and adds a special layout mode for drop-caps. It describes the CSS formatting model for a flow of elements and text inside a container to be wrapped across multiple lines.
+
+## Reference
+
+### Properties
+
+- {{cssxref("dominant-baseline")}}
+- {{cssxref("initial-letter")}}
+- {{cssxref("line-height")}}
+- {{cssxref("vertical-align")}}
+
+The specification also defines the `alignment-baseline`, `baseline-shift`, `baseline-source`, `initial-letter-align`, `initial-letter-wrap`, `inline-sizing`, `line-fit-edge`, `text-box`, `text-box-edge`, and `text-box-trim` properties, which are not yet supported by any browser.
+
+### Glossary terms
+
+- {{glossary("baseline/typography", "baseline")}}
+
+## Related concepts
+
+- {{cssxref("font-size")}} property
+- {{cssxref("font-feature-settings")}} property
+- {{cssxref("letter-spacing")}} property
+- {{cssxref("text-anchor")}} property
+- {{cssxref("::first-letter")}} pseudo-element
+- {{cssxref(":first-child")}} pseudo-class
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- [CSS text](/en-US/docs/Web/CSS/CSS_text) module
+- [CSS fonts](/en-US/docs/Web/CSS/CSS_fonts) module
+- [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module