I'm currently working in a website where some words contains č, ď, ň, ř, š, ž.
Unfortunately the special letters are displayed bigger than the normal letters.
Here an example:
I use a .properties file where I include the text like this:
Any ideas? I have another website with the same content but different cms and there it works well. CSS and font is the same for both sites.
Any suggestions?
Find a webfont containing all required characters.
Of course this may be nearly impossible if you're expecting historians to enter linear-b, hieroglyphs and other ancient and/or modern characters .. AFAIK there is no font covering all of UTF-8.
As already said, probably the used font doesn't contain that character, so the browser uses another font only for that letter, which can be different in actual size.
To avoid that, you should find a font that contains all the letters you need. I usually go to Googlefonts for that (https://fonts.google.com/) and there, at the top center, in the input field that is labeled "sentence" by default, type all the special characters needed (like č ď ň ř š ž ü ä ß © etc.). This will display these characters with all the fonts listed. That way you can see if a font contains those (and how they look) or shows "?" or similar instead.
You might find the CSS Unicode range facility useful.
If you have a font which has gaps, or in which you don’t like a certain character it is giving you, then you can change it for a character from a different font.
See for example https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/unicode-range
The unicode-range CSS descriptor sets the specific range of characters
to be used from a font defined by #font-face and made available for
use on the current page. If the page doesn't use any character in this
range, the font is not downloaded; if it uses at least one, the whole
font is downloaded.
Related
i want to design my own video player. I want to add this special character as a "volume"-button: 🔉 http://www.fileformat.info/info/unicode/char/1f509/index.htm. But it always shows a weird rectangle with the number 01F509.
Whats wrong ?
greetings
When you see a weird rectangle with the number 01F509, it means that the browser has correctly recognized the character but cannot display it due to lack of glyph for it. Either the system has no font containing a glyph for the character, or the character is unable to use such a font, due to a browser bug. For generalities, see my Guide to using special characters in HTML.
The Fileformat.info page cited has a link to a list of fonts that support the character. The list is short: Quivira, Segoe UI Emoji, Segoe UI Symbol, Symbola. (LastResort is not a real font.)
Segoe UI fonts are proprietary and available only in relatively new versions of Windows. Besides, there fonts exist in several version, and this character seems to be a rather recent addition.
This means that you wold need to use Quivira or Symbola as a web font (downloadable font). If you choose to do that, use e.g. http://www.fontsquirrel.com/ to generate the font files and the CSS code for using them. Note that both Quivira and Symbola rather large fonts, so using them just to get one glyph is a bit disproportionate.
At this point, it is rather obvious that some other approach is most probably better, e.g. using an image in sufficient size and reducing it according to font size by setting its height in em units.
To avoid encoding issues, try including the character in your HTML code using the hexadecimal entity notation: 🔉 then make sure that the font you are using contains this character, else you'll see a rectangle in place of the character.
You may create your own font with the desired character using tools such as http://icomoon.io
Also note that some browsers have issues displaying characters outside of the range 0000 to FFFF (plane 0 of the Basic Multilingual Plane (BMP)). I have experienced the issue with Safari on Windows and IE <= 8. So try avoiding this range if you want to support all browsers.
I want to take characters in the Microsoft Symbol font (taken from the w:sym tag in a docx file) and render them in html. When I look at how Word writes out the characters when I save the doc as html, I see this:
<span style='mso-char-type:symbol;mso-symbol-font-family:Symbol'>Â</span>
This appears as a script R in both Word and Word's html output.
When I write the same thing in my own html file, I see the A-hat in the regular font, and Chrome's element inspector warns that the mso- properties are unknown.
In Word's html output there is lots of mso-specific stuff but nothing I can see that lets Chrome know how to interpret mso-char-type and mso-symbol-font. I see the same behavior in IE.
Is there an easy way to tell the browser to use the Symbol font? Or do I have to explicitly translate the Symbol font characters to Unicode (using a static translation table?)
Thanks,
Wayne
The Symbol font is a privately-encoded font, i.e. it places various glyphs in positions that should be occupied by other characters according to character code standards. This means that a web page using it will fail badly whenever the Symbol font is not available, or the page style sheet is overriden, or the browser behaves correctly: e.g., the letter “” cannot be rendered using the Symbol font, so the browser will use a fallback font.
The proper way is to use Unicode encoded characters, such as “ℜ”, in a UTF-8 encoded page, with font-family on the applicable element set to contain a list of fonts that contain this character. For general notes on this, see my Guide to using special characters in HTML.
An inappropriate way that has worked on some faulty browsers is to set font to Symbol in a manner generally understood by browsers, e.g. <font face=Symbol>Â</font> or <span style="font-family: Symbol">Â</span>. But as said, if this “works”, consider it a browser bug.
So yes, if you now have data using Symbol font, it should be mapped to Unicode characters.
Note that characters like “ℜ” (Black-letter capital R, not script R) are seldom needed. In particular, the standard (as per ISO 80000-2) notation for the real part of a complex number z is not ℜ(z) but Re z.
Ok, just removing mso-symbol and writing font-family:Symbol seems to have worked. However I suspect this is not really best practice... A table for translating symbols into unicode can be found here: http://www.alanwood.net/demos/symbol.html
I have a bunch of HTML documents that contain some simple text in Windows-1252 encoding, but throughout the text there are numerous appearances of span elements with font-family: Symbol.
For example:
<span style='font-family:Symbol'>Ñ</span>
Which appears as the greek delta - Δ in the browser.
Google told me that using the Symbol font might show different results on different systems, as it's not actually a well defined font.
Is this really true? Is it "unsafe" to use the Symbol font?
If so, is there any way to reliably convert (on my own system) such symbols in the Symbol font to their Windows-1252 counterparts?
It's been always unsafe to rely on having certain font installed on all the computers/smartphones/gadgets that visit your site. There're some font embedding techniques that work reasonably well in some modern browsers but you'd need to repack the Symbol font and I doubt the copyright owner allows you to do it.
Of course, most characters in the Symbol font are not in the Windows-1252 encoding but that should not be an issue. You can use the following map to obtain the appropriate HTML entities. However, you'll have to write a script or program using a programming language (HTML is just a markup language).
When using font-family, if neither of the listed font faces are found on the client, that is without the webfont embeds, may result in changing to default font of client hence a different font replacement for what you'd show to your users.
You may want to use UTF-8 encoding and put the delta (Δ) sign in your HTML content, or use webfont embeds to provide an option, "use the font I want from this".
The problem is that the greek letter you see is just the appearance, the actual letter is something completely different.
I can think of two ways to convert it:
1. Write a script (in your language of choice) that converts each letter to it's Greek counterpart. (Ñ => Δ)
2. Take a screenshot of the document/page and use an OCR-program to convert it to Greek text.
I am trying to solve an issue with Google WebFonts. I want to use font Signika from them. As you can see it has letters such as Š, Ů declared/implemented. On our website, however, it does not render these letters but just standard and in word DOMŮ - letter Ů is in another font and in word DALŠI letter Š in another font. Is there any solution for this? Should I declare some encoding for these types of letters, or where could the problem be?
When i look at your website, i see both the words (and individual letters) you list as problematic in the font Signika.
I do notice however, that you are only calling for the Standard font set, and not the Laten-Extended Subset. On this page you may want to check the box Latin Extended (latin-ext) and update your code if other browsers are experiencing problems.
If characters are implemented in the font file but your site can not display it you need to check if you are calling right subsets:
For example, to request the latin and latin-endended subsets of Oswald, the URL would be:
http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext
For more information:
https://developers.google.com/fonts/docs/getting_started#Subsets
Hope it helps.
I have a dynamic list of names which includes some superscript keywords like "®".
I don't want to use tag to superscript "TM" or "Registered" etc. Is there any font available which does this task without adding tag for default keywords?
Thanks.
Trademark symbol (TM) which you can get by using the HTML entity ™ appears like a superscript in chrome and firefox, by default.
For ® ("Registered" symbol - encircled R) I guess, it would be better to add <sup> tag. May be, you can run a script either on the client-side or on the server-side, to add the tags to such characters.
Many fonts contain the character “®” and especially “™” in a superscript-like appearance. It is more or less an inherent feature of these characters that they should be rendered that way. It follows that if you put them in a superscript, the result tends to be bad, especially since superscripting usually reduces font size and the size is already rather small for a poor little “R” tweaked inside a circle.
You may need to change the font of your text or, less radically, change the font for these characters. If the copy text font is a sans-serif font, consider using Lucida Sans Unicode for these characters. If serif, try Times New Roman.