
La propiedad direction
en CSS establece la dirección del texto, y usamos el valor rtl
con ella para referirnos a los idiomas que se escriben de derecha a izquierda y ltr
para los idiomas que se escriben de izquierda a derecha, como el español. Tenga en cuenta que la dirección del texto generalmente se define usando la propiedad dir
en el elemento para <html>
todo el documento, no usando el direction
.
Funciones direction css
Valor inicial | ltr |
---|---|
Aplicado a | Todos los artículos. |
Heredable | Sí |
Móvil | No |
Valor calculado | Como se especificó. |
/* palabras reservadas */ direction: ltr; direction: rtl; /* valores globales */ direction: inherit; direction: initial; direction: unset;
A diferencia de la propiedad dir
en HTML, la propiedad direction
en CSS no se heredará de las columnas de la tabla a las celdas de la tabla, porque la herencia en CSS sigue la estructura del documento y las celdas de la tabla están dentro de las líneas de la tabla y no dentro de las columnas.
La propiedad direction
(y la propiedad unicode-bidi
) es la única propiedad que no se ve afectada por la propiedad all
abreviada.
Ejemplos y aplicaciones en código
Ejemplo de uso de la propiedad direction
para establecer la orientación de un párrafo dentro de una página:
< p > Esta propiedad se usa en la dirección para establecer su orientación </ p >
Código CSS
p { direction: rtl; }
Recordemos nuevamente que el mejor uso de los elementos y atributos de HTML para ajustar la dirección, como en el elemento <bdi>
y la propiedad dir
.
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 2.0 | 1.0 | 5.5 | 9.2 | 1.3 |
Características generales
La propiedad direction
acepta una de las siguientes dos palabras reservadas.
ltr
La dirección del texto es de izquierda a derecha (de izquierda a derecha). Este valor es el valor predeterminado.
rtl
La dirección del texto es de derecha a izquierda.
Estructura direction css
direction: ltr | rtl;
Consulte también
- La página de propiedades
float
que especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece. - Página de propiedades
right
que ayuda a determinar la posición horizontal correcta de un elemento que se puede reposicionar. - La página de propiedades
left
que define la posición horizontal izquierda de un elemento que se puede reposicionar.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS