Is there a good way to create crisp, clear, LARGE font in webpages? I need to create a tag cloud effect on my homepage with different font sizes and colours.
I've got it set up in HTML/CSS but on the older browsers or OS's which don't support anti-aliasing as default it looks a bit... crappy.
I've played with sIFR, which worked beautifully but gave me some horrible load effects but I'm now wondering if there is a way to:
a) do browser/OS detection to split users by browser/OS combinations which I KNOW support anti-aliasing (they get raw HTML) and by "others" who get an image tag.
b) Some sort of JavaScript to add antialiasing?
c) Permanent solution to load a BG image in the div and hide the HTML text. (I know, I know, Google horror stories about de-indexing... but is it possible?)
a) Of course you can use browser detection. The easiest way to do this is probably using jQuery's browser method. (jQuery is an awesome JavaScript library that makes a lot of JS-development easier in case you haven't heard)
Depending on what browser (or OS) results you get, you could present the user with different solutions, from normal text to something like a Flash solution.
However, I advise against it. Things look better on new machines than old ones. That's just the way it is, which is why I recommend against spending precious time on minor glitches in older browsers. -- Unless users with older browsers are your main demographic of course. In this case, how about you just do it in Flash altogether? No use coding up two solutions if one always works, right?
b) You can in fact create anti-aliased text via JavaScript. Have a look at my project Die Stimme Gottes ("Voice of God" -- not for the religiously squeamish) for an example. In this project, I used the excellent typeface.js for this.
c) Just use CSS, maybe?
h1.welcome {
background: url('the-welcome-image.png') no-repeat;
color: transparent;
}
+1 Hank's comment. You have very little to gain by doing this. Some desktop browsers (including IE7+ and Safari) turn on anti-aliasing by default even when it's off at an OS level, and modern (post-XP) OSs tend to turn it on by default anyway. By forcing AA on the rest, you'll:
(+) improve the display a little for IE6 and XP+Firefox users who unwittingly don't have AA
(-) make loading slower for everyone (but especially users of limited mobile devices)
(-) defeat preferred font sizes
(-) unnecessarily annoy the luddites who deliberately disable anti-aliasing because it's “all blurry”(*)
(*: there are limited cases where this does even make sense, particularly for old, fuzzy CRT monitors.)
By the looks of it the best methods (in no real order) are:
1) Use an image. If you rely on SEO for the site then by all means add html and hide it using css using one of these methods
2) typeface.js - JS which will work across most modern browsers. Has some bugs and glitches but works nicely. If you're going to force anti-aliasing on your users then this works. Use sparingly. Author working on Opera and IE8 compatability though...
2) sIFR - Excellent script which dynamically replaces your selected areas of text with flash movies. Again some bugs and glitches, but if you're simply interested in awesome looking font then this is perfect. Increases your page load though, so as ever more is less, use sparingly.
I tend not to go with JS heavy solutions, as I like to have lightning quick page loads, but if you HAVE to have some good looking fonts, then these seem to be the most graceful and simple methods.
-webkit-font-smoothing:antialiased;
Force background color, redefining it for the class or element with the same background color. It works.
span.your_class {
writing-mode: tb-rl;
filter: flipv fliph;
background-color: #006cb8 !important;
}
Flash or Silverlight are your best bets for great looking font rendering
Related
I've been pretty impressed with Katex's performance. It seems like a good fit as a rendering engine for a WYSIWIG latex editor. However, with MathJax, I can easily inject HTML/CSS in arbitrary locations using the \class directive. I can then use these injected classes for blinking cursors, gray boxes, and what not. For example:
Is there a way to do the same thing with Katex? In particular, I need the ability to inject HTML/CSS in arbitrary locations in the equation.
This is not currently supported. There is an open issue on the Github page.
I want to use After Disaster font on my website, but I can't achieve the same vertical position of displayed text in different browsers. Even more - it is dependent on system too. You may test this:
http://jsfiddle.net/z7rby/1/
On Linux Google Chrome displays text about one pixel higher than Firefox and Opera. On Windows Google Chrome displays it in the middle of background. What can I do with that?
There is no way to solve this problem. You have to accept that fonts will be rendered slightly differently on different systems, and find another way to achieve your visual goals.
You can control your layout via positioning CSS e.g. width, height but not font rendering.
If that level of control is not "good enough" then you can write browser-dependent CSS (tutorials exist online) to compensate for differences.
But please remember the goal in all computing is "good enough": Perfection is not cost-effective!
Once you have achieved a level where further improvements require a certain effort, but there are more important things to spend that effort on, that is the point when you have finished.
I'm working on a web project that has some accessibility features mandated by the client, including a "font size changer" to allow the font size to be increased for visually impaired users.
Despite my arguments that a better experience will be had by using the built-in zoom features in the browser, the client has insisted that their users will not know to use these built-in features, so we must provide a text size changing widget.
What I'd like to do, if possible, is cause these page elements to invoke the browser's own zoom functionality (Ctrl + + in firefox, for example). If the browser doesn't support this method of zooming, then I might fall back to increasing the font size with css.
How can I best implement this kind of feature? Is it even possible? Is there some solution that I've overlooked?
There is no way as far as I know to use the browser's built in function. However it can be done with CSS3 or javascript. for a CSS3 example look here: http://www.css3.com/css-zoom/
very quick one, I was always wondering, do internet browsers use for rendering OS API functions to create buttons, render mages and so, or do they render it all on their own?
I first thoght that it uses system api, but there are some effects like when screen fades into grey and you see only small window in the middle, you know, thet effect used on many picture albums online, which I dont really how to achive using for example only Win32 calls.
EDIT: To be more exact, I know that final drawing on screen will always use system API, but you can send prerendered image as you want to it. Thanks.
Web browsers use their own rendering engines rather than OS API. Using OS API to render buttons totally depends on the design decision of a particular rendering engine. However, to run on various operating systems these engines prefer their own rendering to offer same look-n-feel across platforms.
Gecko, for Firefox
Trident, for Internet Explorer
Presto, for Opera
KHTML, for Konqueror
WebKit, for Apple's Safari and Google's Chrome web browsers.
Ref: http://en.wikipedia.org/wiki/Web_browser_engine
Do browser rendering engines useOs api for creating buttons, writing text, creating boxes, etc., or do they render all of this on their own using OS API just for actually show the rendered image on the screen?
I implemented something of a browser rendering engine (see e.g. Table of Supported Elements and Supported Properties for a list of the HTML elements and CSS properties that it supports).
I use system APIs (.NET Framework APIs, which are thin wrappers around underlying O/S GDI APIs) to:
Measure words (strings of text)
Paint words
Draw lines and boxes
Fill rectangles with solid color
These are the kind of API functionality that's implemented by the Windows GDI.
There are also some system (O/S or .NET) APIs that I use, to draw buttons and combo boxes (see Rewrite standard controls like edit, combo, etc?).
Becouse, the whole rendering of text, graphics and so seems pretty hard to write completely yourself
Yes, implementing CSS and everything does take a while. You've seen how long it took the browser developer teams to implement: several calendar years, many person-years.
Since long time i been having a real problem with the different ways that each browser display text.
Sure you have noticed that even when you create a stylesheet specifying everything about the font properties, still every browser display the same text with some differences, the usual problem is the font weight, that even if you specify it different browsers display it different ways.
I would like to know if some as come with a solution. Not turning the text into a image.
Thanks.
EDIT:
This is a example of the problem. On the left Firefox and right IE. However i have defined in the CSS font family, weight, size and still they render the fonts different.
Snapshot
Do you mean that on one browser its bold and another one its normal? A reset should fix that, but if it doesn't, it might be something overriding that.
If you're talking about fonts looking different, it is possible - for example, since Google Chrome / Chromium sandboxes the renderer process, the font rendering won't be affected by other parts of the system, and I believe that it uses some sort of special font rendering. To be honest, on my Linux install, I do get bolder fonts on Chromium, but Firefox displays them fine.
There's SIFR (as pointed above), but it needs Flash and it is a bit heavy. There's also Cufon http://cufon.shoqolate.com/ that uses Javascript. Could you show a screencast so we know what's the problem? Thanks.
SIFR is a good solution, as long as you're only trying to control the appearance of small chunks of text (headings, design elements, etc.)
Beyond that, browsers are perfectly allowed to render text any way they want, and getting it pixel-perfect between browsers and operating systems is usually not even desirable for larger chunks of text. Users will have different accessibility settings and anti-aliasing settings which are tuned to the way they want to read text, and in general websites should try to respect that.
You can use SIFR.
Although this problem is already about a week old, here is a solution that I found, that might be related:
http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/
If you're not using jQuery, try removing the filter attribute from the elements that are displaying non-Cleartype'd text and it should work, according to that blog post.