Fatal编程技术网
  • javascript/
  • Javascript 使用日语tategaki（写入模式：tb rl）时，对齐块元素（p，div）的最后一行

Javascript 使用日语tategaki（写入模式：tb rl）时，对齐块元素（p，div）的最后一行

javascript html css

Javascript 使用日语tategaki（写入模式：tb rl）时，对齐块元素（p，div）的最后一行,javascript,html,css,text-alignment,text-align,Javascript,Html,Css,Text Alignment,Text Align,我需要能够证明p元素的最后一行是正确的。我在下面的问题中尝试了这个解决方案 但不幸的是，当写入模式样式为tb rl（从上到下/从右到左）且文本为日文时，这不起作用。有没有人有过类似的需求并找到了解决方案？下面是我目前使用的HTML的一个示例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">` <html xmlns="http://

我需要能够证明p元素的最后一行是正确的。我在下面的问题中尝试了这个解决方案

但不幸的是，当
写入模式
样式为
tb rl
（从上到下/从右到左）且文本为日文时，这不起作用。有没有人有过类似的需求并找到了解决方案？下面是我目前使用的HTML的一个示例


<!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>



`
`
p{文本对齐：对齐；边距：0px；右填充：7px}

　
 　わたしたちは今日、ミチコの手を離はなし、ミチコとは二度と会わないと決めたのだけれど、ひょっとして見捨てられてしまうのはわたしたちのほうなんじゃないだろうか。今日ここで起きたことはすべて、ミチコと別れることでさえ、ひょっとしてミチコにとってはとっくに計算済みの出来事だったんじゃないだろうか。

　そのときふと気づいた。ミチコの眼まな差ざしが意味するものに。あれは哀あわれみ。ミチコはここにいるわたしたちを哀れんでいる。今日ここにいること、ここで起きたこと、いまこの瞬間この世の中で起きているあらゆることを哀れみ、そして


您的CSS样式中存在错误<代码>方向：ltr
应为
方向：rtl
。请尝试更改此设置，并告诉我它是否有效。
您的CSS样式中存在错误<代码>方向：ltr
应为
方向：rtl
。尝试更改此选项，并让我知道它是否有效。
您需要对我发布的用于证明水平文本的方法稍加修改

将高度设置为100%，而不是将：after伪元素的宽度设置为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 */
}



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


HTML:


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 */
}



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




あれは哀あわれみ。ミチコはここにいるわたしたちを哀れんでいる。




：after伪元素由于其行高在段落后添加了额外的空间（不能仅从中删除行高，因为它被视为p标记中的另一段文本）。为了弥补这一点，您需要在段落中添加一个负的左边距。
您需要使用我发布的证明水平文本的方法的一个细微变化

将高度设置为100%，而不是将：after伪元素的宽度设置为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 */
}



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


HTML:


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 */
}



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




あれは哀あわれみ。ミチコはここにいるわたしたちを哀れんでいる。




：after伪元素由于其行高在段落后添加了额外的空间（不能仅从中删除行高，因为它被视为p标记中的另一段文本）。为了弥补这一点，您需要在段落中添加一个负的左边距。
谢谢您的建议，但这会导致一些其他问题。更改后我看到的是，段落缩进错误地出现在页面底部，而不是顶部。此外，第一个p元素的端点在底部对齐，但在顶部对齐。最后，奇怪的是，第一个p标记末尾的句点在文本顶部结束，而它应该在文本其余部分的底部。也许需要添加或更改一些CSS样式？看起来底部和顶部在某种程度上是互换的。你有我可以看到的屏幕截图或实时页面吗？我已经上传了示例html文件，我已经坐在那里玩了将近一个小时的实时页面，但我仍然无法让它工作。如果你能解决这个问题，让我知道你进展如何……是的，这确实是一个棘手的问题。无论如何，非常感谢您的尝试。谢谢您的建议，但这会导致一些其他问题。更改后我看到的是，段落缩进错误地出现在页面底部，而不是顶部。此外，第一个p元素的端点在底部对齐，但在顶部对齐。最后，奇怪的是，第一个p标记末尾的句点在文本顶部结束，而它应该在文本其余部分的底部。也许需要添加或更改一些CSS样式？看起来底部和顶部在某种程度上是互换的。你有我可以看到的屏幕截图或实时页面吗？我已经上传了示例html文件，我已经坐在那里玩了将近一个小时的实时页面，但我仍然无法让它工作。如果你能解决这个问题，让我知道你进展如何……是的，这确实是一个棘手的问题。无论如何，非常感谢你的努力。