A keyword that automatically sets margins or positions on the line’s ending side, adapting naturally to the text direction of each language.
文字が流れる向きを基準に、「行の終わり側(右や左)」を自動で判断して位置や余白をつけられるキーワード。
英語でもアラビア語でも、言語に合わせて自然に見た目を調整できる。
inline-end は、テキストの「行の終わり側」を指すためのキーワードです。
これを使うと、左から右に書く言語(英語や日本語など)でも、右から左に書く言語(アラビア語など)でも、自然にその言語の“行の終わり側”を指定できます。
つまり、「右端」や「左端」といった“見た目の方向”ではなく、“書く方向”を基準にして位置を決めるための考え方です。
たとえば、ある要素の右側に余白をつけたいとき、英語のように左→右の言語なら右側になりますが、アラビア語のように右→左の言語では左側になります。
そんなとき、margin-inline-end を使えば、言語の向きが変わっても自動で正しい側に余白をつけてくれます。
こうすることで、国や言語が違ってもCSSを書き直す必要がなくなり、国際対応がしやすくなります。
CSS
.box {
margin-inline-end: 20px;
}
この例では、「行の終わり側」に20pxの余白がつきます。
英語のページなら右側に、アラビア語のページなら左側に余白がつくという動きをします。
このように、inline-end は「左右」ではなく「行方向の終わり」を意味する柔軟な指定方法です。