Geek Answers Handbook

Some HTML character elements are HUGE only in Firefox

For some reason, in my Firefox 12.0 for Mac OS X, my & rang; ( ⟩ ) characters are much larger than they should be. In Chrome and Safari, they look exactly the way I want them to be.

I have AddDefaultCharset utf-8 in my .htaccess , as well as <meta charset="utf-8"> in my <head> (since the group I deliver these files to may not use my .htaccess ).

Also, according to Adobe Browser Lab, IE 7 and 8 just show a square box ... is there anyone who can get these browsers to support this character? This will simplify the situation (since the colors will change, so the images are very uncomfortable, and the color does not disappear with the images).

Demo: http://cameronspear.com/demos/rang/

Here's what I see in Chrome and expect to see:

Chrome

This is what my Firefox shows:

Firefox

This is a screenshot from the Labs IE8 browser:

IE8

TL; DR: I want all these screenshots to look like the first using & rang; aka &rang; characters. Using JavaScript would even be acceptable.

Thanks.

[edit] I must indicate that this is not so important, I have the &rang; since I can change its color using CSS and make it the same for multiple browsers.

Decision

I just wanted to share what I did for posterity.

Thanks to Pointy's hints and resources, I created my own Inkscape using the template and methods described in How to make your own webfont icon. "I matched the large angle bracket to X and the small to X

One thing that I came across was that my angle should touch the baseline and only about 72% of the way to the top of the window to fit “embedded,” so the capital X was my original too high and lowercase x was more inline.

Then I converted the SVG to http://www.freefontconverter.com/ and converted to webfont with http://www.fontsquirrel.com/fontface/generator

... and that’s it.

Demo ( http://cameronspear.com/demos/rang/ ) is still working. You can see that it looks consistent across all browsers, and the onclick rotation animation approaches the point, etc.

[Refresh] I found a great resource called IcoMoon that helps create fonts and organize fonts for the Internet, and it accepts regular svg vectors, so you can do this in Illustrator and not mess up Inkscape, since IcoMoon handles key mapping and more. You can only export used icons, so you only download 3 or 4 icons if that’s all you need and not the whole font.

It is becoming an invaluable resource, and I recommend that anyone who wants to get into Icon Fonts check it out. You can learn more about the whole process from CSS-Trick 113th Screencast .

+7
source share
3 answers

Creating an icon font is simple enough for me to do this, although (for me) the process is somewhat mysterious. I suspect that there are many actual graphic artists who are better at this, and certainly many who understand the technical details more than I do.

Here 's a pretty detailed blog post on this topic. (Not mny blog.) The main thing that he does not describe very well is the relationship between the Inkscape "Artboard" area and the vertical position of each character in the font. This concerns some details, but I could never figure it out.

What I did in this way is just making a square 1024 px pixel artboard on the side. Then I set the grid in Inkscape so that the art panel is split into a 16x16 grid. This makes it (somewhat) easy in character design that will display well with a font size of 16 pixels. (Of course, you could adjust a different font size if you want, 16x16 is good for things that should be pretty small, but). Then I just make sure that when I put the glyphs on the page, they are in 1em on 1em box (or 16px on 16px, however you want to do it in your CSS) without filling. I use the <i> tags and give them display: inline-block . This gives me a lot of flexibility, and it usually works great.

The Inkscape SVG font tool, to put it mildly, is pretty crude. This is literally the result of some summer project. It works, but not much more than just that. Save often.

Now the process of creating font files is a little crazy. I am using FontSquirrel. I download .svg saved from Inksccape and then request EOT, WOFF and TTF. Surprisingly, this works.

If you just need a few glyphs, this is a pretty nice way, because you will have a file with a small font to download, and it will be cached by the browser. However, there are some problems with accessibility, and the practice is contradictory enough that some more fanatical members of the community may consider you a barbarian for this :-)

+2
source

Can images be used? They would ensure consistent browsing across all browsers. In many cases, images are preferable to character characters.

+6
source

This is a font problem. To maximize the chances of having a rare character (one that is missing in most fonts) that displays correctly, specify the maximum list of fonts that all contain.

Now on the font-family: Arial,sans-serif page, only font-family: Arial,sans-serif installed, containing a bracket. Since Arial does not contain it, each browser will use its own definition for sans-serif . If the map to which it is mapped does not contain brackets, smart browsers try to do something smart, for example, scanning through other fonts in the system, but this may still lead to the absence of any glyph for it.

This is an additional issue. It usually doesn't matter that you use entity references like &rang; instead of the symbol itself, but here it is done. HTML 4.01, &rang; means U + 232A; in draft HTML5, this means U + 27E9. IE obeys HTML 4.01 here, while Firefox uses the definition of HTML5. Therefore, it is better to use the character you need, as such in the UTF-8 encoding, or as a link to the &#x232a; .

If you can check for example. Font cover for U + 232A and write fonts in order of preference. But you should check that all fonts give an acceptable presentation. For example, if you use Cambria Math, the default line height will be very large, so you probably want to set line-height explicitly to a reasonable value, like 1.3.

Finally, and this may have been asked very first - do you really want to use the CORRECT COAL FORTRESS OR THE MATHEMATICAL RIGHT CORNER? They are brackets that should be used in combination with left angle brackets, and not with arrow symbols.

Additional Information: Guidelines for using special characters in HTML .

+2
source

More articles:


All Articles