1135361-ruby-justify-1.html 979 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Test for bug 1135361</title>
  6. <style>
  7. body {
  8. font: 48px sans-serif;
  9. }
  10. div {
  11. display: inline-block;
  12. width: 3em;
  13. border: 1px solid silver;
  14. padding: .5em;
  15. }
  16. p {
  17. writing-mode: vertical-rl;
  18. -webkit-writing-mode: vertical-rl;
  19. -ms-writing-mode: tb-rl; /* old syntax. IE */
  20. text-orientation: upright;
  21. -webkit-text-orientation: upright;
  22. height: 4ch;
  23. text-align: justify;
  24. text-align-last: justify;
  25. }
  26. rt {
  27. font-size: 20%; /* ensure ruby is small enough that it won't affect inline spacing */
  28. }
  29. .t {
  30. color: transparent;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div>
  36. <p>
  37. <ruby>東<rt>to</rt></ruby><ruby class="t">京<rt>kyo</rt></ruby>
  38. </p>
  39. </div>
  40. <div>
  41. <p>
  42. <ruby class="t">東<rt>to</rt></ruby><ruby>京<rt>kyo</rt></ruby>
  43. </p>
  44. </div>
  45. </body>
  46. </html>