texto - tamaño de letra en css
¿Puede CSS elegir una fuente y un tamaño predeterminados diferentes según el idioma? (7)
Tengo el siguiente fragmento de CSS:
INPUT{ font-family: Raavi; font-size: 14px;}
Lo cual funciona bien cuando el cuadro de texto contiene un script de Punjabi como este: ਪੰਜਾਬੀ
Pero el usuario podría ingresar en inglés, y preferiría usar la fuente Verdana con un tamaño diferente, ya que las letras en inglés de la fuente Raavi son realmente originales y el tamaño es incorrecto.
Entonces mi pregunta podría ser dicha como:
- ¿Hay algún tipo de selección condicional de fuente y familia de fuentes dentro de CSS basada en la entrada?
- ¿Hay alguna forma de que CSS sepa sobre el idioma de entrada?
Para poder crear el siguiente PSEUDO_CSS:
INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;}
o
INPUT.EN{ font-family: Verdana; font-size: 12px;}
INPUT.PA{ font-family: Raavi; font-size: 14px;}
¿Cómo podría CSS saber sobre el idioma de entrada?
Me temo que la única solución es encontrar una fuente Unicode que se vea bonita para ambos conjuntos de caracteres. Lo cual está lejos de ser perfecto si su lector remoto no lo ha instalado. Tal vez Arial Unicode MS.
Cuando se mantienen sitios web multilingües, es una práctica común utilizar archivos CSS separados para cada idioma. Esto es deseable porque tendrá que ajustar más que la fuente. A menudo necesitará ajustar el espaciado para que coincida con la longitud de las cadenas en el idioma. Además, es posible que deba ajustar algunos de los formatos básicos de la página para que sea más natural para los usuarios del idioma.
La respuesta robusta es internacionalizar y no simplemente conformarse con una fuente diferente porque eventualmente encontrará que la selección de fuente será insuficiente.
La única solución confiable por el momento es listar las fuentes en el orden deseado, como indicó Miles.
Es de esperar que la solución (correcta) indicada por Zack pueda ser soportada adecuadamente por más navegadores.
Pero incluso entonces será su responsabilidad etiquetar las diversas secciones con el atributo lang adecuado.
Nada puede detectar de manera confiable el idioma de ningún texto.
Una solución pura de CSS podría ser tan fácil como:
input[lang=en] {
font-family:Verdana;
font-size:12px;
}
input[lang=pa] {
font-family:Raavi;
font-size:14px;
}
Pero aún depende de usted establecer el atributo lang del elemento de entrada.
Desafortunadamente, al igual que con la mayoría de las funciones de CSS atractivas, los selectores de atributos no funcionan al 100% en toda la gama de navegadores actuales. En mi opinión, la mejor opción es usar una clase por idioma y asignarla al elemento de entrada.
Actualizar:
Según su solicitud, aquí hay un ejemplo de una forma ingenua de hacerlo con JavaScript vanidoso. Sin duda hay mejoras que se pueden hacer, pero esto "funciona".
<style type="text/css">
.lang-en {
font-family:Verdana;
font-size:12px;
}
.lang-pa {
font-family:Raavi;
font-size:14px;
}
</style>
<form>
<input type="text" onkeyup="assignLanguage(this);" />
</form>
<script type="text/javascript">
function assignLanguage(inputElement) {
var firstGlyph = inputElement.value.charCodeAt(0);
if((firstGlyph >= 65 && firstGlyph <= 90) || (firstGlyph >= 97 && firstGlyph <= 122)) {
inputElement.setAttribute(''lang'', ''en'');
inputElement.setAttribute(''xml:lang'', ''en'');
inputElement.setAttribute(''class'', ''lang-en'');
} else {
inputElement.setAttribute(''lang'', ''pa'');
inputElement.setAttribute(''xml:lang'', ''pa'');
inputElement.setAttribute(''class'', ''lang-pa'');
}
}
</script>
Este ejemplo se activa después de que un caracter ha sido escrito. Luego verifica si cae entre un rango considerado "inglés" y asigna atributos en consecuencia. Establece los atributos lang , xml:lang y class .
input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}
Esto debería funcionar para tus propósitos:
- Si el texto es inglés, ambas fuentes deben contener los glifos, y se preferirá Verdana
- Si el texto es Punjabi, Verdana no debería contener los glifos, por lo que el navegador debería recurrir a Raavi.
No estoy seguro si todos los navegadores se comportarán correctamente, pero eso es lo que deberían hacer según las especificaciones de CSS.
Esto se aborda en CSS3, y eso no ayudará a la compatibilidad con los navegadores antiguos, pero funciona para mí al mezclar texto en griego y en latín con diferentes fuentes para cada uno. Aquí hay un ejemplo tomado del borrador de trabajo del módulo de fuentes CSS:
@font-face {
font-family: BBCBengali;
src: url(fonts/BBCBengali.ttf) format("opentype");
unicode-range: U+00-FF, U+980-9FF;
}
El bit de unicode-range es la clave mágica: le dice al navegador que use esta instrucción de tipo de letra solo para este bloque particular de caracteres Unicode. Si el navegador encuentra caracteres en ese rango, usa esta fuente; para caracteres fuera de ese rango, vuelve a la siguiente declaración de CSS más específica siguiendo el patrón habitual de incumplimiento.
En tu etiqueta html tienes esa propiedad lang. (Solo lang = ''en'' o lang = ''en-EN'' )
Podemos usar esto en CSS.
Si queremos dar CSS en particular para la etiqueta p para otro idioma,
p:lang(en-EN){
}
El estilo respectivo que necesitamos agregar.
Esta es la forma en que podemos dar css en particular para diferentes idiomas.
ejemplo
html{font-family: Raavi; font-size: 14px;}
html:lang(en-EN){font-family: Verdana; font-size: 12px;}