Puede CSS elegir un tipo de letra predeterminado diferente y tamaño dependiendo de Lenguaje

Question

tengo el siguiente fragmento de CSS:

INPUT{ font-family: Raavi; font-size: 14px;} 

que funciona bien cuando el cuadro de texto contiene una secuencia de comandos Punjabi así: ਪੰਜਾਬੀ

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 inglesas en la fuente Raavi son realmente originales y el tamaño es incorrecto.

Así que mi pregunta podría ser declarado como:

• ¿Hay algún tipo de condicional font-family y selección de tamaño dentro de CSS basado en la entrada
• ¿Hay alguna forma de CSS que saber sobre el idioma de entrada ?

por lo que podría crear la 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;} 

Answer 1

Esto se trata en CSS3, y eso no ayudará a la compatibilidad con navegadores antiguos, pero me sirve para mezclar texto en griego y en latín con diferentes tipos de letra para cada uno. He aquí un ejemplo tomado del Proyecto de CSS Fuentes Módulo de Trabajo:

@font-face { 
    font-family: BBCBengali; 
    src: url(fonts/BBCBengali.ttf) format("opentype"); 
    unicode-range: U+00-FF, U+980-9FF; 
} 

El bit unicode-range es la llave mágica: que le dice al navegador para usar esta declaración font-face sólo 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.

Answer 2

Una solución puro 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 sigue siendo hasta para establecer el atributo lang del elemento de entrada.

Desafortunadamente, al igual que con la mayoría de las características de CSS, attribute selectors 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.

Actualización:

según su petición, aquí está un ejemplo de una forma ingenua de hacerlo con vainilla JavaScript. 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> 

En este ejemplo se dispara después de un personaje se ha escrito. Luego verifica si cae entre un rango considerado "inglés" y asigna atributos en consecuencia. Establece los atributos lang, xml:lang y class.

Answer 3

¿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.

Answer 4

input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;} 

Este debe trabajo para sus propósitos:

• Si el texto es Inglés, ambas fuentes deben contener los glifos, y Verdana serán preferidos
• Si el texto es Punjabi, Verdana no debe contener los glifos, por lo que el navegador debe recurrir a Raavi

No estoy seguro si todos los navegadores se comportarán correctamente pero eso es lo que deberían hacer de acuerdo con las especificaciones de CSS.

Answer 5

La única solución confiable por el momento es listar las fuentes en el orden deseado, como indicó Miles.

Esperemos que la solución (correcta) indicada por Zack pueda ser respaldada correctamente por más navegadores.

Pero incluso entonces será su responsabilidad etiquetar las diversas secciones con el atributo lang adecuado.

Nada puede detectar con fiabilidad el idioma de ningún texto.

Answer 6

Es una práctica común cuando se mantienen sitios web multilingües usar 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.

Answer 7

En su etiqueta HTML que tiene que lang propiedad. (Justo lang = 'es' o lang = 'es-ES')

Podemos usar esto en CSS.

Si queremos prestar especial CSS para la etiqueta P para diferentes idiomas,

p:lang(en-EN){ 
} 

El estilo respectiva tenemos que añadir.

Esta es la forma en que podemos dar CSS específicos para diferentes idiomas.

ejemplo

html{font-family: Raavi; font-size: 14px;} 
html:lang(en-EN){font-family: Verdana; font-size: 12px;}