CODEWITHSUNDEEP
htmlcssfontsmultilingual
user17477928
user17477928

Reputation:

Why does the HTML "lang" attribute change font ligatures and how can I avoid this?

On the website I'm currently developing, I'm using the font EB Garamond for some text. It's a multi-language website with a language switcher that toggles the lang attribute of the <html> element between "en" and "de".

On the English version, the text has ligatures. On the German version, it doesn't. If I go to "Inspect Element" on the German version and change the lang attribute to en, the ligatures appear.

I can turn off the ligatures on the English version by applying the CSS rule font-variant-ligatures: none;. However, turning them on in the German version with font-variant-ligatures: normal; doesn't work (not even with !important).

I would like to have the ligatures on in both languages. Does anyone have an idea how I can achieve this, and why it behaves in such a weird way in the first place?

Here's my font-related CSS code:

@font-face {
    font-family: garamond;
    src: url(../fonts/eb-garamond/EBGaramond-Regular.otf);
}

.garamond {
    font-family: garamond;
}

h1 {
    @apply text-4xl font-bold;
}

p {
    @apply mb-2;
}

.lead {
    @apply text-xl;
}

(just fyi, the @apply stuff applies classes from TailwindCSS, see font size, font weight and margin, but that should be irrelevant to the question)

And the HTML / Twig:

<div class="text-center garamond">
    <h1>{{ "SITE_TITLE"|t|e }}</h1>
    <p class="lead">{{ "SITE_SUBTITLE"|t|e }}</p>
</div>

And here's what the English version looks like: Screenshot English

And the German: Screenshot German

Upvotes: 4

Views: 784

Answers (2)

Justin Penner
Justin Penner

Reputation: 326

f-ligatures are generally undesirable in German typography because they usually occur across compound words like the fl in auflagen or the fb in laufband. Some typographers follow the same rule in English as well, and some go further to avoid ligatures that would join two syllables together.

EB Garamond was designed by a German-speaking type designer who included localization features so that f-ligatures are completely disabled in texts that are flagged as German. If you want to manually apply ligatures to German text, don't change the lang= property to "en" or "". You can simply turn off the OpenType locl feature for a single word like this:

<h1 lang="de"><span class="de-liga">schachingerfilm</span> kamera und postproduktion</h1>

.de-liga {
  font-feature-settings: 'locl' 0;
}

This would effectively apply the liga OpenType feature to the fi in schachingerfilm because the locl feature is no longer preventing it.

Upvotes: 3

Johannes
Johannes

Reputation: 67778

A workaround: The lang attribute can be used on single tags, which for example is done with <span lang="en"> tags around single words or phrases to get proper pronounciation of English words in German texts when read by a screen reader.

So if you only need that for example on a certain h1 in your page, you could use it like this...

<h1 lang="en">schachingerfilm</h1>

... and still have lang="de" or an according variable in your bodytag.

(I guess the proper screen reader pronounciation in this case is not that important for you... ;-)

Upvotes: 0

Related Questions