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/pt-br/web/css/ruby-align/index.html | 239 ++++++++++++++++++++++++++++++ 1 file changed, 239 insertions(+) create mode 100644 files/pt-br/web/css/ruby-align/index.html (limited to 'files/pt-br/web/css/ruby-align') diff --git a/files/pt-br/web/css/ruby-align/index.html b/files/pt-br/web/css/ruby-align/index.html new file mode 100644 index 0000000000..f67cfc1262 --- /dev/null +++ b/files/pt-br/web/css/ruby-align/index.html @@ -0,0 +1,239 @@ +--- +title: ruby-align +slug: Web/CSS/ruby-align +tags: + - CSS + - Propriedade + - Referencia + - Referencia CSS +translation_of: Web/CSS/ruby-align +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Summary

+ +

A propriedade ruby-align do CSS define a distribuição dos direfentes elementos do ruby sobre a base.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
/* Valores chave */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Valores globais */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+
+ +

Values

+ +
+
start
+
É uma palavra-chave indicando que o ruby será alinhado com o início do texto base.
+
center
+
É uma palavra-chave indicando que o ruby será alinhado no meio do texto base.
+
space-between
+
É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby.
+
space-around
+
É uma palavra-chave indicando que o espaço extra será distruibuído entre os elementos do ruby e em torno deles.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplos

+ +

Esse HTML irá renderizar diferentemente com cada valor do ruby-align:

+ +
<ruby>
+  <rb>Esse é um grande texto para verificar</rb>
+  <rp>（</rp><rt>ruby curto</rt><rp>）</rp>
+</ruby>
+
+ +

Ruby alinhado no ínicio do texto base

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

Isso dará o seguinte resultado:

+ +

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

+ +

Ruby alinhado no centro do texto base

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

Isso dará o seguinte resultado:

+ +

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

+ +

Espaço extra distribuído entre os elementos do ruby

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

Isso dará o seguinte resultado:

+ +

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

+ +

Espaço extra distribuído entre os elementos do ruby e em torno deles

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

Isso dará o seguinte resultado:

+ +

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

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}{{Spec2('CSS3 Ruby')}}Definição inicital
+ +

Compatilibade de Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
AspectoChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico{{CompatNo}}{{CompatGeckoDesktop(38)}}{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico{{CompatNo}}{{CompatGeckoMobile(38)}}{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}
+
+ +

[1] Desde a versão 9 o Internet Explorer implementa um rascunho inicial do Ruby do CSS onde o ruby-align tinha os seguintes valores: auto, left, center, right, distribute-letter, distribute-space, and line-edge. Aqui está uma simples tabela de conversão:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sintaxe do IESintaxe padrão
autoNão usa ruby-align
leftUsa start (em scripts ltr)
centercenter
rightUsa start (em scripts rtl)
distribute-letterNenhum equivalente direto, usa space-between ou space-around
distribute-spacespace-around
line-edgeNenhum equivalente direto.
+ +

Veja também

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