用途
新着
履歴
分類

HTML 文字の向きを変える

HTML 文字の向きを変える
右から左の文章を逆の向きに変えるサンプルです。

日本語では通常右から左に文章を書きますが、文中に多言語が混じったり、昔の日本語表記を一部したい時などに使うサンプルです。(滅多にありませんが)

グローバルなHTMLではそのためのタグがあります。

HTML

<p><bdo dir="ltr">ドレミファソラシド</bdo></p>
<p><bdo dir="rtl">ドレミファソラシド</bdo></p>

実行結果

ドレミファソラシド

ドレミファソラシド

HTMLでは通常の右から左の記述ですが、bdo dir="rtl"で囲うと実行結果は逆さまになります。

ltrの指定はデフォルトなので、指定しなくても左から右です。

メリットはブラウザや検索の解釈として、読み方で解釈されること。

回文ではなく、「ドレミファソラシド」で検索するとヒットするということです。

ただし、注意点は小文字も1文字として、逆さまになること。

上記のサンプルでは「ファ」が「ソァ」になっています。

なお、ltrとrtlで指定できるのですが、縦書きにも適応できます。

ドレミファソラシド

ドレミファソラシド

HTML


<p class="demo_tategaki">ドレミファソラシド</p>
<p class="demo_tategaki"><bdo dir="rtl">ドレミファソラシド</bdo></p>

CSS


<style>
.demo_tategaki{
writing-mode: vertical-rl;
}
</style>
公開 2024-06-02 18:39:27
更新 2024-06-04 18:04:00
このページの二次元コード
HTML 文字の向きを変える

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2024 kipure
Top