| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <style> |
| .test-block { |
| border: 2px solid orange; |
| padding: 1px; |
| line-height: 1.2; |
| position: relative; |
| display: inline-block; |
| vertical-align: top; |
| text-decoration-skip-ink: none; |
| } |
| .test-block::before { |
| content: attr(title); |
| font-family: sans-serif; |
| background-color: white; |
| border: 2px solid gray; |
| padding: .2em; |
| line-height: 1; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| .test-block div { |
| display: inline-block; |
| border: 1px solid lime; |
| } |
| .vrl { |
| -webkit-writing-mode: vertical-rl; |
| writing-mode: vertical-rl; |
| } |
| .vlr { |
| -webkit-writing-mode: vertical-lr; |
| writing-mode: vertical-lr; |
| } |
| .sideways { |
| text-orientation: sideways; |
| } |
| .msgothic { font-family: 'MS Gothic'; } |
| .meiryo { font-family: Meiryo; } |
| .noto { font-family: 'Noto Sans CJK JP'; } |
| /* Originally "Yu Gothic" was also included, |
| but the test had inconsistent results on Windows. |
| See: http://crbug.com/690486 */ |
| .large { font-size: 200%; } |
| .under { |
| text-underline-position: under; |
| -moz-text-underline-position: under; |
| -ms-text-underline-position: below; |
| -webkit-text-underline-position: under; |
| } |
| .under-left { |
| text-underline-position: under left; |
| -moz-text-underline-position: under left; |
| -ms-text-underline-position: below; |
| -webkit-text-underline-position: under left; |
| } |
| .under-right { |
| text-underline-position: under right; |
| -moz-text-underline-position: under right; |
| -ms-text-underline-position: below; |
| -webkit-text-underline-position: under right; |
| } |
| </style> |
| <body> |
| <div title="initial" class="test-block"> |
| <div> |
| <div><u>漢efg混植</u></div><br> |
| <div class="msgothic"><u>漢efg混植</u></div><br> |
| <div class="meiryo"><u>漢efg混植</u></div><br> |
| <div class="noto"><u>漢efg混植</u></div><br> |
| <div><u>漢<span class="large">efg</span>混植</u></div><br> |
| </div><br> |
| <div class="vrl"><u>漢efg混植</u></div> |
| <div class="vrl meiryo"><u>漢efg混植</u></div> |
| <div class="vrl sideways"><u>漢efg混植</u></div> |
| <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div> |
| <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div> |
| </div> |
| <div title="lang=zh" lang="zh" class="test-block"> |
| <div> |
| <div><u>漢efg混植</u></div><br> |
| <div class="msgothic"><u>漢efg混植</u></div><br> |
| <div class="meiryo"><u>漢efg混植</u></div><br> |
| <div class="noto"><u>漢efg混植</u></div><br> |
| <div><u>漢<span class="large">efg</span>混植</u></div><br> |
| </div><br> |
| <div class="vrl"><u>漢efg混植</u></div> |
| <div class="vrl meiryo"><u>漢efg混植</u></div> |
| <div class="vrl sideways"><u>漢efg混植</u></div> |
| <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div> |
| <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div> |
| </div> |
| <div title="lang=ja" lang="ja" class="test-block"> |
| <div> |
| <div><u>漢efg混植</u></div><br> |
| <div class="msgothic"><u>漢efg混植</u></div><br> |
| <div class="meiryo"><u>漢efg混植</u></div><br> |
| <div class="noto"><u>漢efg混植</u></div><br> |
| <div><u>漢<span class="large">efg</span>混植</u></div><br> |
| </div><br> |
| <div class="vrl"><u>漢efg混植</u></div> |
| <div class="vrl meiryo"><u>漢efg混植</u></div> |
| <div class="vrl sideways"><u>漢efg混植</u></div> |
| <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div> |
| <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div> |
| </div> |
| <div class="under"> |
| <div title="under" class="test-block"> |
| <div> |
| <div><u>漢efg混植</u></div><br> |
| <div class="msgothic"><u>漢efg混植</u></div><br> |
| <div class="meiryo"><u>漢efg混植</u></div><br> |
| <div class="noto"><u>漢efg混植</u></div><br> |
| <div><u>漢<span class="large">efg</span>混植</u></div><br> |
| </div><br> |
| <div class="vrl"><u>漢efg混植</u></div> |
| <div class="vrl meiryo"><u>漢efg混植</u></div> |
| <div class="vrl sideways"><u>漢efg混植</u></div> |
| <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div> |
| <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div> |
| </div> |
| <div title="under zh" lang="zh" class="test-block"> |
| <div> |
| <div><u>漢efg混植</u></div><br> |
| <div class="msgothic"><u>漢efg混植</u></div><br> |
| <div class="meiryo"><u>漢efg混植</u></div><br> |
| <div class="noto"><u>漢efg混植</u></div><br> |
| <div><u>漢<span class="large">efg</span>混植</u></div><br> |
| </div><br> |
| <div class="vrl"><u>漢efg混植</u></div> |
| <div class="vrl meiryo"><u>漢efg混植</u></div> |
| <div class="vrl sideways"><u>漢efg混植</u></div> |
| <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div> |
| <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div> |
| </div> |
| <div title="under ja" lang="ja" class="test-block"> |
| <div> |
| <div><u>漢efg混植</u></div><br> |
| <div class="msgothic"><u>漢efg混植</u></div><br> |
| <div class="meiryo"><u>漢efg混植</u></div><br> |
| <div class="noto"><u>漢efg混植</u></div><br> |
| <div><u>漢<span class="large">efg</span>混植</u></div><br> |
| </div><br> |
| <div class="vrl"><u>漢efg混植</u></div> |
| <div class="vrl meiryo"><u>漢efg混植</u></div> |
| <div class="vrl sideways"><u>漢efg混植</u></div> |
| <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div> |
| <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div> |
| <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div> |
| </div> |
| </div> |
| </body> |
