ruby-position

Свойство ruby-position задаёт положение аннотаций <rt> относительно основного текста внутри элемента <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-position: under;}
          ruby {
  ruby-position: under;
}

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

        
          
          .element {  ruby-position: over;}
          .element {
  ruby-position: over;
}

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

• over — аннотация над текстом (или справа, если используется вертикальное письмо).
• under — аннотация под текстом (или слева при вертикальном письме).
• inter-character — аннотация располагается между символами базового текста, на правой стороне. Работает только при определённой структуре и может принудительно включать вертикальное направление у аннотаций.
• alternate — значение по умолчанию, аннотации могут чередоваться между положениями over и under, если их несколько. Это значение используется, например, с элементом <rtc>, где есть аннотации разного уровня.
• alternate over / alternate under — уточняют порядок чередования при использовании alternate.

В языках вроде японского или китайского аннотации нужны, чтобы пояснять произношение или значение символов. Иногда их размещают над символами, иногда — под, особенно в учебных текстах. А если аннотации многоуровневые, их можно чередовать. ruby-position позволяет точно управлять этим расположением.

💡 В горизонтальном тексте over = над строкой, under = под строкой.
💡 В вертикальном тексте (writing-mode: vertical-rl) over = справа, under = слева.
💡 inter-character размещает аннотацию между символами базового текста.
💡 Значение alternate позволяет использовать несколько уровней аннотаций, автоматически распределяя их. Поддерживается не во всех браузерах!