dominant-baseline
dominant-baseline
属性指定主基线,它是用于对齐框的文本和内联级内容的基线。它还指示框的对齐上下文中参与基线对齐的任何框的默认对齐基线。
它用于确定或重新确定缩放基线表。缩放基线表是一个具有三个组件的复合值
- 主基线的基线标识符,
- 基线表,以及
- 基线表字体大小。
该属性的一些值会重新确定所有三个值。其他值仅重新建立基线表字体大小。当初始值 auto
会产生不希望的结果时,可以使用此属性显式设置所需的缩放基线表。
如果标称字体中没有基线表,或者如果基线表缺少所需基线的条目,则浏览器可能会使用启发式方法来确定所需基线的位置。
注意:作为表示属性,dominant-baseline
可以用作 CSS 属性。有关更多信息,请参阅 dominant-baseline
。
您可以将此属性与以下 SVG 元素一起使用
示例
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />
<text dominant-baseline="auto" x="30" y="20">Auto</text>
<text dominant-baseline="middle" x="30" y="50">Middle</text>
<text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>
用法说明
值 |
auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top |
---|---|
默认值 | auto |
可动画 | 离散 |
auto
-
如果此属性出现在
<text>
元素上,则计算出的值取决于writing-mode
属性的值。如果
writing-mode
为水平,则主基线组件的值为alphabetic
。否则,如果writing-mode
为垂直,则主基线组件的值为central
。如果此属性出现在
<tspan>
、<tref>
或<textPath>
元素上,则主基线和基线表组件保持与父文本内容元素的组件相同。如果计算出的
baseline-shift
值实际上会移动基线,则基线表字体大小组件设置为dominant-baseline
属性所在的元素的font-size
属性的值,否则基线表字体大小保持与该元素的字体大小相同。如果没有父文本内容元素,则缩放基线表值将如上所述为
<text>
元素构建。 use-script
已弃用-
主基线和基线表组件通过确定字符数据内容的主要脚本进行设置。
writing-mode
(无论是水平还是垂直)都用于选择合适的基线表集,并且主基线用于选择对应于该基线的基线表。基线表字体大小组件设置为dominant-baseline
属性所在的元素的font-size
属性的值。 no-change
已弃用-
主基线、基线表和基线表字体大小保持与父文本内容元素的相同。
reset-size
已弃用-
主基线和基线表保持不变,但基线表字体大小更改为此元素的
font-size
属性的值。这会根据当前的font-size
重新缩放基线表。 ideographic
-
主基线的基线标识符设置为
ideographic
,派生基线表使用字体中的ideographic
基线表构建,并且基线表字体大小更改为此元素的font-size
属性的值。 alphabetic
-
主基线的基线标识符设置为
alphabetic
,派生基线表使用字体中的alphabetic
基线表构建,并且基线表字体大小更改为此元素的font-size
属性的值。 hanging
-
主基线的基线标识符设置为
hanging
,派生基线表使用字体中的hanging
基线表构建,并且基线表字体大小更改为此元素的font-size
属性的值。 mathematical
-
主基线的基线标识符设置为
mathematical
,派生基线表使用字体中的mathematical
基线表构建,并且基线表字体大小更改为此元素的font-size
属性的值。 central
-
主基线的基线标识符设置为
central
。派生基线表根据字体中基线表中定义的基线构建。该字体基线表是使用以下基线表名称优先级顺序选择的:ideographic
、alphabetic
、hanging
、mathematical
。基线表字体大小更改为此元素的font-size
属性的值。 middle
-
主基线标识符设置为
middle
。派生基线表是从字体中基线表中定义的基线构建的。使用以下基线表名称优先级顺序选择该字体基线表:alphabetic
、ideographic
、hanging
、mathematical
。基线表字体大小更改为此元素的font-size
属性的值。 text-after-edge
-
主基线标识符设置为
text-after-edge
。派生基线表是从字体中基线表中定义的基线构建的。从字体中的基线表中选择哪个字体基线表取决于浏览器。基线表字体大小更改为此元素的font-size
属性的值。 text-before-edge
-
主基线标识符设置为
text-before-edge
。派生基线表是从字体中基线表中定义的基线构建的。从字体中的基线表中选择哪个基线表取决于浏览器。基线表字体大小更改为此元素的font-size
属性的值。 text-top
-
此值使用 em 方框的顶部作为基线。
SVG
<svg
width="400"
height="300"
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg">
<!-- Materialization of anchors -->
<path
d="M60,20 L60,270
M30,20 L400,20
M30,70 L400,70
M30,120 L400,120
M30,170 L400,170
M30,220 L400,220
M30,270 L400,270"
stroke="grey" />
<!-- Anchors in action -->
<text dominant-baseline="auto" x="70" y="20">auto</text>
<text dominant-baseline="middle" x="70" y="70">middle</text>
<text dominant-baseline="hanging" x="70" y="170">hanging</text>
<text dominant-baseline="mathematical" x="70" y="220">mathematical</text>
<text dominant-baseline="text-top" x="70" y="270">text-top</text>
<!-- Materialization of anchors -->
<circle cx="60" cy="20" r="3" fill="red" />
<circle cx="60" cy="70" r="3" fill="red" />
<circle cx="60" cy="120" r="3" fill="red" />
<circle cx="60" cy="170" r="3" fill="red" />
<circle cx="60" cy="220" r="3" fill="red" />
<circle cx="60" cy="270" r="3" fill="red" />
<style>
<![CDATA[
text {
font: bold 30px Verdana, Helvetica, Arial, sans-serif;
}
]]>
</style>
</svg>
结果
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # DominantBaselineProperty |
CSS 内联布局模块第 3 级 # dominant-baseline 属性 |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- CSS
dominant-baseline
属性