initial commit

1 files changed, 178 insertions, 0 deletions

diff --git a/files/es/web/css/max-block-size/index.html b/files/es/web/css/max-block-size/index.html
new file mode 100644
index 0000000000..5707a6ce0f
--- /dev/null
+++ b/files/es/web/css/max-block-size/index.html
@@ -0,0 +1,178 @@
+---
+title: max-block-size
+slug: Web/CSS/max-block-size
+translation_of: Web/CSS/max-block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}} </div>
+
+<p><span class="seoSummary">La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>max-block-size</strong></code> especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por {{cssxref("writing-mode")}}.</span> Esto es, si la dirección de escritura es horizontal, entonces <code>max-block-size</code> es equivalente a {{cssxref("max-height")}}; si la dirección de escritura es vertical, <code>max-block-size</code> es lo mismo que {{cssxref("max-width")}}.</p>
+
+<p>La longitud máxima de la otra dimensión se especifica usando la propiedad {{cssxref("max-inline-size")}}.</p>
+
+<p>Esto es útil porque <code>max-width</code> siempre se utiliza para tamaños horizontales y <code>max-height</code> siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.</p>
+
+<p>En cualquier momento usarías normalmente <code>max-height</code> o <code>max-width</code>, en su lugar deberías usar <code>max-block-size</code>para establecer el máximo "height" del contenido (even though this may not be a vertical value) y <code>max-inline-size</code> para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el {{SectionOnPage("/en-US/docs/Web/CSS/writing-mode", "Example")}}, que muestra los diferentes modos de escritura en acción.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* &lt;percentage&gt; values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h3 id="Valores">Valores</h3>
+
+<p>El valor de la propiedad <code>max-block-size</code> puede ser cualquier valor legal de las popiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}:</p>
+
+<p>{{page("/en-US/docs/Web/CSS/max-width", "Values")}}</p>
+
+<h3 id="Cómo_writing-mode_afecta_la_directionalidad">Cómo writing-mode afecta la directionalidad</h3>
+
+<p>Los valores de <code>writing-mode</code> afecta la asignación de <code>max-block-size</code> a <code>max-width</code> o <code>max-height</code> como sigue:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valores de <code>writing-mode</code></th>
+   <th scope="col"><code>max-block-size</code> es equivalente a</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-height")}}</td>
+  </tr>
+  <tr>
+   <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-width")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>The <code>writing-mode</code> values <code>sideways-lr</code> and <code>sideways-rl</code> were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.</p>
+</div>
+
+<div class="note">
+<p>The writing modes <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code>, and <code>rb-tl</code> are no longer allowed in {{Glossary("HTML")}} contexts; they may only be used in {{Glossary("SVG")}} 1.x contexts.</p>
+</div>
+
+<h3 id="Sintaxis_formal">Sintaxis formal</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>En este ejemplo, el mismo texto (las oraciones iniciales del {{interwiki("wikipedia", "Herman Melville", "Herman Melville's")}} novel <em>{{interwiki("wikipedia", "Moby-Dick")}}</em>) es presentado en ambos modos de escritura: <code>horizontal-tb</code> y <code>vertical-rl</code>.</p>
+
+<p>Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para {{cssxref("max-block-size")}}.</p>
+
+<h3 id="Contenido_HTML">Contenido HTML </h3>
+
+<p>El HTML simplemente establece los dos bloques {{HTMLElement("div")}} que serán presentados con su {{cssxref("writing-mode")}} estableciendo el uso de las clases <code>horizontal</code> o <code>vertical</code>. Ambas cajas comparten la clase <code>standard-box</code>, que simplemente establece colores, relleno, y sus respectivos valores de <code>max-block-size</code>.</p>
+
+<pre class="brush: html">&lt;p&gt;Writing mode &lt;code&gt;horizontal-tb&lt;/code&gt; (the default):&lt;/p&gt;
+&lt;div class="standard-box horizontal"&gt;
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+&lt;/div&gt;
+
+&lt;p&gt;Writing mode &lt;code&gt;vertical-rl&lt;/code&gt;:&lt;/p&gt;
+&lt;div class="standard-box vertical"&gt;
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+&lt;/div&gt;</pre>
+
+<h3 id="Contenido_CSS">Contenido CSS </h3>
+
+<p>El CSS está definido por tres clases. La primera, <code>standard-box</code>, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.</p>
+
+<p>Después que vienen las clases <code>horizontal</code> y <code>vertical</code>, que agregan las propiedades {{cssxref("writing-mode")}} para la caja, con el valor establecido para <code>horizontal-tb</code> o <code>vertical-rl</code> dependiendo en qué clase se usa.</p>
+
+<pre class="brush: css">.standard-box {
+  padding: 4px;
+  background-color: #abcdef;
+  color: #000;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+  max-block-size: 160px;
+  min-block-size: 100px;
+}
+
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>Las dos cajas se ven así al final:</p>
+
+<p>{{EmbedLiveSample("Ejemplo", 600, 850)}}</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("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
+
+
+
+<p>{{Compat("css.properties.max-block-size")}}</p>
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}</li>
+ <li>Configuración del tamaño máximo de la otra dirección: {{cssxref("max-inline-size")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>