CSSで縦書きに挑戦!writing-modeを使ってみた

  • このエントリーをはてなブックマークに追加

      2020/02/06

CSS Writing Modes Level 3」がW3Cの勧告に至ったことで、CSSの縦書きが国際標準として認められました。そこで、本記事では、CSSで縦書きのデザインをしたい人に向けて、CSS Writing Modes Level 3の基本情報と、中央揃えや改行の方法などについて解説します。

ついに「CSS Writing Modes Level 3」がW3Cの勧告に!

2019年12月10日、W3C (World Wide Web Consortium)はWebで縦書きを可能にする「CSS Writing Modes Level 3」をW3C勧告とすると発表しました。W3C勧告とは、World Wide Webで扱う技術に対しする標準化プロセスが最終段階に至り、工業規格と同等のレベルで標準化されている技術であることを証明するものです。そのため、W3Cの規格を扱う集団ではW3C勧告を受けた技術の開発が盛んに行われます。

今回、 W3C勧告に至った「CSS Writing Modes Level 3」は、Web上の文章などの、テキストを記入する向きの指定や、改行が行われた際の文字送りの方向を指定できます。特に画期的な点は縦書きが標準化された点です。

2004年から行われてきたCSSに縦書きを実装する取り組みの結果、着手から約15年の時を経てついに国際標準として認められました。縦書きは、中国、台湾、モンゴル、日本等のアジアを中心とする、漢字をルーツに持つ言語圏で主に利用される記述方式で、多くのアジア諸国の協力によって「CSS Writing Modes Level 3」の標準化が実現しました。その結果、縦書きで、右から左へと記述する中国語、日本語、韓国語や、左から右へと記述するモンゴル語もCSSで表現可能になりました。

また、設定次第で、同一ページ内に複数の書式を混在させることも可能です。
例えば、日本語では、垂直テキストでもアルファベットのみ横に配置する表現もあり、こうした複雑な表現では画像に頼ることもありましたが、「CSS Writing Modes Level 3」では画像を使用せずに表現することが可能です。

意外と簡単!CSSで縦書きレイアウトに挑戦!

これまでは画像を使用するしかなかった部分がCSSで直接書けると便利です。また、縦書き横書きが混在しても対応していることから多彩な表現ができるようになります。そこで、ここからは実際に「CSS Writing Modes Level 3」に準じたHTML、CSSの書き方を紹介します。

縦書き・横書きの設定

書いていく方向を指定する際に利用するプロパティは「writing-mode」です。
以下で、具体的な値の指定方法とその動作を紹介します。

div.sample {
  writing-mode: horizontal-tb;
  /*
  初期状態で設定されており、もっとも広く利用されている書式です。
  横書きで、改行されると上(top)から下(bottom)向きに文字が並びます。
  */

  writing-mode: vertical-rl;
  /*
  縦書きで、改行されると右(right)から左(left)向きに文字が並びます。
  */

  writing-mode: vertical-lr;
  /*
  縦書きで、改行されると左(left)から右(right)向きに文字が並びます。
  */

  writing-mode: sideways-rl;
  /*
  縦書きで、改行されると右(right)から左(left)向きに文字が並びます。
  また、文字が右に90度回転した状態で表示されます。
  */

  writing-mode: sideways-lr;
  /*
  縦書きで、改行されると左(left)から右(right)向きに文字が並びます。
  また、文字が左に90度回転した状態で表示されます。
  */
}

縦書きの中央揃え

縦書きの中央揃えを実現したい場合の例を簡単に紹介します。

See the Pen
writing-modeデモ – 縦書きの中央寄せ
by FAworks (@faworks)
on CodePen.

「text-align」は、文書の左揃え、中央揃え、右揃えを指定できるプロパティです。例のように「center」を設定すると中央揃えとなります。縦書きは、上で紹介したとおり「writing-mode」プロパティを利用して設定することが可能です。「vertical-rl」は縦書きで、改行すると右から左方向に文字が並びます。

縦書きの右寄せ

次に縦書きの右寄せを実現したい場合の例を紹介します。

See the Pen
writing-modeデモ – 縦書きの右寄せ
by FAworks (@faworks)
on CodePen.

縦書きの右寄せですから、先ほどの「text-align」の値に「right」を設定します。
縦書きについては「writing-mode」プロパティで「vertical-rl」を設定する点は変わりません。

縦書きの左寄せ

最後に縦書きの左寄せを実現したい場合の例を紹介します。

See the Pen
writing-modeデモ – 縦書きの左寄せ
by FAworks (@faworks)
on CodePen.

今回は左寄せにしたいので、「text-align: left;」と書きます。縦書きですから、 「writing-mode:」の値は「vertical-rl」のままです。

完成した縦書き・横書き混在レイアウトのCSSとHTML

最後に、今までのおさらいとして記事で紹介したプロパティ値を設定した場合の挙動と、縦書き・横書きが混在する書き方の例を紹介します。

See the Pen
writing-modeデモ – 縦書き・横書き混在
by FAworks (@faworks)
on CodePen.

こちらの「first-text」は横書きで左から右へと流れる一般的な文章です。それに対して、「second-text」「third-text」にはそれぞれ縦書きの「vertical-rl」と「vertical-lr」を設定しています。両方縦書きですが、「vertical-rl」は一般的な小説と同じで改行すると左へとずれていきます。一方、「vertical-lr」は改行すると右へと流れていきます。

「sideways」を設定した「fourth-text」「fifth-text」は文字の表示される方向が逆ですが、90度回転していることがわかります。
「sixth-text」は「vertical-rl」ですから通常の小説と同じ方向ですが、「text-combine-upright」プロパティを設定することで垂直テキストの中の横文字を縦書きにする際に使用します。ここでは値に「digits 2」を指定しているので、2桁以下の数字を1マスにまとめて垂直テキスト内に水平に表示します。この部分を4とすれば4桁の数字が水平になります。ただし、2020年1月現在でまだ対応していないブラウザが多数です。

英数字を縦書きにするには「text-orientation」プロパティを使用します。こちらに「upright」を設定すると英語のアルファベットが90度回転して水平方向で表示されます。

まとめ

HTMLとCSSであれば特別な環境構築もいりませんので、実際に練習してみるのもよいでしょう。ただし、各ブラウザでの対応状況によってはうまく反映されないこともあります。練習する前に、CSSの縦書きが表示されるブラウザかどうかをチェックしておきましょう。

 -Tech, デザイン, プログラミング

FAworksではプロのコンサルタントが案件をお探しします

  関連記事

NGINXのスレッドプールがパフォーマンスを9倍にする!

NGINXのパフォーマンスをスレッドプールで9倍にする

目次 はじめに問題スレッドプールベンチマーキングそれでも、魔法の解決策というわけではないスレッドプー

待ち遠しい次の祝日がコマンドラインでわかる!‐cal‐ 端末にカレンダーを表示しよう

待ち遠しい次の祝日がコマンドラインでわかる!‐cal‐ 端末にカレンダーを表示しよう

これは“コマンドライン・マンデー”シリーズの最初の投稿です。このシリーズでは、毎週月曜日に使えるコマ

MySQL Cluster―MySQLはいかに2億QPSのスケーリングを実現したか

この記事は、オラクル社MySQL主任プロダクトマネージャ、アンドリュー・モルガン氏からのゲスト投稿で

エンジニア向け!!新しいプログラミング言語を学ぶ時のサイト一覧

エンジニア向け!!新しいプログラミング言語を学ぶ時のサイト一覧

最近ではプログラミングスキルが世界で注目されており、就職や転職においても十分なスキルの一つとなってい

GolangをJavaと比べてみた~Java愛好家がGoの機能を見たときの第一印象~

GolangをJavaと比べてみた~Java愛好家がGoの機能を見たときの第一印象~

最初に断っておきたいのだが、私はGoのエキスパートではない。2~3週間前にGoを勉強し始めたばかりな

V8はどうやってJavaScriptコードを最適化しているのか?

僕の過去記事で、NodeJSがなぜ速いかについて話した。今日は、V8について話したいと思う。 多分、

空の上でも仕事ができちゃう!航空機ITサービス事情~ANA・JAL編~

by abdallahh 皆さん旅行は好きですか? 毎日仕事を頑張ったご褒美に南の島へ・・なんて思っ

全部無料!デザインの作業効率が10倍上がるPhotoshopプラグインまとめ(2016年版)

全部無料!デザインの作業効率が10倍上がるPhotoshopプラグインまとめ(2016年版)

デザイナーにとって、一度使い始めるともう手放せないPhotoshop。デフォルトで使っていても便利な

PHPエンジニアのキャリアパスと年収の遷移モデル

PHPはWeb開発言語の中でも、1995年から人気が衰えない言語です。主に動的なWebページ制作等に

1家に1人!旦那がエンジニアだと便利な5つのこと

よく便利なものに対して「1家に1台」とか言いますよね。 まさしくエンジニアはその「1家に1人」の便利