Como adicionar uma classe CSS a <body>, dependendo do idioma ativo

8

Estou criando um site multilíngue, onde gostaria de basear alguns dos meus estilos no idioma ativo.

Pense algo como isto:

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

Alguém sabe de uma extensão capaz de fazer isso (por exemplo, adicionar uma classe à tag, dependendo do idioma ativo)?

extensions smz
fonte
11
Apenas um pequeno ponto; Neste exemplo, você está modificando o conteúdo, não o estilo, com base no idioma. Você já pode fazer isso com muita facilidade no Joomla, é claro, sem a necessidade de nenhum CSS.
Seth Warburton

Respostas:

14

Na verdade, existe uma solução mais fácil para o seu problema. Qualquer modelo sensato (incluindo todos os modelos que acompanham o Joomla CMS) definirá o langatributo no elemento HTML. Isso permite que você use o :lang()pseudo-seletor de CSS .

Seu exemplo seria assim:

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

Isso tem algumas vantagens. Para iniciantes, ele funcionará independentemente do modelo ou mesmo com outras soluções além do Joomla, como é feito no navegador.

Também funcionará bem com partes incorporadas em outros idiomas, desde que o langatributo esteja definido corretamente. Por exemplo:

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

Por fim, o Joomla não apenas produz o idioma, mas o local. Portanto, seu site pode usar en-GB, outro en-US e o modelo refletirá isso. O uso :lang(en)também corresponderá, mas você também pode usar :lang(en-US)para segmentar apenas o inglês americano.

Rouven Weßling
fonte
Obrigado pela sua resposta Rouven: muito interessante e vou experimentar isso também.
smz
Bem, Rouven, no final do dia, devo dizer que adotei o seu método: muito elegante, nem mesmo a menor modificação no meu modelo e isso abriu meus olhos para mais possibilidades que agora estou tentando aproveitar (módulos HTML personalizados multilíngues e artigos ...). Mais uma vez obrigado e muito obrigado a @Bakual e Lodder também, é claro!
smz
Impressionante. Fico feliz em ouvir que eu poderia oferecer alguma inspiração.
Rouven Weßling
Esta é uma resposta brilhante, eu não fazia ideia!
Codinghands
5

Gostaria apenas de modificar o arquivo index.php de modelos e adicionar a classe diretamente lá.

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

Atribuiria o idioma atual como classe à tag body.

Bakual
fonte
Incrível: ainda mais fácil!
smz
Obrigado Bakual: adicionei seu código ao meu modelo e ele funciona perfeitamente. Eu "aceitei" sua resposta.
smz
Estou procurando fazer algo semelhante para adicionar o alias à classe corporal. Mas não quero substituir o modelo em caso de atualizações. Eu estava pensando em criar um plug-in de sistema, mas existe uma maneira de adicionar essa classe ou devo usar JavaScript?
Eoin
3

Uma pequena coisa a acrescentar em relação ao método de Rouven; o suporte ao navegador é melhor para seletores de atributos do que para o pseudo-seletor de idioma; portanto, você pode considerar usar algo parecido com isto para direcionar seus estilos:

[lang="en-GB"] .artist {…}
Seth Warburton
fonte
Obrigado, @Seth! Vou tentar sua solução de segmentação. Que tal segmentar com os dois? Isso tornará a solução ainda mais compatível?
smz
Isso qualificaria demais os seletores ou aumentaria o número de inchaços desnecessários. O seletor mais curto é sempre a melhor escolha, pois mantém a especificidade baixa, permitindo substituí-lo facilmente, se necessário. Quanto mais específico for o seu seletor, mais difícil será substituir, e é por isso que você nunca deve usar IDs em seu css. Usar os dois não lhe daria mais compatibilidade com o navegador.
Seth Warburton
Olá, @Seth! Eu tentei sua solução, mas parece não funcionar, pelo menos com o meu Joomla! local. Pelo que entendi, a única indicação sobre o idioma em uso está na diretiva <html> que diz: <html xmlns = " w3.org/1999/xhtml " xml: lang = "it-it" lang = "it -it "> no caso de italiano ou <html xmlns =" w3.org/1999/xhtml "xml: lang =" en-gb "lang =" en-gb "> no caso de inglês. Isso deve ser suficiente para a sua solução de segmentação? Ele não parece tão ...
smz
Sim, esse seletor direciona o elemento html com base no atributo, que neste caso é o idioma. No entanto, os atributos diferenciam maiúsculas de minúsculas; portanto, você precisa usar: [lang = "en-gb"]
Seth Warburton
1

No index.php do seu modelo, você pode substituir a <body>tag atual pelo seguinte:

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

Isso produzirá o seguinte como exemplo:

<body class="en-GB">
Lodder
fonte
Infelizmente, não posso votar em você, pois não tenho reputação suficiente ... :-(
smz
11
Na verdade, a resposta de @ Bakual é o melhor método. É mais rápido e mais fácil;)
Lodder
11
Sim, não é necessário buscar o idioma. Ele já está disponível no modelo :)
Bakual
Você não pode votar, mas pode escolher uma postagem como resposta :) Demore o tempo que quiser (e se nenhuma postagem responder à sua pergunta - deixe-a em branco). As melhores respostas acabarão tendo mais votos .... em teoria!
TryHarder
@Bakual - Erro bobo meu. Motivo sendo Acabei respondeu a uma pergunta relacionada idioma no SO que não envolve o modelo lol
Lodder