Why does the lang attribute effect rendering? For example, the following html renders like this on my computer
<html>
<p lang="zh">lang=zh: 才 Aa</p>
<p lang="zh-tw">lang=zh-tw: 才 Aa</p>
<p lang="ja">lang=ja: 才 Aa</p>
</html>
But if I explicitly specify a Chinese or Japanese only font-family, then they will look identical.
Does this mean my system/browser default font family contains multiple glyph for the same character, or does the browser select different font for each language?
Oh it's a browser feature. I found the related settings.
Related
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
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.
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... ;-)
When I want to emphasize or discuss a word that is related to computer code inside a block of normal text, I use the <code> tag. For example:
If you set the variable foo to the value 'bar', then something will happen. If you set foo to any other value, then nothing that's any good will happen.
What is the best semantic HTML5 tag to use to emphasize or discuss a word that is not related to computer code? The way I am thinking of this, it would be (or could be) styled like <code> but not monospace. For example:
The word math is a shortened version of the word mathematics, which has its root in some ancient language that I am not going to research right now.
If you're looking for the tag indicates that its content is being referenced / used as an object for discussion
you can use <dfn> tag. According to MDN:
The HTML Definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
I just found the updated meaning of the <i> tag for HTML5. From MDN:
The HTML <i> element represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type:
Musa is one of two or three genera in the family Musaceae; it includes bananas and plantains.
It is a good idea to use the class attribute to identify why the element is being used, so that if the presentation needs to change at a later date, it can be done selectively with style sheets.
So, this is what I am going to do for this case... <i class="example"> or similar.
So I was casually looking in inspect element, to try to gather an image from a webpage (https://forsvaret.no/karriere/forstegangstjeneste). The creator of the page had linked to the image through the css ::before selector using content: ""; does anyone know what “” this sign means, and why it have been used ?
This is the Css:
.iconForsvaret-fighter::before {
content: "";
}
And the Html:
<ul>
<li><a href="/karriere/forstegangstjeneste/muligheter/........">
<span class="iconForsvaret-tank"></span>
<span>Hæren</span></a></li>
</ul>
Thanks ..
It is the non-printable character symbol. It is used when you are trying to display a character that is not available in the font being used to render the text.
Most likely that specific character is in the range of Unicode reserved for private use and that there is some code which sets the font for that pseudo-element to one which has a font with characters defined in that range.
"" usually indicates a unicode character that your browser cannot display. It might very well be some sort of emoji from an iphone that your operating system hasn't implemented yet.
Usually upgrading your OS to the latest version fixes those issues.
"" means your font file is missing. when you link you font then show exact font.
imagine that you want to design a website that learns English to Iranian people (Persian (Farsi) language) . English and Persian (Farsi) doesn't have any similarity in alphabet because Persian is RIGHT TO LEFT and English is LEFT TO RIGHT and completely are different . i didn't find any tags to set one font for all Persian (Farsi) words and other font for all English words . for example set B-Nazanin for Persian and set Times New Roman for English automatically that don't need to define font for every word every time . just define once these fonts . what can we do ?
thanx
One possible option is to give a lang="fa-IR" attribute/value to the <html> or to any other elements within the document when the website is shown in persian language.
Hence you can override CSS declarations by using [lang|="fa"] selector.
For instance:
[lang|="fa"] p { font-family: "B-Nazanin"; }
<html lang="fa-IR">
<p> سلام دنیا </p>
</html>
Or:
p[lang|="fa"] { font-family: "B-Nazanin"; }
<p>Hello World!</p>
<p lang="fa-IR">سلام دنیا!</p>
you can use the following link for this purpose:
Display text with two language in webpage with different fonts with font-face at rule in css
#font-face { /* Persian Font */
font-family: 'MyFont';
src: url(Fonts/BYekan.ttf);
unicode-range:U+0600-06FF;
}
#font-face { /* english font */
font-family: 'MyFont';
src: url(Fonts/ALGER.TTF);
unicode-range: U+0020-007F;
}
Usage:
body{
font-family: 'MyFont';}
tip: for different languages you can use different "unicode-range".
using style content by language in HTML is to use the :lang selector in your CSS style sheet. ex :
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
and dont forget use lang in you HTML code
<p lang="en">Ceci est un paragraphe.</p>
If you really want to use two different fonts for two different languages, your options are:
1) Use some markup that distinguishes between the languages. This could be a class attribute or (more logically, but with slightly more limited browser support) a lang attribute. Of course, you would use this for the language with smaller frequency. This is a lot of work of course. Depending on content generation system, it might or might not be automated.
2) Select the fonts so that the primary font does not contain glyphs for characters in the other language. For example, if you set * { font-family: foo, bar } and foo contains Latin letters but no Arabic characters, foo will be used for English and bar for Farsi. Punctuation characters would still be a problem. More importantly, it will be hard to find such fonts.
3) Use CSS code that selects font family by Unicode range. I won’t go into details, since this approach has too limited browser support to be practically useful yet.
However, it seems that you are trying to create a problem rather than solve one. By typographic principles, the same font should be used for copy text if possible. You should select a font that is suitable for both English and Farsi, or better still a list of such fonts (since no font is available on all computers), or a downloadable font of that kind. Failing that, you might select two fonts, or two lists of fonts, carefully selected, so that you list them both or all and browsers will use them in a natural way: using, for each character, the first font in the list that contains it.
use B-Nazanin or others for persian content and use Open sans for english contect.
If you want to set B-nazanin for persian and set open sans for english, try this code in css:
body{
font-family: "Open sans","B-nazanin";
}
If I understand your question correctly, you will mix Farsi and English on one web site.
Assign two classes, perhaps "farsi" and "english" with appropriate font-family declarations. Then put the Farsi text inside <div class="farsi"> and the English in <div class="english">.
Edited to address mixing languages: You put the <div> around the primary language and use <span> for words in the other language.
I don't think there is an easy way to finely mix languages with different alphabets and even writing directions. Perhaps you can use a macro in your HTML composition tool, or something, to accomplish adding the necessary tags.
I'm trying to create a website that supports multiple languages with the help of the HTML lang attribute. I've found this example here:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p lang="fr">Ceci est un paragraphe.</p>
</body>
</html>
I've defined german as language in my OS and tried this with different browsers, but I always see the french paragraph as well. That's what I see:
This is a paragraph.
Ceci est un paragraphe.
The lang attribute specifies the language of the element’s content. Everything else is up to the user-agent resp. the webmaster.
Example uses:
a screen reader may use it to use the appropriate pronounciation
a browser may use it to use syllabification
a search engine may use it to find relevant content
a webmaster may use it to style content accordingly, e.g. using the correct quotation marks for the q element with CSS’s quotes
By no means should user-agents hide content in a different language by default. Think of these examples:
<p lang="en">I met a nice guy there. His name was <span lang="de">Max Mustermann</span>.
<p lang="en">He said to me <q lang="de">Halt! Stopp!</q>.</p>
<p lang="en">The original title is <cite>Faust. Eine Tragödie.</cite>.</p>
When content in different languages would be hidden, they would read:
I met a nice guy there. His name was .
He said to me .
The original title is .
It seems you want to use it to realize a multilingual page. While this is possible with JS/CSS, it’s usually not the best way. Typically you might want to use separate pages for each language and link the translation with the link type alternate and the corresponding hreflang:
<!-- on the page <example.com/en/about-me>, you could link to the German translation -->
<link rel="alternate" hreflang="de" href="/de/ueber-mich" />
The lang attribute goes on the HTML tag for the whole page, and specifies what the default language of the page is. It's metadata that describes the content. What you're trying to do with it isn't what it does.
You could do what you're trying to do by using JQuery to hide all tags in the page which have a lang attribute not equal to something you specify, but you'd have to research how to discover what the system language is in the browser (assuming that's possible). If you don't want to drag JQuery into it, you could just walk the DOM yourself.