I have the following specified on body:
body {
font: 63.5% Helvetica, Arial, sans-serif;
In Virtual Machines, I am unable to setup an IE7 installation to reproduce this problem, but on others' machines, some with IE7 render the font on the page abnormally large. The actual CSS and html are hundreds of lines long across multiple files, but I'm at a loss as to why only CERTAIN IE7 environments would produce this behavior.
Any thoughts on where I should be looking?
Zoom is 100% and text-size is medium. Although text-size IS medium, setting the text-size to anything larger than medium on my machines and VMs produces the same exact problem: overlapping text and images. Hmmm....
Display size in windows is set to normal (96dpi)
The following article was helpful for me:
http://www.lealea.net/blog/comments/web-dev-problem-win-ie-on-widescreen/
Basically IE has a "feature" for some screens (likely dell) that messes up how certain pages render. The fix has to do with turning off this feature via registry.
You can try it with the following command (start -> run):
reg add “HKCU\Software\Microsoft\Internet Explorer\Main” /v UseHr /t REG_DWORD /d 0×00000000 /f
Dell screws with font installations, for some reason, and will fuss up a number of fonts if any "Dell software" is installed.
This is a bit of shot in the dark, but you could check what the Text Size is set to in IE. If you go View Menu > Text Size and reset it to Medium.
Wild guess, but it might have something to do with the DPI setting. I'm pretty sure IE7 is using that setting, and if that setting is not the same on all your environments that might explain your problem.
On Windows XP you change it by going to Desktop -> Properties -> Settings -> Advanced
Here you can chose between normal size (96 dpi) and large size (120 dpi).
Do the users have a differet text size set?
(source: microsoft.com)
I ran into this problem lately, and it turned out that it was due to text size.
Related
I recently discovered this historical document, which purports to act as a test of UTF-8 encoding for whatever application displays it.
When I paste it into my terminal (iterm2), it loads the box drawings at the end beautifully (except for a couple at bottom right):
But in both Chrome and Firefox, they are crooked and clearly wrong:
It seems the difference has to do with the width of the rendered character: for example "╲" displays in my terminal as wide as other characters such as "a", but in the browser it displays wider.
Is this a deliberate choice, and if so what inspired it? If not, where is the right place to file a bug?
EDIT
Thanks to Tom Blodget's answer, I am now aware that fonts are an important consideration. I'll clarify:
In my screenshots above, Firefox and Chrome are using Courier as the monospace font, while the terminal is using Monaco. In both contexts, the font seems to apply as much to the box-drawing characters as to the ASCII ones: when I change the font, the appearance of the drawings changes as well as that of the surrounding text.
When I switch the terminal to either Courier or Courier New, it shows the box drawings equally well -- in some ways better!
When I switch either browser to Monaco, it still shows the box drawings wrong, again from characters apparently displaying at a wider-than-monospace width.
So it still seems like the browsers are doing something wrong.
When I go to dev tools, I see the entire test is one pre element. Several fonts are being used on my system. Everything looks okay except the hatch pattern on the right.
If I hack out all of the other text, the only font used is Consolas and it looks okay. I think it's down to which fonts you have, how the browser prioritizes them, especially when it has to use more than one, and (conjecture) two monospaced fonts need not have the same width.
A terminal is likely to be less adept at using multiple fonts, instead, using one fixed one or selecting one "best" match for the required characters.
[Google Chrome 72.0.3626.96 on Windows 10.]
This is likely the same as https://bugs.debian.org/981577
If you have any old fonts installed that don't cover the unicode BOX DRAWING range, it's likely that your browser is stitching them together. While each font itself might be monospace (each glyph is the same width within the font), the combination of fonts might not be monospace (because glyph width differs between fonts), which is why the alignment fails.
I found on my system that uninstalling the legacy Bitstream Vera font resolved the issue. (Bitstream Vera has been superseded by DejaVu Sans)
Default fonts on my site are defined in an external stylesheet as:
body { font-family: Arial; font-size:62.5%;}
This works fine in Windows and Mac.
To test my site I installed Linux Mint 13 (Mate) and loaded a selection of browsers from the Repository. I made two installations on separate PC’s. I left all browser settings as their defaults.
Firefox, Opera, Konqueror and Reconq displayed my pages as expected.
Web (Epiphany) overrides the default font style (i.e. it is not Arial) and also displays too large a font size.
Midori displays too large a font size. (installed in windows, midori displays the correct font size).
I believe Web (Epiphany) is designed principally for the GNOME desktop environment and maybe this is a factor or do I need to design differently for these two browsers to make them display the fonts correctly in Linux?
It seems that some distributions of Linux don't include the Arial font. I added Liberation Sans as an alternative font and this seems to be okay.
I don't understand however why some of the browsers didn't need this. Unless they include the font with the browser or accurately map some alternative?
I have been making my own webfont taking as a starting point articles from web designer depot and intridea.
I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).
I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?
I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.
My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?
This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.
I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.
Some reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations
There's a webapp, icomoon : http://icomoon.io/app/
It make the job pretty well but you have to test the rendering of the different icons.
They offert a lot of icons if you don't want do design everything.
I had the same problem, and solved it by manually setting the metrics for all three types.
You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413
I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.
There are small lines appearing sometimes in front of words. In the pictures they are to the right of +syntax/ and swo and delmenu.vim.
Is this a bug or those lines mean something?
Do this happened to you before?
Would they get worse in the future?
PS: I'm using Microsoft Windows XP SP2 AMD
alt text http://img97.imageshack.us/img97/7673/picpd.jpg
EDIT: I change the font to Consolas and they disappeared. Is there a way to solve the problem while still using my favorite font, Monaco (and not turning off Cleartype)?
This is caused by cleartype font smoothing.
If you use a fixed font for gvim the problem goes away (.fon files). ttf files contain font smoothing information which gets messed up in gvim.
fixedsys renders well. There are a bunch of other ones that also work well.
An alternative is to turn off font smoothing altogher using the display properties, but that will have undesirable effects on all other applications.
This does indeed look like a rendering bug. You should report it to the gvim team. But you should also never use jpegs for screen shots - the compression doesn't work nearly as well as pngs, and could potentially introduce distortion in shots exactly like this one.
Just a guess, but it may be related to the font you are using. Maybe you could try to change it to see if these lines still appear, or disappear, or move to other lines ...
Our (beloved) designer keeps creating PNG files with transparent backgrounds for use in our applications. I'd like to make sure that this feature of the PNG works in "older" browsers as well. What's the best solution?
edits below
#mabwi & #syd - Whether or not I agree about the use of a PNG is not the point. This is a problem that I need to solve!
#Tim Sullivan - IE7.js looks pretty cool, but I don't think I want to introduce all of the other changes an application. I'd like a solution that fixes the PNG issue exclusively. Thanks for the link.
IE PNG Fix 2.0 which supports background-position and -repeat!
Also paletted 8-bit PNG with full alpha transparency exist, contrary to what Photoshop and GIMP may make you believe, and they degrade better in IE6 – it just cuts down transparency to 1-bit. Use pngquant to generate such files from 24-bit PNGs.
I've found what looks to be a very good solution here: Unit Interactive -> Labs -> Unit PNG Fix
update Unit PNG is also featured on a list of PNG fix options on NETTUTS
Here are the highlights from their website:
Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter
attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call
functions.
Allows for auto width and auto height elements.
Super simple to deploy.
IE7.js will provide support for PNGs (including transparency) in IE6.
I've messed with trying to make a site with .pngs and it just isn't worth it. The site becomes slow, and you use hacks that don't work 100%. Here's a good article on some options, but my advice is to find a way to make gifs work until you don't have to support IE6. Or just give IE6 a degraded experience.
Using PNGs in IE6 is hardly any more difficult than any other browser. You can support all of it in your CSS without Javascript. I've seen this hack shown before...
div.theImage {
background : url(smile.png) top left no-repeat;
height : 100px;
width : 100px;
}
* html div.theImage {
background : none;
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="layout/smile.png", sizingMethod="scale");
}
I'm not so sure this is valid CSS, but depending on the site, it may not matter so much.
(it's worth noting that the URL for the first image is based on the directory of the stylesheet, where the second is based on the directory of the page being viewed - thus why they do not match)
#Hboss
that's all fine and dandy if you know exactly all the files (and the dimensions of each) that you're going to be displaying - it'd be a royal pain to maintain that CSS file, but I suppose it'd be possible. When you want to start using transparent PNGs for some very common purposes: a) incidental graphics such as icons (perhaps of differing size) which work on any background, and b) repeating backgrounds; then you're screwed. Every workaround I've tried has hit a stumbling block at some point (can't select text when the background is transparent, sometimes the images are displayed at wacky sizes, etc etc), and I've found that for maximum reliability I'll have to revert to gifs.
My advice is to give the PNG transparency hack a shot, but at the same time realise that it's definitely not perfect - and just remember, you're bending over backwards for users of a browser which is over 7 years old. What I do these days is give IE6 users a popup on their first visit to the site, with a friendly reminder that their browser is outdated and doesn't offer the features required by modern websites, and, though we'll try our best to give you the best, you'll get a better experience from our site and the internet as a whole if you BLOODY WELL UPGRADED.
I believe all browsers support PNG-8. Its not alpha blended, but it does have transparent backgrounds.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
You sort of are, and you sort of aren't.
IE6 has no support natively for them.
However, IE has support for crazy custom javascript/css and COM objects (which is how they originally implemented XmlHttpRequest)
All of these hacks basically do this:
Find all the png images
Use a directx image filter to load them and produce a transparent image in some kind of format IE understands
Replace the images with the filtered copy.
One thing to think about is Email clients. You often want PNG-24 transparency but in Outlook 2003 with a machine using IE6. Email clients won't allow CSS or JS tricks.
Here is a good way to handle that.
http://commadot.com/png-8-that-acts-like-png-24-without-fireworks/
If you export your images as PNG-8 from Fireworks then they'll act the same as gif images. So they won't look shitty and grey, transparency will be transparency but they won't have the full 24 bit loveliness that other browsers do.
Might not totally solve your problem but at least you can get part way there just be re-exporting them.
I might be mistaken, but I'm pretty sure IE6 and less just don't do transparency with PNG files.
I have two "solutions" that I use. Either create GIF files with transparency and use those everywhere, or just use them for IE 6 and older with conditional style sheets. The second really only works if you are using them as backgrounds, etc.