Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<bdo>

<bdo> は HTML の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<bdo>
≤15
12
10
≤4
18
≤3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<p>Normal: ABC</p>
<p>Right to left: <bdo dir="rtl">ABC</bdo></p>

ライブデモ

Textdirection. topwrite

Dir attribute in RTL / LTR forcedspecified.text. Displaydirection confirm.

プレビュー全画面表示

Fliptexteffect

Bdo usingtextflip. visualeffect.

プレビュー全画面表示

multi-languagetext. directioncontrol

differentword language mixed. directioncontrol.

プレビュー全画面表示

実務での使いどころ

  • <bdo> の活用

    <bdo> は HTML の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク