Può CSS scegliere un carattere predefinito diverso e dimensioni a seconda della lingua

Question

ho il seguente frammento di CSS:

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

che funziona bene quando la casella di testo contiene alcuni script punjabi in questo modo: ਪੰਜਾਬੀ

Ma l'utente potrebbe invece inserire inglese, e preferirei usare il font Verdana con una dimensione diversa, poiché le lettere inglesi nel font Raavi sono davvero funky e la dimensione è sbagliata.

Quindi la mia domanda potrebbe essere indicato come:

• Esiste un tipo di condizionale font-family e selezione del formato all'interno di CSS sulla base degli input
• c'è comunque per i CSS per conoscere la lingua di input ?

Così ho potuto creare il seguente 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

Questo è indirizzato nei CSS3, e questo non aiuta la compatibilità con i vecchi browser, ma funziona per me quando si mescolano testo greco e latino con caratteri diversi per ciascuno. Ecco un esempio tratto dal Progetto CSS Font Modulo di lavoro:

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

Il bit unicode-range è la chiave magica: che indica al browser di utilizzare questa istruzione font-face solo per questo particolare blocco di caratteri Unicode. Se il browser trova caratteri nell'intervallo, utilizza questo tipo di carattere; per i personaggi al di fuori di tale intervallo, ricade alla successiva dichiarazione CSS specifica seguendo il solito schema di default.

Answer 2

Una soluzione CSS puro potrebbe essere facile come:

input[lang=en] { 
    font-family:Verdana; 
    font-size:12px; 
} 

input[lang=pa] { 
    font-family:Raavi; 
    font-size:14px; 
} 

Ma è ancora in piedi a voi per impostare l'attributo lang dell'elemento di input.

Sfortunatamente, come con la maggior parte delle fancy caratteristiche CSS, attribute selectors non funzionano al 100% attraverso la gamma di browser oggi. La tua migliore scommessa secondo me è usare una classe per lingua e assegnarla all'elemento di input.

Aggiornamento:

Per la vostra richiesta, ecco un esempio di un modo ingenuo di farlo con la vaniglia JavaScript. Ci sono certamente miglioramenti da apportare, ma questo "funziona".

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

Questo esempio spara dopo un personaggio è stato digitato. Quindi controlla se rientra nell'intervallo considerato "inglese" e assegna gli attributi di conseguenza. Imposta gli attributi lang, xml:lang e class.

Answer 3

In che modo i CSS possono conoscere la lingua di input?

Ho paura che l'unica soluzione sia trovare un font unicode che sia bello per entrambi i set di caratteri. Che è tutt'altro che perfetto se il tuo lettore remoto non lo ha installato. Forse Arial Unicode MS.

Answer 4

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

Questo dovrebbe lavoro per i vostri scopi:

• Se il testo è l'inglese, entrambi i tipi di carattere dovrebbe contenere i glifi, e Verdana sarà preferito
• Se il testo è Punjabi, Verdana non dovrebbe contenere i glifi, quindi il browser dovrebbe tornare a Raavi

Non sono positivo se tutti i browser si comporteranno correttamente Sì, ma è quello che dovrebbero fare secondo le specifiche CSS.

Answer 5

L'unica soluzione affidabile per ora è quella di elencare i caratteri nell'ordine desiderato, come indicato da Miles.

Speriamo che la soluzione (corretta) indicata da Zack possa essere adeguatamente supportata da più browser.

Ma anche in questo caso sarà responsabilità dell'utente contrassegnare le varie sezioni con l'attributo lang corretto.

Niente può rilevare in modo affidabile la lingua di qualsiasi testo.

Answer 6

È prassi comune mantenere siti Web multilingue per utilizzare file CSS separati per ogni lingua. Questo è auspicabile perché dovrai modificare più del font. Sarà spesso necessario regolare la spaziatura per adattarla alla lunghezza delle stringhe nella lingua. Inoltre, potrebbe essere necessario adattare parte della formattazione di base della pagina per renderla più naturale agli utenti della lingua.

La solida risposta è quella di internazionalizzare e non accontentarsi di un font diverso perché alla fine si scoprirà che la selezione dei font sarà insufficiente.

Answer 7

nel tag html che avete che lang proprietà. (Solo lang = 'it' o lang = 'it-IT')

Possiamo utilizzare questo in CSS.

Se vogliamo dare particolare CSS per il tag p per lingua diversa,

p:lang(en-EN){ 
} 

Il rispettivo stile abbiamo bisogno di aggiungere.

Questo è il modo in cui possiamo fornire un css particolare per lingue diverse.

esempio

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