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>.
Related
I'm developing a web application. It has buttons to control play/pause/stop etc. I chose to use unicode symbols as it seemed easier and more flexible than using images. The HTML for the buttons looks like this:
<button id="pauseButton">⏸</button>
<button id="playButton">⏵</button>
<button id="stopButton">⏹</button>
<button id="startButton">⏮</button>
<button id="rewindButton">⏪</button>
<button id="fastforwardButton">⏩</button>
<button id="endButton">⏭</button>
With some colour added via CSS, on Chrome/Ubuntu, this looks like this:
On Chrome/MacOS, like this:
On the Mac:
the play button is not rendering at all
it seems to be using images rather than characters, so the CSS colouring has no effect
to my taste, it looks horrible
I would like the buttons to be rendered the same on all platforms, and to look the way they do in Chrome/Ubuntu. But I don't undertand enough about what's going on.
Do I need to include a specific font in the application, and use that for the buttons?
If so, how do I find the font?
I have encoded the symbols as HTML entities. Should I be specifying them as unicode characters? Maybe that isn't even a valid question, but it demonstrates my current (lack of) understanding!
Are there browser settings that will foil attempts to make the buttons uniform (I'm thinking of font settings)?
As well as fixing my specific problem, I'd very much appreciate any pointers towards a better general understanding of this area.
Yes, you should use a specific font (search for webfonts). You will find the relevant information on how to use it (also in this site). You may need to try several fonts, to find what it appeal to you, and which includes all glyphs you want. Browsers will download the font (usually just a range), either from your site or from usual places, and display it. So you have full control.
On the other hand, uniform appearance is often a bad thing. If most webpages will display FastForward button in a similar way (and natively) on my specific computer/OS/browser, probably I would expect it. I do not really care how it will look on other computers. But it is very good to have uniform appearance if you look the uniform appearance of all elements in a page (which also requires controls on fonts). Prefer this latter uniform appearance.
Note: Unicode is just about semantics of a character, not about appearance (glyphs), so to control appearance, you need to use a specific font (something relatively new, but well supported by all browsers) or to use images (old method).
Thanks to #giacomo-catenazzi for pointing me towards webfonts. I found the following useful:
MDN Web fonts tutorial
fileformat.info for finding out which fonts have glyphs for particular unicodes
I downloaded the font from https://webfonts.ffonts.net/, but many other sources are available. MDN suggests fontsquirrel
Font squirrel web font generator - if you have a TTF or OTF font to convert into a webfont
I followed the instructions from MDN, and set up the newly created web font in the CSS:
#font-face {
font-family: 'Symbola';
src:url('fonts/Symbola.ttf.woff') format('woff'),
url('fonts/Symbola.ttf.svg#Symbola') format('svg'),
url('fonts/Symbola.ttf.eot'),
url('fonts/Symbola.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: Symbola, sans-serif;
}
but this did not work.
There was one more hoop to jump through: It seems that font-family is not inherited by form elements, although I couldn't find reference to this in the specifications (but I assume it is there somewhere).
This was fixed by:
button {
font-family: inherit;
}
I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.
I was curious how Imgur was rendering their upvote/downvote arrows:
I assumed they were images, but I found something that I did not expect:
A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:
Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.
I can imagine the reasons for:
Your site uses a standard icon set that can be mapped to single-character codes.
You only need control over foreground/background color for the icons.
You want icons that scale the same as text.
I want to know any specific reasons against using this method.
In particular, I'm looking for answers that address any of the following:
browser/platform compatibility
future maintenance implications
semantics
performance
standards compliance
The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.
I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?
However, I'm certain Imgur has thought all of this through already. So, why am I wrong?
Modern browsers (e.g. IE9 above) support custom fonts.
Even Bootstrap also uses custom fonts for icons, known as Glyphicons! It is a nice way to beautify the websites icons without having to do it from Photoshop as an image which may cause responsive issues.
They are usually used by calling the class name which links to the CSS that call the icons from the font family. Html lang would not have any issues with it.
Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.
Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.
To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.
As Mike 'Pomax' Kamermans put it:
"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"
One big reason is accessibility. There are many browser extensions which swap out a website's font for one that's more legible for people with different visual impairments. If you use fonts for your icons, these will be swapped out too, leaving your user looking at whatever string you placed in for your icons.
I envision HTML support that might look like this:
<span alt="Antonin Dvorak">Antonín Dvořák</span>
where if a browser could not render any of the special characters, it could fall back to the plain-ASCII "alt" text. Another benefit could be that searching for "cafe" would match "café" (which my browsers don't, at least not at present).
Is there any way to achieve something like this, or am I just being paranoid about a non-existent problem?
Thanks.
No, there is no such markup in HTML. What comes closest is the title attribute, which is usually shown as a tooltip on mouseover (and spoken by speech synthesizers in some situations). But it’s a dull weapon, a feature with poor implementations; if you want something like that, use a CSS tooltip instead. And it’s not really an alternative but “advisory title”.
The best you can do is to make a reasonable effort in ensuring that the characters you use will be properly displayed thanks to the use of suitable fonts. This isn’t usually a problem with Czech letters for example, since they are normally present in fonts that web pages typically use, like Arial, Verdana, Georgia. But it could be a problem if you use a downloadable font, or if you use characters with more limited support. The general idea is to use a font-family list that contains only fonts that have all the characters used on the page, and to use such a list that almost all computers have at least one of the font families. More on this: Guide to using special characters in HTML.
Does anyone know from where I can get this http://screencast.com/t/Od362Z8Glgu character, I mean the arrow, I need one just like that to copy & paste in my html file.
It is a unicode character: ▶ = ▶
http://www.fileformat.info/info/unicode/char/25b6/index.htm
See: What characters can be used for up/down triangle (arrow without stem) for display in HTML?
See Here. The character you are looking for is ▶, ▶
Like this ▷?
http://www.fileformat.info/info/unicode/char/25b7/index.htm
There are several correct ways to display a right-pointing triangle.
Method 1 : use decimal HTML entity
HTML :
▶
Method 2 : use hexidecimal HTML entity
HTML :
▶
Method 3 : use character directly
HTML :
▶
Method 4 : use CSS
HTML :
<span class='icon-right'></span>
CSS :
.icon-right:before {
content: "\25B6";
}
Each of these three methods should have the same output. For other symbols, the same three options exist. Some even have a fourth option, allowing you to use a string based reference (eg. ♥ to display ♥).
You can use a reference website like Unicode-table.com to find which icons are supported in UNICODE and which codes they correspond with. For example, you find the values for the down-pointing triangle at http://unicode-table.com/en/25BC/.
Note that these methods are sufficient only for icons that are available by default in every browser. For symbols like ☃,❄,★,☂,☭,⎗ or ⎘, this is far less likely to be the case. While it is possible to provide cross-browser support for other UNICODE symbols, the procedure is a bit more complicated.
If you want to know how to add support for less common UNICODE characters, see Create webfont with Unicode Supplementary Multilingual Plane symbols for more info on how to do this.
Background images
A totally different strategy is the use of background-images instead of fonts. For optimal performance, it's best to embed the image in your CSS file by base-encoding it, as mentioned by eg. #weasel5i2 and #Obsidian. I would recommend the use of SVG rather than GIF, however, is that's better both for performance and for the sharpness of your symbols.
This following code is the base64 for and SVG version of the icon :
/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=
When to use background-images or fonts
For many use cases, SVG-based background images and icon fonts are largely equivalent with regards to performance and flexibility. To decide which to pick, consider the following differences:
SVG images
They can have multiple colors
They can embed their own CSS and/or be styled by the HTML document
They can be loaded as a seperate file, embedded in CSS AND embedded in HTML
Each symbol is represented by XML code or base64 code. You cannot use the character directly within your code editor or use an HTML entity
Multiple uses of the same symbol implies duplication of the symbol when XML code is embedded in the HTML. Duplication is not required when embedding the file in the CSS or loading it as a seperate file
You can not use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon, but you can reference different components of the icon as shapes individually.
You need some knowledge of SVG and/or base64 encoding
Limited or no support in old versions of IE
Icon fonts
An icon can have but one fill color, one background color, etc.
An icon can be embedded in CSS or HTML. In HTML, you can use the character directly or use an HTML entity to represent it.
Some symbols can be displayed without the use of a webfont. Most symbols cannot.
Multiple uses of the same symbol implies duplication of the symbol when your character embedded in the HTML. Duplication is not required when embedding the file in the CSS.
You can use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon
You need no special technical knowledge
Support in all major browsers, including old versions of IE
Personally, I would recommend the use of background-images only when you need multiple colors and those color can't be achieved by means of color, background-color and other color-related CSS rules for fonts.
The main benefit of using SVG images is that you can give different components of a symbol their own styling. If you embed your SVG XML code in the HTML document, this is very similar to styling the HTML. This would, however, result in a web page that uses both HTML tags and SVG tags, which could significantly reduce the readability of a webpage. It also adds extra bloat if the symbol is repeated across multiple pages and you need to consider that old versions of IE have no or limited support for SVG.
The nicest looking right arrow, especially nice for breadcrumbs is the "right angled arrow" › html entity