Search code examples
javascripthtmlcsstext-alignmenttext-align

Justify the last line of a block element (p, div) when using Japanese tategaki (writing-mode: tb-rl)

I need to be able to justify the last line of a p element. I tried the solution in the following question

Justify the last line of a div?

but unfortunately that does not work when the <DIV> writing-mode style is tb-rl (top to bottom/right to left) and the text is Japanese. Has anyone had a similar need and found a solution? Here's a sample of the HTML I am currently using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">`
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>p {text-align:justify;margin:0px; padding-right:7px}</style>
  </head>
      <body style='margin:6px'>
        <DIV style='height: 444px; width: 320px; writing-mode: tb-rl; direction: ltr; -ms-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; font-family:"Hiragino Mincho ProN"; font-size:16px'>
      <p style='margin-right: 0px; margin-left: 0px;'>　</p><p>　わたしたちは今日、ミチコの手を<ruby>離<rt>はな</rt></ruby>し、ミチコとは二度と会わないと決めたのだけれど、ひょっとして見捨てられてしまうのはわたしたちのほうなんじゃないだろうか。今日ここで起きたことはすべて、ミチコと別れることでさえ、ひょっとしてミチコにとってはとっくに計算済みの出来事だったんじゃないだろうか。</p>
      <p>　そのときふと気づいた。ミチコの<ruby>眼<rt>まな</rt></ruby><ruby>差<rt>ざ</rt></ruby>しが意味するものに。あれは<ruby>哀<rt>あわ</rt></ruby>れみ。ミチコはここにいるわたしたちを哀れんでいる。今日ここにいること、ここで起きたこと、いまこの瞬間この世の中で起きているあらゆることを哀れみ、そして</p>
    </DIV>
  </body>
</html>
Solution

  • You need to use a slight variation of the method I posted for justifying horizontal text.

    Instead of setting the width of the :after pseudo element to 100%, set the height to 100%.

    CSS:

    p {
    margin: 0;
    margin-left: -1.8em; /* remove space added by p:after (adjust) */
}

/* justify last line of text */
p:after {
    content: "";
    display: inline-block;
    height: 100%;
}

/* set writing direction on container */
div.page {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align: justify;
    text-justify: inter-ideograph; /* supported by IE */
}

    HTML:

    <div class="page">
    <p>あれは<ruby>哀<rt>あわ</rt></ruby>れみ。ミチコはここにいるわたしたちを哀れんでいる。</p>
</div>

    The :after pseudo element adds extra space after the paragraphs due to its line-height (you can't remove the line-height just from it alone as it's treated as just another piece of text within the p tag). To compensate for this you need to add a negative left margin to the paragraphs.