Come aggiungere una classe CSS a <body> a seconda della lingua attiva

8

Sto progettando un sito multilingue in cui vorrei basare alcuni dei miei stili sulla lingua attiva.

Pensa a qualcosa del genere:

body.en-uk li.artist:before {content:"Artist: "}
body.it-it li.artist:before {content:"Artista: "}
body.de-de li.artist:before {content:"Künstler"}

Qualcuno sa di un'estensione in grado di fare questo (cioè aggiungere una classe al tag a seconda della lingua attiva)?

extensions

— SMZ
fonte

1

Solo un piccolo punto; in questo esempio si sta modificando il contenuto, non lo stile, in base alla lingua. Ovviamente puoi già farlo molto facilmente all'interno di Joomla, senza bisogno di alcun CSS.

— Seth Warburton,

14

In realtà c'è una soluzione più semplice al tuo problema. Qualsiasi modello sano (inclusi tutti i modelli forniti con Joomla CMS) imposterà l' langattributo sull'elemento HTML. Ciò consente di utilizzare lo :lang()pseudo-selettore CSS .

Il tuo esempio sarebbe simile al seguente:

li.artist:lang(en):before {content:"Artist: "}
li.artist:lang(it):before {content:"Artista: "}
li.artist:lang(de):before {content:"Künstler"}

Questo ha un paio di vantaggi. Per cominciare, funzionerà indipendentemente da Template o anche con soluzioni diverse da Joomla come è fatto nel Browser.

Funzionerà bene anche con parti incorporate in altre lingue, purché l' langattributo sia impostato correttamente. Per esempio:

<html lang="en">
  <head>
    <style>
     blockquote:lang(de) { color: red; }
     blockquote:lang(en) { color: red; }
    </style>
  </head>
  <body>
    <p>A famous German quote is:</p>
    <blockquote lang="de">
      <p>Den Wald vor lauter Bäumen nicht sehen</p>
    </blockquote>
    <p>A famous English quote is:</p>
    <blockquote>
      <p>Listen to many, speak to a few.</p>
    </blockquote>
  <body>
</html>

Infine, Joomla non produce solo la lingua ma anche le impostazioni locali. Quindi il tuo sito potrebbe usare en-GB, un altro en-US e il modello lo rifletterà. L'utilizzo :lang(en)corrisponderà a entrambi, ma potresti anche utilizzare :lang(en-US)solo come target l'inglese americano.

— Rouven Weßling
fonte

Grazie per la tua risposta Rouven: molto interessante e sperimenterò anche questo.

— smz,

Bene, Rouven, alla fine, devo dire che ho adottato il tuo metodo: molto elegante, nemmeno la minima modifica al mio modello e mi ha aperto gli occhi su più possibilità che ora sto cercando di sfruttare (moduli HTML personalizzati multilingue e articoli ...). Grazie ancora e molte grazie anche a @Bakual e Lodder, ovviamente!

— smz,

Eccezionale. Glead per sentire che potrei offrire qualche ispirazione.

— Rouven Weßling,

Questa è una risposta brillante, non ne avevo idea!

— codinghands

5

Vorrei solo modificare il file index.php dei modelli e aggiungerei la classe direttamente lì.

<body class="<?php echo $this->language; ?>">

Assegnerebbe la lingua corrente come classe al tag body.

— Bakual
fonte

Fantastico: ancora più facile!

— smz,

Grazie Bakual: ho aggiunto il tuo codice al mio modello e funziona perfettamente. Ho "accettato" la tua risposta.

— smz,

Sto cercando di fare qualcosa di simile per aggiungere l'alias alla classe del corpo. Ma non voglio sovrascrivere il modello in caso di aggiornamenti. Stavo pensando di creare un plug-in di sistema, ma c'è un modo per aggiungere questa classe o dovrei semplicemente usare JavaScript?

— Eoin

3

Una piccola cosa da aggiungere riguardo al metodo di Rouven; il supporto del browser è migliore per i selettori di attributi piuttosto che per lo pseudo-selettore della lingua, quindi potresti prendere in considerazione l'uso di qualcosa del genere per indirizzare i tuoi stili:

[lang="en-GB"] .artist {…}

— Seth Warburton
fonte

Grazie @Seth! Proverò la tua soluzione di targeting. Che ne dite di targeting con entrambi? Questo renderà la soluzione ancora più compatibile?

— smz,

Ciò qualificherebbe eccessivamente i selettori o aggiungerebbe gonfie inutili. Il selettore più corto è sempre la scelta migliore in quanto mantiene bassa la specificità, consentendoti di ignorarla facilmente se necessario. Più specifico è il selettore, più difficile sarà la sostituzione, motivo per cui non dovresti mai usare gli ID nei tuoi CSS. L'uso di entrambi non ti darebbe più compatibilità con il browser.

— Seth Warburton,

Ciao @ Seth! Ho provato la tua soluzione ma non sembra funzionare, almeno con il mio Joomla! luogo. Per quanto ho capito, l'unica indicazione sulla lingua in uso risiede nella direttiva <html> che recita: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> in caso di italiano o <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> in caso di inglese. Questo dovrebbe essere sufficiente per la tua soluzione di targeting? Non sembra così ...

— smz,

Sì, questo selettore ha come target l'elemento html in base all'attributo, che in questo caso è la lingua. Tuttavia, gli attributi fanno distinzione tra maiuscole e minuscole, quindi è necessario utilizzare: [lang = "en-gb"]

— Seth Warburton,

1

Nell'indice.php del modello, è possibile sostituire il <body>tag corrente con il seguente:

<?php $lang = JFactory::getLanguage(); ?>
<body class="<?php echo $lang->getTag(); ?>">

Questo mostrerà il seguente esempio:

<body class="en-GB">

— Lodder
fonte

Sfortunatamente non posso votarti perché non ho abbastanza reputazione ... :-(

— smz

1

In realtà la risposta di @ Bakual è il metodo migliore. È più veloce e più facile;)

— Lodder

1

Sì, non è necessario recuperare la lingua. È già disponibile nel modello :)

— Bakual,

Non puoi votare, ma puoi scegliere un post come risposta :) Prendi tutto il tempo che vuoi scegliere (e se nessun post risponde alla tua domanda, lascialo). Le migliori risposte alla fine avranno il maggior numero di voti .... in teoria!

— TryHarder

@Bakual - Il mio sciocco errore. Il motivo è che ho appena risposto a una domanda linguistica su SO che non coinvolge il modello lol

— Lodder