From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/ruby-align/index.html | 234 +++++++++++++++++++++++++++++++++ 1 file changed, 234 insertions(+) create mode 100644 files/ru/web/css/ruby-align/index.html (limited to 'files/ru/web/css/ruby-align') diff --git a/files/ru/web/css/ruby-align/index.html b/files/ru/web/css/ruby-align/index.html new file mode 100644 index 0000000000..24870c5d3d --- /dev/null +++ b/files/ru/web/css/ruby-align/index.html @@ -0,0 +1,234 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +translation_of: Web/CSS/ruby-align +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Summary

+ +

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

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* 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

+ +
{{csssyntax}}
+ +

Examples

+ +

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

+ +
<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

+ + + +
ruby {
+    ruby-align:start;
+}
+ +

This gives the following result:

+ +

{{EmbedLiveSample("Ruby_aligned_at_the_start_of_the_base_text", 180, 40)}}

+ +

Ruby aligned at the center of the base text

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

This gives the following result:

+ +

{{EmbedLiveSample("Ruby_aligned_at_the_center_of_the_base_text", 180, 40)}}

+ +

Extra space distributed between ruby elements

+ + + +
ruby {
+    ruby-align:space-between;
+}
+ +

This gives the following result:

+ +

{{EmbedLiveSample("Extra_space_distributed_between_ruby_elements", 180, 40)}}

+ +

Extra space distributed between and around ruby element

+ + + +
ruby {
+    ruby-align:space-around;
+}
+ +

This gives the following result:

+ +

{{EmbedLiveSample("Extra_space_distributed_between_and_around_ruby_element", 180, 40)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align') }}{{ Spec2('CSS3 Ruby') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatNo }} {{CompatGeckoDesktop(38)}}{{ CompatNo }} [1]{{ CompatNo }} {{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo }} {{CompatGeckoMobile(38)}}{{ CompatNo }} [1]{{ CompatNo }} CompatNo
+
+ +

[1] Internet Explorer, since IE9, implements an early draft of CSS Ruby where ruby-align had the following properties: auto, left, center, right, distribute-letter, distribute-space, and line-edge. Here is a rough conversion table:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IE syntaxStandard syntax
autoDon't use ruby-align
leftUse start (in ltr scripts)
centercenter
rightUse start (in rtl scripts)
distribute-letterNo direct equivalent, use space-between or space-around
distribute-spacespace-around
line-edgeNo direct equivalent.
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf