CSS3 {text-align: start} 用于日语从上到下的内容

Question

CSS {text-align: start} 在日语自上而下文本 jsfiddle example 中的行为与 {text-align: end} 相同。

任何懂日语的人都可以解释这种行为吗？或者这是 chrome/firefox 中的错误？

我的期望是，值 'start' 和 'left' 的文本应该与顶部对齐，值 'end' 和 'right' 的文本应该与底部对齐，因为这个日语文本从上到下书写。

如您所见，'left'、'right' 和 'center' 的行为符合预期，但 'start' 和 'end' 的行为似乎发生了逆转。

Answer 1

text-align for ``start 和 end 根据 direction 工作。如果你设置 direction: rtl; 则相反，但如果设置 direction: ltr; 则工作正常。

#container-for-ltr-text {
  direction: ltr;
}

#container-for-rtl-text {
  direction: rtl;
}

#align-to-start-rtl {
  direction: rtl;
  text-align: start;
}

#align-to-end-rtl {
  direction: rtl;
  text-align: end;
}

#align-to-start-ltr {
  direction: ltr;
  text-align: start;
}

#align-to-end-ltr {
  direction: ltr;
  text-align: end;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="container-for-ltr-text">Hello world</div>
    <div id="container-for-rtl-text">ハローワールド</div>
    
    <br/>
    <hr/>
    <br/>
    
    <h3 style="text-align:center;">direction rtl</h3>
    <div id="align-to-start-rtl">text align start in direction rtl</div>
    <div id="align-to-end-rtl">text align end in direction rtl</div>
    
    <br/>
    <hr/>
    <br/>
    
    <h3 style="text-align:center;">direction ltr</h3>
    <div id="align-to-start-ltr">text align start in direction ltr</div>
    <div id="align-to-end-ltr">text align end in direction ltr</div>


  </body>
</html>

如果您希望它始终正常工作，请使用 right 和 'left' 设置 text-align

#container-for-ltr-text {
  direction: ltr;
}

#container-for-rtl-text {
  direction: rtl;
}

#align-to-right-rtl {
  direction: rtl;
  text-align: right;
}

#align-to-left-rtl {
  direction: rtl;
  text-align: left;
}

#align-to-right-ltr {
  direction: ltr;
  text-align: right;
}

#align-to-left-ltr {
  direction: ltr;
  text-align: left;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="container-for-ltr-text">Hello world</div>
    <div id="container-for-rtl-text">ハローワールド</div>
    
    <br/>
    <hr/>
    <br/>
    
    <h3 style="text-align:center;">direction rtl</h3>
    <div id="align-to-right-rtl">text align right in direction rtl</div>
    <div id="align-to-left-rtl">text align left in direction rtl</div>
    
    <br/>
    <hr/>
    <br/>
    
    <h3 style="text-align:center;">direction ltr</h3>
    <div id="align-to-right-ltr">text align right in direction ltr</div>
    <div id="align-to-left-ltr">text align left in direction ltr</div>


  </body>
</html>

所以，如果你想设置一般方向，你必须在 body 标签中设置它：
例如：

body {
    direction: rtl;
}

希望对你有用

Answer 2

{direction: rtl;} 导致了这个问题。删除它解决了问题。

CSS3 {text-align: start} 用于日语从上到下的内容

CSS3 {text-align: start} for Japanese top to bottom content

css

text-align