2011-03-19

CSS3のプロパティ、text-combine

CSS3で規定されている、text-combineは、縦中横を実現するプロパティである。以下のように使う。ただし、例によってwebkitのベンダープレフィクスを使用した。Windows上のChromeで動作を確認している。

<p style="
    writing-mode : vertical-rl ;
    -webkit-writing-mode : vertical-rl ;
    font-family : '@MS 明朝' ;
    height : 10em ;
">
平成<span style="text-combine : horizontal ; -webkit-text-combine : horizontal ;">20</span>年
<span style="text-combine : horizontal ; -webkit-text-combine : horizontal ;">4</span>月
<span style="text-combine : horizontal ; -webkit-text-combine : horizontal ;">16</span>日に
</p>

平成20416日に

text-combineを使わない例は、以下の通り。

平成20416日に

CSS Writing Modes Module Level 3

No comments: