tl;dr; - use the toggle button, see what happens:
jsfiddle.net/zt6gapL5/
When building a website, I naturally have a lang="xx" attribute on mu HTML tag. Took a while to delete each and every part of the document, to finally realise that it was causing my font to look totally different. The website is in "bg", but the design I've been given, using that exact same font, must be with a lang="en" in order to look right.
On chrome, when I put
-webkit-locale: "en"
as CSS, it works. But only for chrome, obviously.
As you can see, the font is totally different:
lang="bg":https://i.stack.imgur.com/da0gf.png
lang="en":https://i.stack.imgur.com/pP6Cp.png
Option 1: using lang="en", when the site is NOT in EN
Option 2: removing the lang attribute whatsoever. Does the meta tag still work?
Option 3: Using CSS to fix things, however I couldn't find a solution for firefox...
-webkit-locale: 'en'; fixes the problem for webkit browsers. Sadly diversity is against me this time.
Maybe this will help get the right characterset. https://en.wikipedia.org/wiki/KOI8-U ....KOI8-U (RFC 2319) is an 8-bit character encoding, designed to cover Ukrainian, It is based on KOI8-R, which covers Russian and Bulgarian
Related
I am currently using the utf code "\293B" for an arrow to put before the reply link in posts. the html is declared utf 8. The arrow works in firefox and explorer but not chrome. i saw that wordpress uses content: "" ("\f412";) (for example here:http://cinematicamsterdam.wordpress.com/2014/05/26/cinematic-city-a-retrospect/) that works accross all browsers but I can't paste it in my document. How can I do it?
i'm a newbie here, sorry if the question is simple..
This does not primarily depend on browsers but on fonts installed in the system; secondarily it depends on your CSS settings and on some shortcomings in browsers. For a general description of such issues, see my Guide to using special characters in HTML.
In particular, U+293B BOTTOM ARC ANTICLOCKWISE ARROW “⤻” has rather limited font support. A large number of systems have no font containing it. It could be used rather (though not 100%) reliably using a downloadable font, but it sounds like you are generating HTML-format e-mail messages, so downloadable fonts are hardly a feasible option.
The best short appears to be to an image instead.
What your describe as WordPress usage is a Private Use codepoint. In practice it works only with a particular special font. You can copy and paste it, but outside the private use context such as use on a web page with a specific font, it has absolutely no meaning and should not be expected to have any particular rendering, or any rendering at all.
There are a number of asterisk (*) types as you can see here:
http://www.eki.ee/letter/chardata.cgi?search=asterisk
Even now, we can see that some of these characters like the one with the code: "204E" also known as "low asterisk" is not rendered in HTML (at least while using Chrome anyway).
You can see the character here:
⁎ -> ⁎
Other similar types work however:
✢ -> ✢
✣ -> ✣
✤ -> ✤
Of course out of all the possible types, the authors of my input data have chosen ⁎ to work with.
It makes me think it should be somewhat general, because I saw solutions where a tiny image was used instead of this character in the entire HTML document. Needless to say I do not like that approach even a bit.
Is there a way to make this work in HTML? Is this possibly a browser specific issue?
UPDATE:
Internet Explorer 9 and Google Chrome also fail to render this special character.
Firefox and Chromium (Ubuntu) seem to be able to render it.
Please note, that I would like to find a general solution if possible.
My HTML code:
<html>
it works in chromium though ⁎
</html>
I use Chromium in Ubuntu, and it works fine in it.
and here goes screen shot of IE, in case you want to see it.
Furthermore: for those looking for a middle asterisk ∗ -> ∗
This primarily depends on the fonts installed in the user’s system, not on browser (though some browsers, most notably IE, might be unable to utilize all the fonts in the system, as they should). Regarding e.g. U+204E, font support is relatively limited: no font shipped with Windows contains it, whereas Linux systems probably have some font that contains it.
Using #font-face for some suitable free font, you could make the character display in most computers (excluding basically just those that have font loading disabled). See my Guide to using special characters in HTML.
In this case, that would probably be overkill, if you just need e.g. a low asterisk. A normal asterisk, in a lowered position, should be sufficient – at least compared with the overall typographic quality of HTML documents. Example:
<style>
.low {
position: relative;
top: 0.55ex;
}
</style>
Compare: *⁎<span class=low>*</span>
(Using relative positioning is safer than using vertical-align, directly or via the sub element, since vertical-align usually messes up line spacing.)
i cant make the TM symbol to show up as it should, the SM symbol is working fine. The test page you can see is located at http://codita.ro/test/
I have deleted both reset.css and normalize.css and its not because of the resets..
Here's the page if you can track this down so i dont have to wrap the symbol in a span across the site to make it look smaller.
example of code:
the SkinLaze aesthetic
The symbol “™” is there, just pointlessly small (I copypasted it from the page into this message). This is a flaw in the design of the font being used.
If you cannot change the font, consider using a different font for “™” and probably for “©” too (it looks broken). The simple way to do this is to wrap the occurrences in span elements with class and use CSS to set the font on them. A more modern, but somewhat less cross-browser way, is to use #font-face with unicode-range.
The reference is incorrect by the specs; ™ and ™ are correct. But nowadays all browsers accept too.
You need to use HTML entities for that character. Use ™ in your HTML. More about HTML Entities you can find out under this link
It looks to me like the font you're using, Tinos Regular, doesn't support the trademark symbol.
I'm no expert on workarounds for this sort of thing, but the first that springs to mind is to drop back to a font that includes the glyph:
/* CSS */
.fallback-font {
font-family: serif;
}
<!-- HTML -->
This is trademarked<span class="fallback-font">™</span>.
EDIT: While our solutions are basically the same, I'd defer to Jukka on this one, who clearly knows what he's talking about more than I do :D
On my tool AmpWhat HTML entity reference, use the "f" button at the bottom to try out different fonts. Some have custom glyphs, and some fallback to other fonts. Although not its primary purpose, you can explore what characters are supported in different fonts.
Alternatively, use suptm element, as in <sup>tm</sup>.
In my site I need to display "—", but it looks like :
( http://i.imgur.com/CiLIo.png )
in Google Chrome and Opera, but looks ok in Firefox and IE9.
Can someone supply working code of this sign ?
I can't be sure what you want to display 100%, since I am on Chrome :), but that looks like an m-dash and the correct way to display it would be to write in your code — or —. It could be thought that that character is missing from the font Chrome and/or Opera is using on your system.
Check out this link: http://tlt.its.psu.edu/suggestions/international/web/codehtml.html
To quote it:
“Smart (curly) quotes” (vs. "plain (straight) quotes") and long dashes such as em dash (—) and en dash (–) are actually considered "special characters" in HTML.
So use an m- or n-dash: — or –
The odds are that the page uses some odd font that is broken, containing “ó” in place of the em dash, and that some browsers are able to analyze the font better than others. If this were just an encoding problem (which was my first thought, too), then surely — would work.
It would be an odd font, but it’s impossible to analyze the issue further without more information. A URL would probably suffice.
Try adding this line in your document <head>:
<meta charset="utf-8">
Charset sets a character encoding that specifies to the browser / document reader what kind of characters to expect. That way, it can handle your text appropriately and in an expected manner. In this case, we're using "utf-8" as it supports a wider range of characters.
Also / otherwise, click the Wrench icon in Chrome, hover to Tools, hover to Encoding, and see which encoding is checked.
I have built a custom context menu but have found annoyingly that when I right click on my site in firefox text and images just seem to randomly get selected.
The link below is a basic html dump of the page that is having issues. You can see that when you right click it in Firefox, certain elements are highlighted. Very annoying! This must be a purely html markup problem in Firefox as there is absolutely no CSS or JS on this page.
Example Here:
http://pastehtml.com/view/1e16jup.html
Love to hear your thoughts/suggestions...
There are a lot of errors in this page have a look at the validator result here.
Maybe it gives firefox a lot of problem rendering the page properly.
Close all the <meta> and <img> tags, <script> must have proper type attributes, tags like <h1> shouldn't be placed inside of <a>, <p> neither.
I'm assuming you mean the HTML5 contextMenu? Because this is not implented in any browser.
A bit of quick investigation seems to demonstrate that the header+footer elements have this behaviour. Also, lists appear to have it as well. This is because those elements have a certain semantic use and this behaviour seems consistent with those semantic uses. Check out the specification to see how these elements are intended to be used.
I'm firing blind but I'd suspect you can override this with -moz-user-select - but this is going contrary to the Firefox user experience. I wouldn't recommend it at all.