direction
Establece el orden de lectura del objeto.
Sintaxis
{ direction: sDirection }
Valores posibles
sDirection
Cadena que especifica o recibe uno de los valores siguientes:
ltr |
Valor predeterminado. El contenido fluye de izquierda a derecha. |
inherit |
El flujo de contenido se hereda. |
rtl |
El contenido fluye de derecha a izquierda. |
Esta propiedad tiene el valor predeterminado ltr. Se hereda.
Observaciones
La propiedad no afecta a los caracteres alfanuméricos de los documentos que se leen de izquierda a derecha. Estos caracteres siempre se representan como ltr. Sin embargo, la propiedad sí afecta a los caracteres de puntuación de los documentos que se leen de izquierda a derecha.
La propiedad corresponde únicamente al flujo direccional del contenido de un elemento. No tiene efecto alguno en las propiedades como left, right, margin-left o margin-right. Por ejemplo, la propiedad margin-left establece el ancho del margen en el lado izquierdo del documento independientemente del valor de la propiedad direction.
Ejemplo
En el siguiente ejemplo se demuestra cómo establecer y recuperar el valor de la propiedad direction. Cuando el usuario establece el valor de la propiedad direction de un elemento DIV, el valor de la propiedad se recupera en un elemento SPAN:
<html>
<head><script>
function fnSwitch()
{
odiv.style.direction = event.srcElement.innerText;
Dirspan.innerText = odiv.style.direction;
}
</script>
</head>
<body>
<h1>direction Property Sample</h1>
<h2>direction:
<span id="Dirspan" style="color:red"></span>
</h2>
[ <a href="#" onclick=fnSwitch()>ltr</a> | <a href="#"
onclick=fnSwitch()>rtl</a> | <a href="#" onclick=fnSwitch()>inherit</a> ]</p>
<div id="odiv">The quick brown fox jumps over the lazy yellow dog. The quick brown fox
jumps over the lazy yellow dog. The quick brown fox jumps over the lazy yellow
dog. The quick brown fox jumps over the lazy yellow dog. The quick brown fox
jumps over the lazy yellow dog.</div>
</body>
</html>
Información sobre estándares
Esta propiedad se define en la especificación Cascading Style Sheets (CSS), Level 2 (CSS2) (Hojas de estilos en cascada (CSS), nivel 2 (CSS2)).
Aplicable a
a, abbr, acronym, address, b, bdo, big, blockquote, body, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, hn, i, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, option, p, q, rt, ruby, s, select, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp