Vertical writing

HTML

<script src="https://s3-ap-northeast-1.amazonaws.com/skywardslab/src/modernizr/modernizr.custom.min.1301009.js"></script>
<div class="mod-verticaltxt mod-sample mod-text-01">
<p>竹富島の夜の風景。静かな通りをやわらかく照らす街灯は、都会にはないとてもあたたかな光。ザッ、ザッという白砂の音を楽しみながら歩いていると、虫たちや牛の鳴く声にまざり、三線の音が聴こえてきた。民宿でゆんたくをする人達だろうか、それとも地元沖縄の人だろうか。ずっと住んでいたくなるような街がここ竹富島にある。竹富島に泊まるからこそ味わえた暖かさ。</p>
</div>

SCSS

.mod-verticaltxt{
    writing-mode: tb-rl;
    -moz-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.mod-sample{
    .writing-mode &{
        width: 100%;    // Safariはpxで指定しないと意図通りにならない。
        height: 300px;
    }
}

.mod-text-01{
    .writing-mode &{
        p{
            text-indent: 1em;
            text-align: justify;
            text-justify: inter-ideograph;
        }
    }
}

JavaScript

if (Modernizr.testAllProps('writingMode')) {
    document.getElementsByTagName("html")[0].className = "writing-mode";
}