Чтобы не было вращения букв в вертикальном режиме в браузерах на iOS и MacOS, оказывается, нужно явно указывать "text-orientation: sideways".
Данную таблицу можно использовать для проверки работы браузера:
| text-orientation: writing-mode: |
mixed | upright | sideways | sideways-right |
|---|---|---|---|---|
| horizontal-tb | ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
| vertical-rl | ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
| vertical-lr | ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
ᡐᡆᡑᡆ |
Исходный код:
<table border="1" bordercolor="white" cellspacing="0">
<tbody>
<tr>
<th>text-orientation:<br />writing-mode:</th>
<th>mixed</th>
<th>upright</th>
<th>sideways</th>
<th>sideways-right</th>
</tr>
<tr>
<th>horizontal-tb</th>
<td><p style="text-orientation: mixed; writing-mode: horizontal-tb;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: upright; writing-mode: horizontal-tb;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: sideways; writing-mode: horizontal-tb;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: sideways-right; writing-mode: horizontal-tb;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
</tr><tr>
<th>vertical-rl</th>
<td><p style="text-orientation: mixed; writing-mode: vertical-rl;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: upright; writing-mode: vertical-rl;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: sideways; writing-mode: vertical-rl;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: sideways-right; writing-mode: vertical-rl;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
</tr>
<tr>
<th>vertical-lr</th>
<td><p style="text-orientation: mixed; writing-mode: vertical-lr;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: upright; writing-mode: vertical-lr;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: sideways; writing-mode: vertical-lr;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
<td><p style="text-orientation: sideways-right; writing-mode: vertical-lr;">ᡐᡆᡑᡆ<br />ᡋᡅᡔᡅᡎ</p></td>
</tr>
</tbody>
</table>
Собственно, нам для Тодо и Худам бичиг нужно использовать:
text-orientation: sideways;
writing-mode: vertical-lr;.
