CSS の縦書きで数字が横向きになってイライラしたら

## `text-combine-upright: all;` 
真っ直ぐ立てるように道を示してやりましょう。

```html
<div>デーモン小暮閣下の生年月日は紀元前<span>98038</span>年<span>11</span>月<span>10</span>日</div>
```

```css
div {
  writing-mode: vertical-rl;
}
span {
  text-combine-upright: all;
}
```

| 😡 | 🤗 | 
|:-----------:|:------------:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/a3cc2e20-e5f4-d5d1-6e98-5ba396ccbde2.png)       | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/6e47030a-5036-0232-653b-1c6de1a60242.png)       | 

### `text-combine-upright` プロパティ
一文字分（1em）の空間に挿入する文字の組み合わせを定義する事ができます。
値には `none`（初期値） / `all` / `digits <integer>?` を入れる事ができますが、`digits <integer>?`はモダンブラウザではサポートされていません。

今回は`<span>`タグに`text-combine-upright: all;`を指定したため、`<span></span>`で囲まれたテキストを1em分の空間に縦向きに収める事ができました。
デーモン閣下もにっこりですね🤗

## 青空文庫を縦書きで読みたい
だって日本人だから！

![www.aozora.gr.jp_cards_001265_files_46817_24670.html (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/5654a244-8c5e-415c-9642-7d5ea6bf17dd.png)
引用: https://www.aozora.gr.jp/cards/001265/files/46817_24670.html
↓

```css
body {
  writing-mode: vertical-rl;
}
```

![www.aozora.gr.jp_cards_001265_files_46817_24670.html (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/95dbdabf-f3ba-ca0e-1362-790ca07c8092.png)

![www.aozora.gr.jp_cards_001265_files_46817_24670.html (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/108a240a-57f8-825b-f71b-a1e9e81c9c16.png)
おとなってやっぱり変だ😡
半角英数を span 囲んで `text-combine-upright: all;` 😡😡😡
↓

```html
<span class="caption">〈しょうわくせい<span class=“otachinasai”>B612</span>の王子くん。〉</span><br>
<br>
　といっても、大げさにいうほどのことでもない。ごぞんじのとおり、ちきゅう、もくせい、かせい、きんせいみたいに名まえのある大きな星のほかに、ぼうえんきょうでもたまにしか見えないちいさなものも、なん<span class="otachinasai">10000</span>ばいとある。たとえばそういったものがひとつ、星はかせに見つかると、ばんごうでよばれることになる。〈しょうわくせい<span class="otachinasai">325</span>〉というかんじで。<br>
　ちゃんとしたわけがあって、王子くんおすまいの星は、しょうわくせい<span class="otachinasai">B612</span>だと、ぼくはおもう。前にも、<span class="otachinasai">1909</span>年に、ぼうえんきょうをのぞいていたトルコの星はかせが、その星を見つけている。
```
```css
.otachinasai {
   text-combine-upright: all;
}
```
![www.aozora.gr.jp_cards_001265_files_46817_24670.html (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/d440a75c-a7ef-2087-f11b-7bd976398e20.png)
違う、そうじゃない🙃
↓

```html
<span class="caption">〈しょうわくせい<span class="otachinasai">B</span><span class="otachinasai">6</span><span class="otachinasai">1</span><span class="otachinasai">2</span>の王子くん。〉</span><br>
<br>
　といっても、大げさにいうほどのことでもない。ごぞんじのとおり、ちきゅう、もくせい、かせい、きんせいみたいに名まえのある大きな星のほかに、ぼうえんきょうでもたまにしか見えないちいさなものも、なん<span class="otachinasai">1</span><span class="otachinasai">0</span><span class="otachinasai">0</span><span class="otachinasai">0</span><span class="otachinasai">0</span>ばいとある。たとえばそういったものがひとつ、星はかせに見つかると、ばんごうでよばれることになる。〈しょうわくせい<span class="otachinasai">3</span><span class="otachinasai">2</span><span class="otachinasai">5</span>〉というかんじで。<br>
　ちゃんとしたわけがあって、王子くんおすまいの星は、しょうわくせい<span class="otachinasai">B</span><span class="otachinasai">6</span><span class="otachinasai">1</span><span class="otachinasai">2</span>だと、ぼくはおもう。前にも、<span class="otachinasai">1</span><span class="otachinasai">9</span><span class="otachinasai">0</span><span class="otachinasai">9</span>年に、ぼうえんきょうをのぞいていたトルコの星はかせが、その星を見つけている。
```
```css
.otachinasai {
   text-combine-upright: all;
}
```
![www.aozora.gr.jp_cards_001265_files_46817_24670.html (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/b125deb2-e985-2666-560c-31ee971aae4e.png)

一つ一つ丁寧に`<span>`タグで囲みました。
でも流石に全部をいちいち囲むなんてやっていられない😡


### `text-orientation` プロパティ
行内のテキストの向きが設定できるプロパティです。
IE11には対応していないため、IE11を使用している場合はIE11を使用するのはやめましょう。
`text-orientation: upright;`を使用すると、縦書きの際に横書きのみの文字（今回だと半角英数）を正立に配置してくれます。

```html
<span class="caption">〈しょうわくせいB612の王子くん。〉</span><br>
<br>
　といっても、大げさにいうほどのことでもない。ごぞんじのとおり、ちきゅう、もくせい、かせい、きんせいみたいに名まえのある大きな星のほかに、ぼうえんきょうでもたまにしか見えないちいさなものも、なん10000ばいとある。たとえばそういったものがひとつ、星はかせに見つかると、ばんごうでよばれることになる。〈しょうわくせい325〉というかんじで。<br>
　ちゃんとしたわけがあって、王子くんおすまいの星は、しょうわくせいB612だと、ぼくはおもう。前にも、1909年に、ぼうえんきょうをのぞいていたトルコの星はかせが、その星を見つけている。

```

```css
body {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
```
![www.aozora.gr.jp_cards_001265_files_46817_24670.html (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174446/ed00368e-5d2b-3f22-f6da-1e144da095fa.png)


簡単に一文字ずつ縦向きできたので、これで心安らかにして読めますね🤗

## 参考
https://developer.mozilla.org/ja/docs/Web/CSS/text-combine-upright
https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation