dominant-baseline

dominant-baseline CSS 属性指定用于对齐盒子文本和内联级内容的特定 基线。它还指示盒子对齐上下文中参与基线对齐的任何盒子的默认对齐基线。如果存在，它将覆盖形状的 dominant-baseline 属性。

基线是从字体基线表中选择的。如果标称字体中没有基线表，或者如果基线表缺少所需基线的条目，则浏览器可能会使用启发式方法来确定所需基线的位置。

dominant-baseline 属性用于确定或重新确定一个缩放基线表。缩放基线表是一个具有三个组件的复合值

  1. 主要基线的基线标识符，
  2. 一个基线表，以及
  3. 一个基线表字体大小。

某些 dominant-baseline 值会重新确定所有三个值。其他值仅重新建立基线表字体大小。当初始值 auto 会产生不希望的结果时，可以使用此属性显式设置所需的缩放基线表。

注意：dominant-baseline 属性仅对 <text>、<textPath>、<tref> 和 <tspan> SVG 元素有效。

语法

css
/* Initial value */
dominant-baseline: auto;

/* Keyword values */
dominant-baseline: alphabetic;
dominant-baseline: central;
dominant-baseline: hanging;
dominant-baseline: ideographic;
dominant-baseline: mathematical;
dominant-baseline: middle;
dominant-baseline: text-bottom;
dominant-baseline: text-top;

/* Global values */
dominant-baseline: inherit;
dominant-baseline: initial;
dominant-baseline: revert;
dominant-baseline: revert-layer;
dominant-baseline: unset;

值

auto

如果此属性应用于 <text> 元素，则计算值取决于 writing-mode 属性的值。

如果 writing-mode 为水平，则主要基线组件的值为 alphabetic。否则，如果 writing-mode 为垂直，则主要基线组件的值为 central。

如果此属性应用于 <tspan>、<tref> 或 <textPath> 元素，则主要基线和基线表组件保持与父文本内容元素的相同。

如果计算的 baseline-shift 值实际上会移动基线，则基线表字体大小组件设置为 dominant-baseline 属性所在的元素上的 font-size 属性的值，否则基线表字体大小保持与该元素相同。

如果没有父文本内容元素，则缩放基线表值将像 <text> 元素一样构建。

alphabetic

主要基线的基线标识符设置为 alphabetic，派生基线表使用字体中的 alphabetic 基线表构建，并且基线表字体大小更改为元素的 font-size SVG 属性或 CSS font-size（如果设置）的值。

central

主基线标识符设置为central。派生基线表由字体基线表中定义的基线构建。该字体基线表使用以下基线表名称优先级顺序选择：ideographic、alphabetic、hanging、mathematical。基线表字体大小更改为元素的font-size SVG 属性或 CSS font-size的值（如果设置）。

hanging

主基线标识符设置为hanging，派生基线表使用字体中的hanging基线表构建，并且基线表字体大小更改为该元素的font-size SVG 属性或font-size CSS 属性的值。

ideographic

主基线标识符设置为ideographic，派生基线表使用字体中的ideographic基线表构建，并且基线表字体大小更改为元素的font-size SVG 属性或 CSS font-size的值。

mathematical

主基线标识符设置为mathematical，派生基线表使用字体中的mathematical基线表构建，并且基线表字体大小更改为元素的font-size SVG 属性或 CSS font-size的值。

middle

主基线标识符设置为middle。派生基线表由字体中基线表中定义的基线构建。该字体基线表使用以下基线表名称优先级顺序选择：ideographic、alphabetic、hanging、mathematical。基线表字体大小更改为元素的font-size SVG 属性或 CSS font-size的值（如果设置）。

text-bottom

使用下划线边缘作为基线，通常是字体 em 方框的下边缘。

text-top

使用上划线边缘作为基线，通常是字体 em 方框的上边缘。

正式定义

数据库中未找到值！

正式语法

dominant-baseline = 
  auto          |
  text-bottom   |
  alphabetic    |
  ideographic   |
  middle        |
  central       |
  mathematical  |
  hanging       |
  text-top

示例

html
<svg viewBox="0 0 450 160" width="700" height="200">
  <text x="50" y="20">alphabetic</text>
  <text x="50" y="60">central</text>
  <text x="50" y="100">hanging</text>
  <text x="50" y="140">ideographic</text>
  <text x="250" y="20">mathematical</text>
  <text x="250" y="60">middle</text>
  <text x="250" y="100">text-bottom</text>
  <text x="250" y="140">text-top</text>
  <path
    d="M   0,20 l 400,0
       m -400,40 l 400,0
       m -400,40 l 400,0
       m -400,40 l 400,0"
    stroke="grey" />
  <text x="0" y="20" fill="red">auto</text>
  <text x="0" y="60" fill="red">auto</text>
  <text x="0" y="100" fill="red">auto</text>
  <text x="0" y="140" fill="red">auto</text>
</svg>
css
text {
  font-size: 20px;
}
text:nth-of-type(1) {
  dominant-baseline: alphabetic;
}
text:nth-of-type(2) {
  dominant-baseline: central;
}
text:nth-of-type(3) {
  dominant-baseline: hanging;
}
text:nth-of-type(4) {
  dominant-baseline: ideographic;
}
text:nth-of-type(5) {
  dominant-baseline: mathematical;
}
text:nth-of-type(6) {
  dominant-baseline: middle;
}
text:nth-of-type(7) {
  dominant-baseline: text-bottom;
}
text:nth-of-type(8) {
  dominant-baseline: text-top;
}

规范

规范
可缩放矢量图形 (SVG) 2
# DominantBaselineProperty
CSS 内联布局模块第 3 级
# dominant-baseline 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅