I really have scoured Google for a similar question and found nothing, which confuses me.
Anyway, on this
http://dev.subverb.net/index.php
The menu writing is different thicknesses across the two browsers. It is the same in both when the font-weight is reduced to 500, but when it is 600 it is what I want in firefox but noticeably thicker in Chrome. This also breaks my design.
I just can't figure out what this might be...any ideas?
You can't rely on font-width consistency. It's not just across browsers that it differs, but it also differs considerably across operating systems. Instead you have to create your designs to allow for some leeway in font width.
For slightly better consistency, try using html 5 #font-face, which is now impemented across all modern browsers. But even then, width can't be gauranteed -- that will just guarantee that at least the font defintion is the same.
Finally, you could use images for perfect consistency, but that is strongly discouraged. It's better to just allow some wiggle room in your designs.
Don't use the numeric values of font-weight. They aren't useful for picking multiple weights of a font family because:
browser support is poor and inconsistent
font support (describing their weights as part of a complete family) is poor
none of the built-in OS fonts you'll use in your font-family: rules have extra weights other than normal and bold anyway.
font-weight: 600 has long been problematic. Both Opera and Chrome appear to use synthetically-created bold fonts on weight 600, rather than the genuine bold font variant that is used from weight 700 up. (Synthetic fonts are usually used when bold or italic is requested on a family that doesn't have a bold/italic variant.) In addition, on Firefox/OSX, 600 used to be taken as normal.
The correct weight value that aligns with bold is 700. Better just stick with the plain normal and bold values.
Incidentally, you've also got a font-family mis-spelling (san-serif should be sans-serif).
Related
What are some algorithms that help accessibility for colorblind people? I'm guessing color reduction could help, but honestly I can't find much information on the internet other than smartphone apps (not even papers).
Rationale: Recently, my CRT monitor stopped outputting magenta, so after a little research this seems to be a bit similar to how someone with tritanopia sees. Basically, anything in the red spectrum will be output as shades of blue. Although I could buy a new monitor, I'd like to know a software-based fix; this situation has got me interested in building accessible applications.
The best way to solve legibility problems for folks who are color blind is to increase the color contrast ratio. Web Content Accessibility Guidelines require a minimum contrast of 4.5:1 (3:1 for large text).
There are a handful of contrast analyzers out there. Google's Accessibility Developer Tools includes algorithms for checking contrast and recommending alternatives.
If you were inclined, you could use this library to create a browser extension that dynamically changes CSS on a page to make content meet the required contrast ratio.
I am trying to set up clear type for my monitor, it has a bgr layout. I do not understand the settings in the cleartype text tuner.
All buttons say "The quickbrown fox..." and ask me to make a judgement. I would like to at least be able to select with confidence the subpixle layout, than make a judgement (it necessary) on the other stuff.
I do not have the time to do a multi-user double blind trial.
So what do the buttons do?, at a technical level.
Each version have some minor difference in colors. Depending on who is reading them you should see a difference and you could have a different choice.
According to MSDN website,[5] Microsoft acknowledges that "[t]ext that
is rendered with ClearType can also appear significantly different
when viewed by individuals with varying levels of color sensitivity.
Some individuals can detect slight differences in color better than
others." This opinion is shared[6] by the font designer Thomas
Phinney, program manager for fonts and core technologies at Adobe
Systems:[7] "There is also considerable variation between individuals
in their sensitivity to color fringing. Some people just notice it and
are bothered by it a lot more than others."
http://en.wikipedia.org/wiki/ClearType
I work on a project and i want to know Why there is a difference in font size(width) on web between Windows and Mac OS X. I found that all the browsers on Mac will have the same size, but in the Windows it differ from browser to anther.
i frustrated and wait to here from you.
My question now why there is a difference in width between them?
There are many possible reasons:
Different fonts. Very few Mac fonts are identical to fonts on Windows. (It's not clear if you're expecting the Windows results to match the Mac results or just for them to be consistent on Windows.)
Different default sizes. Most browsers have defaults for font and size, and they may not all be the same.
Different interpretations of font size. When you say you want (for example) a 10-point font, it's not entirely well-defined what that means. There are true points (1/72.27 inch) but more commonly computer points (1/72 inch). Do you want the character cell height? With or without internal leading? Or did you mean the actual character height or merely the font's ascent? Different browsers may choose to interpret sizes differently.
Different resolutions. Browsers may handle different screen resolutions differently. Windows has a concept of a "logical inch", which is typically larger than a true inch on displays. But how much larger is customizable by the user. Some browsers may ignore the logical inch and use the actual DPI of the device (or at least what they think the DPI is--the OS may not actually know).
Different rendering technologies. Whether you use hinting, antialiasing, subpixel rendering (e.g., ClearType), or some combination of these can slightly affect the width of text (even if everyone agrees on the exact font and the exact vertical size).
Different scales. Most browsers provide a scaling feature, and it's possible that they aren't defaulting to the same value on different browsers. Also note that as you change the scale, the text width often won't scale linearly (see #5).
Any one of these issues can lead to differences in text width (which can cascade into different word wrapping choices), making pages look different from browser to browser and machine to machine. In many cases, you might have a combination of these issues thwarting consistency.
The solution is to design layouts to be flexible. Don't create implicit dependencies on font sizes by hardcoding things (like the size of a ) and expect the text to always fit. Generally, choose sizes relative to the size of the text, and be prepared for variation in the actual text size.
There's a difference because there is no standard that mandates the text size for web page rendering. And so browser vendors are free to render text at whatever size they wish.
I've run into this problem working on HTML ads that need to render consistently. In such situations, elements even a few pixels off can make a design look amateur.
One way to get more accurate cross-platform results is to specify pixel values rather than points or ems. Such text will render at the same size regardless of device resolution, and will still scale properly when zooming in and out. Even on a Retina/HD display, since a CSS pixel isn't necessarily the same as a device pixel.
In addition, forcing the use of either a web font or a very common font, along with explicitly setting the anti-aliasing method, will get you even closer to pixel-perfect results. I've found the code below to render nearly identically regardless of environment.
html, body {
font-family: Arial, sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
On the left is the original PNG and on the right are versions reduced to roughly half the original size using width and height.
Why does the resized image look so fuzzy in Firefox? Is there anything I can do about it without changing the image file? The fuzziness is particular annoying if the image contains large amounts of math or text.
I know this is late, but you can trick firefox into rendering the image better by applying a oh-so-slight rotation. I tried to translate() the image to get the same effect... to no avail.
CSS
.image-scale-hack {
transform: rotate( .0001deg );
}
Javascript
if( "MozAppearance" in document.documentElement.style ) {
$('.logo img').addClass('image-scale-hack');
}
I avoid browser sniffs at all cost. I borrowed this sniff from yepnope.js and I don't feel bad about it.
Also noteworthy, this same trick can be used to force sub-pixel image rendering in both webkit and firefox. This is useful for very slow animations - best explained by example:
http://jsfiddle.net/ryanwheale/xkxwN/
There is a longstanding bug ticket filed in Bugzilla related to Firefox image downscaling. You might like to keep an eye on the ticket to track its eventual resolution or contribute a patch yourself if you feel able to.
The best workaround is to use the transform CSS property to apply a tiny rotation to the problem image and force sub-pixel rendering, as detailed in Ryan Wheale's answer.
The image-rendering documentation linked from the Firefox blurs an image when scaled through css or inline style answer which Su' referenced includes instructions for using image-rendering:optimizeQuality (which corrected the issue in my testing on FF4) - example:
I think your answer is in the link from above https://developer.mozilla.org/En/CSS/Image-rendering:
'Currently auto and optimizeQuality are equal by default, both result in bilinear resampling.'
'default value IE8+: bicubic (high quality)'
Next see:
http://www.codinghorror.com/blog/2007/07/better-image-resizing.html
'When making an image smaller, use bicubic, which has a natural sharpening effect. You want to emphasize the data that remains in the new, smaller image after discarding all that extra detail from the original image.'
I can think of a couple of possible workarounds, but neither are simple:
Resize the image on the server. Either serve it up at half size, and allow Firefox to scale it up to full (which presumably it will be ok at), or have different URLs for the different sizes of image.
You may be able to make this work in the browser with plugins (but the example I found doesn't actually do what you need, so I've removed it).
TL;DR: Image scaling is not likely to be fixed soon. About anywhere.
Longer version:
Eris Brasseur has a page that deals nicely with the broader question "Why is just about any image scaling software so bad?"
http://www.ericbrasseur.org/gamma.html
Since W3C's position on this matter is roughly that it's better to have an incorrect but equally incorrect implementation everywhere, they shun any proper dealing with Gamma (which would complicate matters slightly). Thus anyone accustomed to web standards is likely to continue ignoring Gamma, leading to the effects described by Eric and in this thread. This ensures that even downscaling is far from being well-defined, as Jeff Atwood puts it in an Article linked in another answer.
In such an environment, methods like Lanczos thrive whose claim to fame is mostly that they perform quite well even if implemented incorrectly.
In other words, browsers are the software equivalent of McDonald's burgers, and that fact will stay. Its implications need not, but the odds are skewed.
Now (2017) the bug is closed 2 years ago. A short Test:
FF, 50%:
FF, 25%:
A workaround for this issue is just to resize the original image with an image editor to the desired size and to use the image as it is, without defining it's width and height in the style sheet.
I have an text outline tree where i display a lot of information There are already upto three icons for each item (one in front, one after the text and one at the left side). But i still need to show more.
So i used different text colors. Unfortunately only the red=stop,forbidden,protected and green=okay,valid,allowed is so universal known. I mix it with black/blue which stands for none available information items.
My question is: Do red/green blind people recognize the difference of this colored texts?
I don't really care about real color blind people as they are in the 0,001% range while red/green blindness is serious high in the one digit percent range.
EDIT:
I heared from someone that he is red/green blind and is able to tell me if this is a green text or a red text and only if this is a real mixed color salad they are not able to differenciate between it. So the question is: are text items in a GUI list/tree so far away from each other that red/green blinded people can see them as different shades in whatever color they see.
NO, we do NOT see the difference!
I worked at a company that used red/green for information regularly, and it was very confusing.
But, do as they do in traffic lights, and add a little blue to the green color.
FF0000 and FF00CC is easy to tell apart (for me, at least).
Also, its easier to tell larger text/things apart. Small pixels or pixel-thin lines are harder to see the color on.
Red/green alone is bad for this reason. My boss actually has red/green colorblindness, so he points out anytime we mess up and he can't distinguish something.
Consider an:
outline box (eg dashed)
Background color
text bold/not bold
Yet Another icon
A variation or overlay on an existing icon
A mouseover hint (title)
A mouseover is actually a generally useful thing - while an icon may be intuitive to you, it might not be to someone using your app for the first time.
I agree with the suggestion to make it black-and-white to try it out- though there's also a couple Firefox extensions that do this: https://addons.mozilla.org/en-US/firefox/search?q=colorblind&cat=all -- unfortunately, none seem to be updated for 3.5.
Colors may give cues, but they should not be the only way to find that information.
Personal
I have a red/green deficiency, here are some of my experiences. Keep in mind color vision is very individual even among normal-sighted people. Some of that may be true in general.
Telling colors apart is easier than identifying colors
closeby large areas are easier to tell apart
Trying to tell colors is strenuous, it's less of a cue, more of a task
(i.e. color coded UI exhausts rather than helps me)
I can tell RGB(255,255,0) from RGB(0,255,0) and ident when they are side-by-side,
and can tell you "which is greener". However, I can't play most puzzle games that
use these for color-coding pieces.
Mixed colors give the most problems.
An intern was once confused by my problem, because the desktop background - some paintshop landscape - was all pink. I didn't know.
Imagine a list control (like an windows explorer file list) where file names are black, red or green:
telling red apart from black is hard. I usually don't notice until someone tells me. Even on decent TFT's, from a slight angle they wash. I can identify correctly if someone tells me "some of these are red" and I look hard.
I once deleted 3 days of work because I failed to notice that the list of files on the left was red not black (this was a font with 2 pixel line width!).
having a single red or green item among black ones, it's hard to tell whether it's red or green.
People deal differently with defects, and though I've never found a color vision deficient person to be ashamed or hiding about it, we still don't like to have it rubbed in. Some people, incidentally, get very argumentative because they can't imagine I can tell apart X and Y easily, but not X and Z. My best way to quiet them is to ask them to explain the color "blue" without using any color names.
General thoughts
Well chosen colors make valuable cues, improving UI transparence immensely. Don't stop using them for good - just allow people who don't see them easily to still use your software.
Allow customization of colors, and provide color schemes to pick quickly. I really don't want to select 14 individual colors.
Using slightly-off colors often looks much more professional than the "primaries" (one or two channels at 255, the last at 0).
Color perception differes a lot. What looks good to you on your monitor might suck everywhere else.
First, there's color reproduction of the monitor - they have huge differences in linearity, balance and isotropy. Unless you use the same brand from the same batch, or use properly calibrated professional monitors, they make for the biggest difference.
Second, is your sensors. There's an about 40/60 distribution among people of red perceptors working at different wavelengths. There are many more subtle personal differences.
Third, it's your brain. A lot of color perception is learned and affected by cultural background. see e.g. here.
7% of American men have some form of Red-Green color blindness. The rate among women is much lower. Incidence rates in other countries vary, but part of that is due to the low rate of diagnosis.
So, for the sake of ADA-compliance and conformance with UI best practices, don't use red and green colors alone as an indicator.
Also, no one wants to use an application that looks like angry fruit salad.
Could you maybe use bold/not bold/<span style="color:silver">grayed out<span> instead? (Sorry couldn't make the text silver colored.)
I agree with a great deal of what you say.
Red and Green are a very recognizable combination in terms of meaning.
In terms of colour blindness, the shades of green and red differ greatly in how "bad" they are. If you want to make sure you have a usuable UI look at it in black and white. (I take a screenshot and give it 20 seconds in Photoshop.)
If you can use what you see, move on. Otherwise, address the problems.
Kindness,
Dan