<style>
    .vertical-rl { -webkit-writing-mode: vertical-rl; padding: 10px 0; }
    .vertical-lr { -webkit-writing-mode: vertical-lr; }

    .upright { -webkit-text-orientation: upright; color: blue; }
    .sideways { -webkit-text-orientation: sideways; color: brown; }
    .sideways-right { -webkit-text-orientation: sideways-right; color: teal; }

    .hiragino { font-family: "hiragino mincho pron"; }
    .times { font-family: "times"; }
</style>
<body style="font-size: 24px;">
    <!--
        U+653B and U+6BBB are CJK ideographs
        U+2307 doesn't have a separate vertical glyph in Hiragino Mincho ProN
        U+2307 doesn't have a separate vertical glyph in Hiragino Mincho ProN
        U+30FC is a CJK symbol which has a vertical glyph in Hiragino Mincho ProN
               which looks like a rotated version of the horizontal glyphs, with
               the tip pointing to the left
        U+FF1C is a CJK symbol which has a vertical glyph in Hiragino Mincho ProN
               which is identical to the horizontal glyph
        U+FF1D is a CJK symbol which has a vertical glyph in Hiragino Mincho ProN
               which is a rotated version of the horizontal glyph
        U+0034 has a vertical glyph in Hiragino Mincho ProN which is a rotated
               version of the horizontal glyph
    -->

    <div class="hiragino">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>

    <div class="vertical-rl hiragino">
        <div>&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="upright">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="sideways-right">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="sideways">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
    </div>

    <div class="vertical-rl times">
        <div>&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="upright">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="sideways-right">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="sideways">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
    </div>

    <div class="vertical-lr hiragino">
        <div>&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="upright">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="sideways-right">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
        <div class="sideways">&#x653b;&#x6bbb;&#x2307;&#x30fc;&#xff1c;&#xff1d;4</div>
    </div>
</body>