text-underline-position-vertical-ja.html (1110B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property"> 6 <link rel="match" href="reference/text-underline-position-vertical-ja-ref.html"> 7 <style> 8 @font-face { 9 font-family: halt-font; 10 src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt-min.otf'); 11 } 12 body { writing-mode: vertical-rl; font-family: Arial; } 13 .underline { text-decoration: underline; font-family: halt-font; font-language-override: "JAN"; } 14 .overline { text-decoration: overline; font-family: halt-font; font-language-override: "JAN"; } 15 </style> 16 </head> 17 <body lang="ja"> 18 <div lang="en">In vertical writing mode with lang=ja, default overline will be same as underline (lang=en). However, when we set text-underline-position to "under left" it should be shifted.</div> 19 <div class="underline" style="text-underline-position: under left">国国国国</div> 20 <div class="overline">国国国国</div> 21 </body> 22 </html>