Dimensionamiento para propiedades lógicas
En esta guÃa explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento fÃsico y lógico usados para dimensionar elementos en nuestras páginas.
Cuando especificamos el tamaño de un Ãtem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en lÃnea y bloque) más bien que dimensionamiento fÃsico con relación a las dimensiones fÃsicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño fÃsico y el tamaño lógico. Es posible que desee que algunas caracterÃsticas se relacionen siempre con las dimensiones fÃsicas, independientemente del modo de escritura.
Asignaciones para dimensiones
La siguiente tabla proporciona asignaciones entre propiedades lógicas y fÃsicas. Estas asignaciones asumen que estás en un modo de escritura horizontal-tb, como Inglés o Ãrabe, en cada caso el ancho (width) serÃa asignado a inline-size.
Si tú estás en un modo de escritura vertical, entonces inline-size serÃa asignado a height.
| Propiedades Lógicas | Propiedades FÃsicas |
|---|---|
inline-size |
width |
block-size |
height |
min-inline-size |
min-width |
min-block-size |
min-height |
max-inline-size |
max-width |
max-block-size |
max-height |
Ejemplo de ancho y alto
Las asignaciones para el ancho (width) y el alto (height) son inline-size, que establece el largo en la dimensión en lÃnea y block-size, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.
En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo â cuando usamos width y height â permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo â cuando usamos inline-size y block-size â seguirá la dirección del texto como si todo el bloque hubiera girado.
Ejemplo de ancho y alto mÃnimo
También hay asignaciones para min-width y min-height â estas son min-inline-size y min-block-size. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mÃnimo en lugar de uno fijo.
Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.
Ejemplo de ancho y alto máximo
Finalmente, puedes usar max-inline-size y max-block-size como reemplazos de max-width y max-height. Intenta jugar con el siguiente ejemplo de la misma manera que antes.
Palabras claves para redimensionamiento lógico
La propiedad resize establece si un elemento se puede redimensionar o no y si tiene valores fÃsicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.
El valor de la palabra clave de both para la propiedad de cambio de tamaño funciona ya sea que esté pensando fÃsica o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.
Advertencia: Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.