私は1才です。
私は10才です。
私は100才です。
私は明治30年生まれです。
私は1901年生まれです。
縦方向の中にd-yokoクラスで、横方向に書けますという感じです。
WordPress テーマ Raindropsでの縦中横のチャレンジです。
おかしな表示になっている場合は、リロードしてみてください。Chromeブラウザで、d-yokoクラスが、縦方向に並んで、崩れることがあるみたいです。Chromeでのリロードは、control+shift+Rで行ってみてください。
HTML
<div class="centered"> 私は<span class="d-yoko tatetyuyoko-1">1</span>才です。 私は<span class="d-yoko tatetyuyoko-2">10</span>才です。 私は<span class="d-yoko tatetyuyoko-3">100</span>才です。 私は<span class="d-yoko tatetyuyoko-2-kanji">明治</span><span class="d-yoko tatetyuyoko-2">30</span>年生まれです。 私は<span class="d-yoko tatetyuyoko-4">1901</span>年生まれです。 </div> <!--[raindrops class="writing-mode-mix"]-->
CSS
.tatetyuyoko-2{
letter-spacing:-0.1em;
-moz-font-feature-settings: "halt";
-webkit-font-feature-settings: "halt";
font-feature-settings: "halt";
}
.tatetyuyoko-3{
letter-spacing:-0.2em;
-moz-font-feature-settings: "twid";
-webkit-font-feature-settings: "twid";
font-feature-settings: "twid";
}
.tatetyuyoko-4{
letter-spacing:-0.1em;
transform: scaleX(.8);
-moz-font-feature-settings: "qwid";
-webkit-font-feature-settings: "qwid";
font-feature-settings: "qwid";
}
.tatetyuyoko-2-kanji{
transform: scaleX(.7);
-moz-font-feature-settings: "halt";
-webkit-font-feature-settings: "halt";
font-feature-settings: "halt";
}