ruby-align

Свойство ruby-align определяет, как аннотации (руби-текст) выравниваются относительно базового текста в элементе <ruby>. Это полезно при работе с восточноазиатскими языками, особенно японским.

        
          
          <ruby>  風林  <rp> (</rp><rt>Ветер и лес</rt><rp>) </rp></ruby><ruby>  火山  <rp> (</rp><rt>Огонь и гора</rt><rp>) </rp></ruby><ruby>  雨月  <rp> (</rp><rt>Дождь и луна</rt><rp>) </rp></ruby>
          <ruby>
  風林
  <rp> (</rp><rt>Ветер и лес</rt><rp>) </rp>
</ruby>
<ruby>
  火山
  <rp> (</rp><rt>Огонь и гора</rt><rp>) </rp>
</ruby>
<ruby>
  雨月
  <rp> (</rp><rt>Дождь и луна</rt><rp>) </rp>
</ruby>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          ruby {  ruby-align: center;}
          ruby {
  ruby-align: center;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .element {  ruby-align: start;}
          .element {
  ruby-align: start;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• start — аннотация выравнивается по началу текста (значение по умолчанию).
• center — аннотация выравнивается по центру символов базового текста.
• space-between — аннотации распределяются с равными промежутками между символами основного текста.
• space-around — аннотации распределяются с равными промежутками вокруг символов.

Свойство работает только внутри элементов с display: ruby и аннотациями <rt>.

Когда вы используете аннотации над или под иероглифами (например, японскими), важно контролировать, как они соотносятся с основным текстом. Это особенно критично при сложных фразах или вертикальном письме. ruby-align позволяет точно управлять этим выравниванием.

💡 Свойство ruby-align применяется только к родительскому элементу <ruby>.
💡 Чтобы аннотации были видны, используйте элементы <ruby> и <rt>, а также корректный HTML-структурный контент.