ruby-align
==========

**Экспериментальная возможность:** **Это экспериментальная технология**  
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Summary
-------

The **`ruby-align`** CSS property defines the distribution of the different ruby elements over the base.

|  |  |
| --- | --- |
| Начальное значение | `space-around` |
| Применяется к | базовые элементы ruby, аннотации к ruby, базовые ruby контейнеры, контейнеры аннотаций к ruby |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | by computed value type |

Syntax
------


```css
/\* Keyword values \*/
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/\* Global values \*/
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;
```

### Values

`start`

Is a keyword indicating that the ruby will be aligned with the start of the base text.

`center`

Is a keyword indicating that the ruby will be aligned at the middle of the base text

`space-between`

Is a keyword indicating that the extra space will be distributed between the elements of the ruby.

`space-around`

Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

### Formal syntax
```

ruby-align =   
  start          | (en-US)  
  center         | (en-US)  
  space-between  | (en-US)  
  space-around     
  
```

Examples
--------

This HTML will render differently with each value of `ruby-align`:


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

### Ruby aligned at the start of the base text


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```



```css
ruby {
  ruby-align: start;
}
```


This gives the following result:

### Ruby aligned at the center of the base text


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```



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


This gives the following result:

### Extra space distributed between ruby elements


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```



```css
ruby {
  ruby-align: space-between;
}
```


This gives the following result:

### Extra space distributed between and around ruby element


```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```



```css
ruby {
  ruby-align: space-around;
}
```


This gives the following result:

Specifications
--------------

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* HTML Ruby elements: `<ruby>`, `<rt>` (en-US), `<rp>` (en-US), and `<rtc>` (en-US).
* CSS Ruby properties: `ruby-position` (en-US), `ruby-merge`.