【CSS Modules】dominant-baselineプロパティの使い方

dominant-baselineプロパティは、テキストのベースライン揃え方法を指定するプロパティです。このプロパティは、特に複数のテキスト要素や異なるフォントが混在する状況において、それらの垂直方向の配置を詳細に制御するために使用されます。

テキストの「ベースライン」とは、文字が並ぶ際にその下端が揃う仮想の基準線のことを指します。例えば、英語の小文字「p」や「g」の下部がベースラインより下に突き出るように、文字にはそれぞれ固有のベースラインの位置があります。dominant-baselineプロパティは、この基準線をどのように設定し、他のテキストや要素と揃えるかを決定します。

具体的には、SVG（Scalable Vector Graphics）で図形の中にテキストを配置する際や、MathML（Mathematical Markup Language）で数式を構成するテキストを整列させる際など、テキストと他の要素の垂直方向の位置関係を細かく調整したい場合に特に役立ちます。これにより、異なる言語の文字や、通常のテキストとアイコンが混在するような場面でも、視覚的に美しい整列を実現できます。

このプロパティには、auto（ユーザーエージェントに任せる）、alphabetic（アルファベット文字の標準的なベースラインに揃える）、ideographic（日本語や中国語などの表意文字のベースラインに揃える）、central（行の中央に揃える）、text-bottom（行ボックスの下端に揃える）など、複数の値があります。これらの値を適切に選択することで、テキスト行内での文字の垂直方向の位置を調整し、より意図した通りの見た目を実現できます。

dominant-baselineプロパティを理解し活用することで、複雑なテキストレイアウトを持つWebコンテンツの表示品質を向上させ、視覚的に整ったデザインを構築することが可能になります。

Copy
1.element {
2  dominant-baseline: auto;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません