initial commit

1 files changed, 247 insertions, 0 deletions

diff --git a/files/es/web/css/writing-mode/index.html b/files/es/web/css/writing-mode/index.html
new file mode 100644
index 0000000000..73c11b1b85
--- /dev/null
+++ b/files/es/web/css/writing-mode/index.html
@@ -0,0 +1,247 @@
+---
+title: writing-mode
+slug: Web/CSS/writing-mode
+tags:
+  - CSS
+  - Disposición
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/writing-mode
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>La propiedad <strong><code>writing-mode</code></strong> define si los renglones de texto se disponen horizontal o verticalmente y la dirección en que avanzan los bloques.</p>
+
+<p>La propiedad especifica la <em>dirección de flujo de bloques</em>, que es la dirección en que se apilan los contenedores a nivel de bloque y la dirección en que el contenido a nivel de línea fluye dentro de un contenedor de bloque. Por ende, la propiedad <code>writing-mode</code> también determina la ordenación del contenido a nivel de bloque.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css">/* Valores de la palabra clave */
+writing-mode: horizontal-tb;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* Valores globales */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>horizontal-tb</code></dt>
+ <dd>El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El próximo renglón horizontal se posiciona debajo del renglón anterior.</dd>
+ <dt><code>vertical-rl</code></dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El próximo renglón vertical se posiciona a la izquierda del renglón anterior.</dd>
+ <dt><code>vertical-lr</code></dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El próximo renglón vertical se posiciona a la derecha del renglón anterior.</dd>
+ <dt><code>sideways-rl</code>{{experimental_inline}}</dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la derecha.</dd>
+</dl>
+
+<dl>
+ <dt><code>sideways-lr</code>{{experimental_inline}}</dt>
+ <dd>El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la izquierda.</dd>
+ <dt><code>lr</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd>
+ <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd>
+ <dt><code>rl</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>horizontal-tb</code>.</dd>
+ <dt><code>tb</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>vertical-rl</code>.</dd>
+ <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
+ <dd>Desaprobado, excepto en los documentos SVG1. En CSS utilice <code>vertical-rl</code>.</dd>
+</dl>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<div class="hidden">
+<pre class="brush: html">&lt;table&gt;
+    &lt;tr&gt;
+        &lt;th&gt;value&lt;/th&gt;
+        &lt;th&gt;Sistema de escritura vertical&lt;/th&gt;
+        &lt;th&gt;Sistema de escritura horizontal&lt;/th&gt;
+        &lt;th&gt;Escritura mixta&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;horizontal-tb&lt;/td&gt;
+        &lt;td class="exampleText1"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText1"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText1"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-lr&lt;/td&gt;
+        &lt;td class="exampleText2"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText2"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText2"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-rl&lt;/td&gt;
+        &lt;td class="exampleText3"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText3"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText3"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-lr&lt;/td&gt;
+        &lt;td class="exampleText4"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText4"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText4"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-rl&lt;/td&gt;
+        &lt;td class="exampleText5"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="exampleText5"&gt;Texto de ejemplo&lt;/td&gt;
+        &lt;td class="exampleText5"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+</pre>
+
+<pre class="brush:css;">table { border-collapse:collapse; }
+td, th {border: 1px black solid; padding: 3px; }
+th {background-color: lightgray; }
+.exampleText1 { width:75px; writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; }
+.exampleText2 { height:75px; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; }
+.exampleText3 { height:75px; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; }
+.exampleText4 { height:75px; writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; }
+.exampleText5 { height:75px; writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", 400, 430)}}</p>
+
+<h3 id="Resultado_efectivo">Resultado efectivo</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p>
+
+<h2 id="Especificación">Especificación</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Definición inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>8{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(41)}}<sup>[1][3]</sup></td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>15{{property_prefix("-webkit")}}</td>
+   <td>5.1{{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Valores de SVG 1.1 <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatChrome(48.0)}} (sin prefijos)</td>
+   <td>{{CompatGeckoDesktop(43)}}</td>
+   <td>9.0 {{property_prefix("-ms")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sideways-rl,sideways-lr</code></td>
+   <td>{{CompatNo}} (a partir de 48.0)</td>
+   <td>{{CompatGeckoDesktop(43)}}</td>
+   <td>{{CompatNo}} (a partir de 25)</td>
+   <td>{{CompatNo}} (a partir de 35.0)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Función</th>
+   <th>Android</th>
+   <th>Webview de Android</th>
+   <th>Chrome para Android</th>
+   <th>Firefox móvil (Gecko)</th>
+   <th>IE móvil</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Compatibilidad básica</td>
+   <td>3{{property_prefix("-webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>47{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile(41)}} <sup>[1][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.1 {{property_prefix("-webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Valores de SVG 1.1 <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>tb</code>, <code>tb-rl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}} (sin prefijos)</td>
+   <td>{{CompatChrome(48.0)}} (sin prefijos)</td>
+   <td>{{CompatGeckoMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sideways-rl,sideways-lr</code></td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Desde Gecko 36 hubo una implementación experimental disponible, regida por la preferencia <code>layout.css.vertical-text.enabled</code>, cuyo valor era <code>false</code> hasta Firefox 38. A partir de Firefox 39 y Firefox 40, la preferencia se activó (<code>true</code>) solo en las ediciones Nightly y DevTools. Observe que no todos los <em>widgets</em> de CSS (p. ej., tablas) la acatan, por el momento.</p>
+
+<p>[2] La implementación de Internet Explorer diverge de la especificación. Consulte el <a href="https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx">artículo relacionado en el Centro de desarrollo de Internet Explorer</a>.</p>
+
+<p>[3] Solo a partir de Gecko 42 se admiten los sistemas de escritura bidireccionales y RTL.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>Atributo de SVG <code><a href="/en-US/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code></li>
+ <li>{{Cssxref("direction")}}</li>
+ <li>{{Cssxref("unicode-bidi")}}</li>
+ <li>{{Cssxref("text-orientation")}}</li>
+ <li>{{Cssxref("text-combine-upright")}}</li>
+</ul>