diff --git a/files/en-us/glossary/baseline/typography/index.md b/files/en-us/glossary/baseline/typography/index.md index 768a5d34f0cd3a7..f7387b5bae6749b 100644 --- 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)]() 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 new file mode 100644 index 000000000000000..b96a74f5f7bde28 --- /dev/null +++ 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