CODEWITHSUNDEEP
css
SmashCode
SmashCode

Reputation: 4257

How would I use CSS to change style of element depending on browser language?

Basically, without changing the html if at all possible, I'd like to be able to write a CSS selector that when the browser language = 'ar-sa' or 'ar' it has direction: rtl otherwise it has direction: ltr?

I've found some stuff about language attributes in html, but I'm trying to do this entirely in CSS so I can avoid a site redeploy (I have a mechanism to dynamically drop in CSS)

Upvotes: 2

Views: 1282

Answers (2)

joeyquarters
joeyquarters

Reputation: 131

You can use the :lang() pseudo-selector!

var html = document.documentElement;
var switcher = document.querySelector('#switch-lang');

html.setAttribute('lang', 'ar');

switcher.addEventListener('click', function(e) {
  var languageSet = getLang() == 'ar' ? 'en' : 'ar';
  
  html.removeAttribute('lang');
  html.setAttribute('lang', languageSet);
});

function getLang() {
  return html.getAttribute('lang');
}
html:lang('ar') {
  direction: rtl;
}
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>

<button id="switch-lang" type="button">Switch language</button>

Upvotes: 1

Stephan Strate
Stephan Strate

Reputation: 1421

You can not identify the browser language purely with CSS.

The lang attribute for the <html> tag and the dir (direction: ltr, rtl) attribute for the <body> tag can be used to configure the direction.

Example:

body[dir="ltr"] { direction: ltr; }
body[dir="rtl"] { direction: rtl; }

Upvotes: 0

Related Questions