¿Cómo cambiar a izquierda y derecha en un archivo css?

Tengo una página de plantilla HTML django que es RTL y LTR (depende de la configuración regional del usuario).¿Cómo cambiar a izquierda y derecha en un archivo css?

El CSS de esta página se almacena en otro archivo, y ese archivo es actualmente estático.

¿Cuál es la mejor manera de cambiar el atributo de izquierda a derecha según la configuración regional? ¿Hay un atributo incorporado en CSS para este problema? (No quiero usar JS, se siente demasiado sucio)

tengo:

.elem{ 
    left: 10px; 
    bottom: 10px; 
    position: absolute; 
}

Quiero algo como esto:

.elem{ 
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px; 
    position: absolute; 
}

Actualmente la única opción que se me ocurre está convirtiendo el archivo en una plantilla también:

.elem{ 
    {{dir}}: 10px; 
    bottom: 10px; 
    position: absolute; 
}

¿Hay alguna forma mejor que me permita mantener mi archivo CSS estático?

Fuente

2012-04-29 Uri

Buena pregunta. Esto es realmente un problema. La solución de Mozilla fue inventar nuevas propiedades como [-moz-padding-start] (https://developer.mozilla.org/en/CSS/-moz-padding-start) et al, pero por supuesto eso no funcionará en ningún lado más. –

Usted dice que está haciendo el documento rtl o ltr dependiendo de la configuración regional. En ese caso, puede usar el selector :lang() para hacer que ciertas partes de su documento tengan un estilo dependiendo de la configuración regional.

Si quieres un poco más de apoyo (IE7 +) que podría utilizar el selector de atributos selector[lang='en'] pesar de que sólo pondrá a prueba el atributo en el selector especificado.

http://www.w3.org/TR/css3-selectors/#attribute-selectors

Si especifica el idioma en el elemento html (que debe, con lang="en" por ejemplo) que sólo puede poner el selector html en frente de la clase que desea aplicar en cierta Configuraciones regionales:

.elem { 
    margin: 0 10px 0 0; 
    color: blue; 
} 

html[lang='en'] .elem { 
    margin: 0 0 0 10px; 
}

Aún mejor, si ha especificado la dir atributo que puede utilizar directamente en el css que de este modo:

.elem[dir='rtl'] { 
    margin: 0 10px 0 0; 
}

Tenga en cuenta que con una clase en el elemento del cuerpo siempre dependerá de que la clase siempre esté allí. Pero el atributo dir y lang se puede especificar en un ámbito más específico, como un único div, y todavía se puede usar en el CSS junto con los estilos para las "otras" direcciones de lectura.

Editar

Por último, para mirar hacia el futuro, 'Nivel 4' los selectores CSS incluirá una etiqueta psuedo que será capaz de filtrar en la direccionalidad del texto. Por supuesto, las especificaciones están en desarrollo y la adopción por los navegadores pueden tomar años antes de que sea posible utilizar de forma fiable que:

http://dev.w3.org/csswg/selectors4/#dir-pseudo

Fuente

2012-04-29 16:21:01 sg3s

Cómo sobre la adición de la dirección a su elemento del cuerpo a través de una clase especial, entonces se puede escribir selectores de acuerdo:

<body class="rtl">

y en el CSS:

.rtl .myclass { 
    text-align: right; 
}

Fuente

2012-04-29 15:30:49 Joscha

¿Cómo cambiar a izquierda y derecha en un archivo css?

Respuesta

Cuestiones relacionadas