1

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>
Community
  • 1
  • 1
Peter Jacobs
  • 1,657
  • 2
  • 13
  • 29

2 Answers2

1

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.

Kristin
  • 899
  • 7
  • 5
0

There is an error in your CSS styling. direction: ltr should be direction: rtl. Try changing this and let me know if it works.

JoeJ
  • 920
  • 1
  • 6
  • 17
  • Thanks for your suggestion, but this causes some other issues. What I see after changing it is the paragraph indentations occurring incorrectly at the bottom of the page instead of the top. Also, the end of the first p element is justified at the bottom, but not the top. Lastly, strangely enough, the period at the end of the first p tag ends up at the top of the text when it should be at the bottom of the rest of the text. Perhaps some more CSS styling needs to be added or changed? It looks like the bottom is swapped with the top in a way. – Peter Jacobs Jun 25 '12 at 17:04
  • Do you have a screenshot or a live page I can see? – JoeJ Jun 26 '12 at 12:39
  • I've uploaded the sample html files http://peterjacobs.megurosystems.com/sample_rtl.html and http://peterjacobs.megurosystems.com/sample_ltr.html – Peter Jacobs Jun 26 '12 at 14:24
  • I've sat and played with the live pages for nearly an hour now, and I still can't get it to work. If you ever work it out, let me know how you get on... – JoeJ Jun 27 '12 at 18:08
  • Yeah, it's a tricky problem indeed. At any rate, thanks a lot for trying. – Peter Jacobs Jun 27 '12 at 22:55
  • Think I found a solution. Have a look at http://peterjacobs.megurosystems.com/mac-tategaki.html – Peter Jacobs Jun 29 '12 at 04:08