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:

Post a Comment

You can use some HTML elements, such as <b>, <i>, <a>, also, some characters need to be entity referenced such as <, > and & Your comment may need to be confirmed by blog author. Your comment will be published under GFDL 1.3 or later license with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.