1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
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">/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
/* <percentage> 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>
{{csssyntax}}
<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"><p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
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.
</div>
<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
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.
</div></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>
|
