CODEWITHSUNDEEP
htmlencodingutf-8non-ascii-characters
glukoz
glukoz

Reputation: 41

Incorrect placement of accent mark on site with UTF8 encoding (wth cyrillic words only)

I am developing webpage with contains some cyrillic text with stress marks. To place stress mark I use utf8 character U0301 (COMBINING ACUTE ACCENT). In every editor I have already used and every cyrillic-related webpage I have already seen this stress mark is displayed above letter which is placed before this character in the text. My problem is that on my page this character is displayed above letter which is placed after this mark in text. What is more this incorrect behaviour can be observed only on cyrillic words. With usual latin words it is displayed correctly.

I set every encoding-related headers.

[EDIT]

This issue seems to be present on Firefox only (I use version 13.0.1). When I use Chrome then accent marks are displayed correctly.

Upvotes: 3

Views: 2157

Answers (3)

Lev Lukomskyi
Lev Lukomskyi

Reputation: 6677

I have used font Roboto from Google Fonts service and it had the same problem – accent placement was wrong.

To solve this I have downloaded this font (ttf version) to my computer, installed, opened photohosop and ensured that actually accents are correct! Then I uploaded font to fontsquirrel.com service and converted to my own web-font, and then accents was fixed! Except above cyrrilic «і» letter.. But, this is better than nothing.

Tip - if you have several font weights, then on fontsquirrel.com choose «expert...» and check «Style link» — it will compose css so that you will have one font name with different weights.

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201818

Select a suitable list of fonts, to be used in the font-family rule for the texts, based on experimenting with different fonts, preferably on different platforms and perhaps on different browsers, too. You can test fonts in your favorite word processor (or editor) using different font settings; the result is not necessarily the same as in web browsers, but usually similar. E.g., Calibri and Arial look OK, and so does Cambria on the serif side (Times New Roman does not have a problem with U+0301, but it does not render well in general unless the resolution is fairly high).

Also consider using some suitable font as web font (via @font face).

This sounds messy, but it’s really the practical way. The problem is threefold:

  1. In some fonts, U+0301 is just all wrong, or a little wrong. E.g., in Georgia (a generally OK font), U+0301 appears on the right of the base character, as if it were not a combining mark at all but a separate symbol. In Courier New, it’s placed over the next character. In Constantia and FreeSerif, it’s placed too right, though still recognizable as a diacritic mark.
  2. Some fonts lack U+0301 completely, forcing browsers to take it from a font other than that of the base letter. Needless to say, this may cause a mess (or you might get away with it, if it just happens to fit in).
  3. Browsers and other programs differ in their handling of combining marks. There’s not much you can do about it. Older browsers may easily produce poor results even for fonts that have U+0301 well implemented. The reason is that placing a diacritic mark properly is a complex operator: the program needs to access information about the base character, in order to place e.g. the acute differently on lower-case о than on upper-case О.

I can’t tell why you get different results on Firefox than on Chrome, unless you have left fonts to their defaults and the browsers use different defaults.

The reason why (many) combinations of U+0301 with Latin letters work well when U+0301 with Cyrillic letters fails is probably the completely different treatment. Browsers may, and often do, render a combination of a letter and a combining diacritic mark as a single glyph, corresponding to the so-called precomposed character. So if a browser sees ó, where o is the Latin letter, it internally maps this to the single character “ó” U+00F3, which is contained in most commonly used fonts.

As a typographic detail, when aiming at very good quality (which we often cannot afford...), Latin letters like a, e, o, y should look exactly the same as their Cyrillic counterparts (by shape) in the same text. The designs are identical in any decent font. But when accents are added, this may change, unfortunately. For example, in Calibri о́ (Cyrillic o with acute) has an accent different from that of ó (Latin o with acute). This is a design flaw in the font. (But in typical copy text sizes, the difference is barely noticeable.)

Upvotes: 2

anotherdave
anotherdave

Reputation: 6764

It could possible be to do with the default font that you have set on each browser, and/or the browsers own default styles? I've tried this JS fiddle — in Firefox with Times the accent is perfectly aligned, but with Arial it's decent, but a little to the right.

Chrome on the other-hand is passable with Arial, but Times is very shifted to the right.

Have you tried adjusted which font-family, line-height, font-size etc used to see if this will affect the issue?

EDIT: Additionally, just read this advice on Penn State University website:

Fonts like Times New Roman and Georgia contain Cyrillic characters in Windows, but on a Macintosh, they may be only included in the "CY" Cyrillic fonts from Apple like "Times CY".

.serifcyr {
    font-family: "Times CY", "Times New Roman", serif
}
.noserifcyr {
    font-family: "Geneva CY", "Helvetica CY", "Arial", sans-serif
}

Upvotes: 1

Related Questions