text-orientationとは？CSSのtext-orientationでテキストの向きを指定する方法

今回はHTMLを書く上で欠かせないテキストの向きの変え方のお話。

CSSの【text-orientation】プロパティで思い通りに文字の向きを変えたいと思っても・・初心者のうちは

うまくテキストの向きの調整ができない！！
向きの設定をしても、うまく反映されない！！

というふうに、悩んだ経験もあるはず。

今回は、そんなCSSの【text-orientation】プロパティに関する

・基本的な使い方
・テキスト向きの変え方

について説明します。

目次 [非表示]

1 【text-orientation】とは
2 【text-orientation】の基本的な使い方
- 2.1 【text-orientation】の使い方
- 2.2 全ての言語で対応だが、一部のブラウザでは非対応
3 まとめ

【text-orientation】とは

【text-orientation】の読み方

CSS の【text-orientation】プロパティは、テキストオリエンテーションと読み、テキストの向きを設定します。

【text-orientation】の説明

このプロパティは縦書きのテキスト (writing-mode が vertical-rl または vertical-lr などの縦書きを指定した場合の文字の表示方向) でのみ効果があります。

これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。

【text-orientation】で利用できる値

【text-orientation】では以下の値を使うことができます。

値	説明
mixed	横書きのみの文字を右に 90°回転させ、縦書き文字のグリフは自然にレイアウトされます。
upright	横書きのみの文字を、縦書き文字と同様に自然にレイアウト (正立) させます。すべての文字が ltr (左から右へ) で書かれているものとみなすので注意してください。
sideways	全行を横書きで書いて 90°回転したようにレイアウトします。 writing-mode が vertical-rl の場合は右へ回転、vertical-lr の場合は左へ回転します。
sideways-right	互換性を維持するためのキーワードであり、`sideways` の別名です。

対応ブラウザ

対応ブラウザは以下の通りです。

■　text-orientation

PC用ブラウザ	対応状況
Chrome	完全対応
Edge	完全対応
Firefox	完全対応
Internet Explorer	非対応
Opera	完全対応
Safari	完全対応
スマートフォン用ブラウザ	対応状況
Android webview	完全対応
Android版Chrome	完全対応
Android版Firefox	完全対応
Android 版 Opera	完全対応
iOS版Safari	完全対応
Samsung Internet	完全対応

■　sideways

PC用ブラウザ	対応状況
Chrome	非対応
Edge	非対応
Firefox	完全対応
Internet Explorer	非対応
Opera	非対応
Safari	非対応
スマートフォン用ブラウザ	対応状況
Android webview	非対応
Android版Chrome	非対応
Android版Firefox	完全対応
Android 版 Opera	非対応
iOS版Safari	非対応
Samsung Internet	非対応

【text-orientation】の基本的な使い方

【text-orientation】の使い方

ここでは、【text-orientation】プロパティの基本的な使い方について説明していきます。

各属性値の設定の仕方も合わせて説明していきます。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="text-orientation.css">
  </head>

<div class="flex">

  <h5>mixed</h5>
  <div class="box mixed">
    ABCDEFG HIJKLMN OPQRSTU VWXYZ<br>あいうえお<br>かきくけこ<br>さしすせそ<br>たちつてと<br>なにぬねの<br>はひふへほ
  </div>

  <h5>upright</h5>
  <div class="box upright">
    ABCDEFG HIJKLMN OPQRSTU VWXYZ<br>あいうえお<br>かきくけこ<br>さしすせそ<br>たちつてと<br>なにぬねの<br>はひふへほ
  </div>

  <h5>sideways</h5>
  <div class="box sideways">
    ABCDEFG HIJKLMN OPQRSTU VWXYZ<br>あいうえお<br>かきくけこ<br>さしすせそ<br>たちつてと<br>なにぬねの<br>はひふへほ
  </div>

</div>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<h5>mixed</h5>

ABCDEFG HIJKLMN OPQRSTU VWXYZ<br>あいうえお<br>かきくけこ<br>さしすせそ<br>たちつてと<br>なにぬねの<br>はひふへほ

</div>

<h5>upright</h5>

ABCDEFG HIJKLMN OPQRSTU VWXYZ<br>あいうえお<br>かきくけこ<br>さしすせそ<br>たちつてと<br>なにぬねの<br>はひふへほ

</div>

<h5>sideways</h5>

ABCDEFG HIJKLMN OPQRSTU VWXYZ<br>あいうえお<br>かきくけこ<br>さしすせそ<br>たちつてと<br>なにぬねの<br>はひふへほ

</div>

</html>

CSS

.flex {
  display: flex;
}
.box {
  padding: .5rem;
  margin-right: .5rem;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Consolas;
  writing-mode: vertical-rl;
}
.mixed { text-orientation: mixed; }
.upright { text-orientation: upright; }
.sideways { text-orientation: sideways; }

.flex {

display: flex;

}

.box {

padding: .5rem;

margin-right: .5rem;

border: 1px solid #ccc;

background-color: #fff;

font-family: Consolas;

writing-mode: vertical-rl;

}

.mixed { text-orientation: mixed; }

.upright { text-orientation: upright; }

.sideways { text-orientation: sideways; }

全ての言語で対応だが、一部のブラウザでは非対応

すでに説明しましたが、CSSプロパティ｢text-orientation｣は全ての言語で対応ですが、ブラウザによっては反映されないこともあり、言語によっては表記のされ方が異なるのでご注意ください。

下記の例をご参照ください。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="text-orientation_1.css">
  </head>

<div>
  <p>もしあなたと結婚したら<br/>世界で1番愛します。</p>
</div>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<div>

<p>もしあなたと結婚したら<br/>世界で1番愛します。</p>

</div>

</html>

CSS

p {
    padding: 20px;
    border: 2px solid #000;
    writing-mode: vertical-rl; /* 縦書きにする */
    text-orientation: upright; /* 英数字の向きを縦にする */
}

p {

padding: 20px;

border: 2px solid #000;

writing-mode: vertical-rl; /* 縦書きにする */

text-orientation: upright; /* 英数字の向きを縦にする */

}

FireFoxで表示

IEで表示

まとめ

いかがでしたか？

今回は【text-orientation】プロパティの基本的な使い方を説明しました。

これで、【text-orientation】プロパティを使って、文字の向きを自在に変更できますね！

英文で作成したWebコンテンツの表現の仕方を大きく変えることができます。

閲覧者が見やすいように、工夫してみてください！！

この記事がお役に立てれば幸いです。

参考文献：https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。