CSS3 {text-align: start} для японского контента сверху вниз - PullRequest
Новая
       32

CSS3 {text-align: start} для японского контента сверху вниз

0 голосов
/ 04 марта 2020

CSS {text-align: start} ведет себя как {text-align: end} в японском тексте сверху вниз пример jsfiddle .

Может ли кто-нибудь с некоторой ясностью в японском тексте объяснить это поведение или это ошибка в chrome / firefox?

Я ожидал, что текст со значениями 'start' и 'left' должен быть выровнен по верху, а текст со значением 'end' и 'right' должен быть выровнен по низу, так как этот японский текст написан сверху вниз.

Как вы можете видеть 'left', 'right' и 'center' ведут себя, как и ожидалось, но «начало» и «конец», кажется, изменили свое поведение.

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

{direction: rtl;} вызывал проблему. Устранение проблемы устранило проблему.

0 голосов
/ 04 марта 2020

text-align для `` 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;
}

Надеюсь, будет полезным

...