縦書き学習コンテンツを実現する際に利用した縦書き CSS プロパティとその奥深さ - スタディサプリ Product Team Blog

こんにちは。スタディサプリで Web Engineer をしている@indigolainです。最近はフロントエンドの割合を高めに開発をしています。 今回はスタディサプリで提供している学習コンテンツの中でも特徴的な縦書き学習コンテンツに関して、それを実現する上で利用した CSS プロパティと、その奥深さを紹介したいと思います。 なぜ Web で縦書き スタディサプリではユーザが普段目にするであろう学習教材に近い形式で学習コンテンツを提供するために、学習コンテンツ作成者が問題を HTML ライクな形式である程度自由な表現で入稿し、ユーザに提供できるようにしています。 特に国語のコンテンツなどはこれに従う形で、入稿次第で一部の学習コンテンツを縦書きとして表現できるようにしています。 どうやって縦書きを実現しているか 縦書きの学習コンテンツを web で提供したい場合、縦書きにしたい要素に対して、

[t_f_m]

" ＜ (\uFF1C) ＞ (\uFF1E)という記号は Safari では 半角全角で表示が違うのに対して、 Chrome だと同じ表示になるなど、ブラウザ間での記号の取り扱いが異なってきてしまうので、要注意となります"