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

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

      2020/08/31

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ではプロのコンサルタントが案件をお探しします

  関連記事

「AIって何?」なんて今さら聞けない!最低限抑えておきたいこれからの技術トレンド4つ(最新版)

【関連記事】 ❏これから必ず伸びる!最低限抑えておきたい技術トレンド3つ(2015年度版) ❏海外エ

【比較表あり】非エンジニアの人にも知ってほしい。エンジニアに優しいチャット・コミュニケーションツールまとめ

目次 エンジニアに合ったコミュニケーションツールSkypeだとここが辛い1.通知が全部来る2.情報が

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

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

IT系妻によるライフハック術11選!

さっそくですが、あなたに質問です。 洗濯を洗濯板でやってますか? 掃除をほうきとちりとりでやってます

React/Fluxにおける問題とReducerが切り開く道

私がReact/Fluxアプリケーションを書いてきて、もう1年になる。Flux開発の1年を振り返って

webを利用してイケてるガールにデプロイする方法

webを利用してイケてるガールにデプロイする方法

エンジニアに出会いはない。 彼らが業務で関わりを持つのは、チームのメンバーとPCのみ。 そしてそのメ

未経験からフリーエンジニアになるためのポイント

【関連リンク】 ❏フリーエンジニアに必要なプログラミング以外のスキル ❏フリーエンジニアの仕事にはど

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

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

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

あなたも聞いてる?テック系ポッドキャスト3選

あなたも聞いてる?テック系ポッドキャスト3選

最近、エンジニアの間でにわかに話題になっているのが「ポッドキャスト配信」です。エンジニア自身が時事的

aerospike

【翻訳】Aerospike on Amazon EC2 で 100万TPS をたった 1.68 ドル/時 で実現する方法

原文: http://highscalability.com/blog/2014/8/18/1-ae