Skip to content

Commit caab35a

Browse files
bsmthestelle
bsmth
and
estelle
authored
feat(css): add baseline-source prop (#42228)
* feat(css): add baseline-source prop * feat(css): baselin-shift and baseline-source are implemented * Apply suggestions from code review Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Apply suggestion from @estelle Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Apply suggestion from @estelle Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * feat(css): changes following reviewer feedback * feat(css): changes following reviewer feedback * Apply suggestions from code review Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * chore: Make linter happy --------- Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
1 parent 24ccd89 commit caab35a

File tree

2 files changed

+138
-1
lines changed
  • files/en-us/web/css

2 files changed

+138
-1
lines changed

‎files/en-us/web/css/guides/inline_layout/index.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ The **CSS inline layout** module defines the block-axis alignment and sizing of
1414
### Properties
1515

1616
- {{cssxref("alignment-baseline")}}
17+
- {{cssxref("baseline-shift")}}
18+
- {{cssxref("baseline-source")}}
1719
- {{cssxref("dominant-baseline")}}
1820
- {{cssxref("initial-letter")}}
1921
- {{cssxref("line-height")}}
@@ -22,7 +24,7 @@ The **CSS inline layout** module defines the block-axis alignment and sizing of
2224
- {{cssxref("text-box")}} shorthand
2325
- {{cssxref("vertical-align")}}
2426

25-
The specification also defines the `baseline-shift`, `baseline-source`, `initial-letter-align`, `initial-letter-wrap`, `inline-sizing`, and `line-fit-edge` properties, which are not yet supported by any browser.
27+
The specification also defines the `initial-letter-align`, `initial-letter-wrap`, `inline-sizing`, and `line-fit-edge` properties, which are not yet supported by any browser.
2628

2729
### Data types
2830

‎files/en-us/web/css/reference/properties/baseline-source/index.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
---
2+
title: baseline-source
3+
slug: Web/CSS/Reference/Properties/baseline-source
4+
page-type: css-property
5+
browser-compat: css.properties.baseline-source
6+
sidebar: cssref
7+
---
8+
9+
The **`baseline-source`** [CSS](/en-US/docs/Web/CSS) property defines which [baseline](/en-US/docs/Web/CSS/Reference/Values/baseline-position) to use when inline-level boxes have multiple possible baselines, such as multi-line [inline blocks](/en-US/docs/Web/CSS/Guides/Display/Block_and_inline_layout) or inline [flex containers](/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts#the_flex_container).
10+
The values allow for choosing between aligning to the box's first baseline, last baseline, or letting the browser decide automatically based on the box type.
11+
12+
## Syntax
13+
14+
```css
15+
/* Keyword values */
16+
baseline-source: auto;
17+
baseline-source: first;
18+
baseline-source: last;
19+
20+
/* Global values */
21+
baseline-source: inherit;
22+
baseline-source: initial;
23+
baseline-source: revert;
24+
baseline-source: revert-layer;
25+
baseline-source: unset;
26+
```
27+
28+
### Values
29+
30+
- `auto`
31+
- : Specifies [`last baseline`](/en-US/docs/Web/CSS/Reference/Values/baseline-position#last_baseline) alignment for inline-block, [`first baseline`](/en-US/docs/Web/CSS/Reference/Values/baseline-position#first_baseline) alignment for everything else.
32+
- `first`
33+
- : Specifies `first baseline` alignment.
34+
- `last`
35+
- : Specifies `last baseline` alignment.
36+
37+
## Formal definition
38+
39+
{{cssinfo}}
40+
41+
## Formal syntax
42+
43+
{{csssyntax}}
44+
45+
## Examples
46+
47+
### Baseline selection in inline flex containers
48+
49+
This example demonstrates using the `baseline-source` property to control the baseline alignment of inline flex containers.
50+
51+
#### HTML
52+
53+
Our HTML includes several {{htmlelement("span")}} elements, which are generic inline containers for phrasing content.
54+
Three of the `<span>` elements contain nested `<span>` children.
55+
56+
```html
57+
<span>Baseline ___</span>
58+
59+
<span class="box first">
60+
<span>First</span>
61+
<span>A</span>
62+
<span>B</span>
63+
<span>C</span>
64+
</span>
65+
66+
<span class="box auto">
67+
<span>Auto</span>
68+
<span>A</span>
69+
<span>B</span>
70+
<span>C</span>
71+
</span>
72+
73+
<span class="box last">
74+
<span>A</span>
75+
<span>B</span>
76+
<span>C</span>
77+
<span>Last</span>
78+
</span>
79+
```
80+
81+
#### CSS
82+
83+
```css hidden
84+
body {
85+
font-family: sans-serif;
86+
}
87+
88+
.box {
89+
border: 2px solid #888;
90+
width: 50px;
91+
}
92+
93+
span {
94+
padding: 0.4rem;
95+
}
96+
```
97+
98+
We define all the boxes to be inline flex containers.
99+
We set the `.first` box to use the first baseline, the `.auto` box uses the default baseline (which is `first` for inline flex containers), and the `.last` box uses the last baseline.
100+
101+
```css
102+
.box {
103+
display: inline-flex;
104+
flex-direction: column;
105+
}
106+
107+
.first {
108+
baseline-source: first;
109+
}
110+
111+
.auto {
112+
baseline-source: auto;
113+
}
114+
115+
.last {
116+
baseline-source: last;
117+
}
118+
```
119+
120+
#### Result
121+
122+
{{EmbedLiveSample('baseline_selection_in_inline_flex_containers', '100%', 260)}}
123+
124+
## Specifications
125+
126+
{{Specifications}}
127+
128+
## Browser compatibility
129+
130+
{{Compat}}
131+
132+
## See also
133+
134+
- [`vertical-align`](/en-US/docs/Web/CSS/Reference/Properties/vertical-align) property
135+
- [CSS box alignment overview](/en-US/docs/Web/CSS/Guides/Box_alignment/Overview)

0 commit comments

Comments
 (0)