The Firefox team has made some unique choices when rendering fonts in the Windows operating system. As a result, certain fonts under 16 pixels in size render really bad in HTML5 Canvas as well as CSS. This blog post shows how you can fix this issue and have clean, transformed typography in any OS.
Entries Tagged as 'Uncategorized'
May 10th, 2016 by zoltan · No Comments
November 7th, 2015 by zoltan · 2 Comments
PNGs with alpha channels are great, but they can take up a lot of bandwidth. Alternative image formats such as JPEG-XR, JPEG 2000 and WEBP are more efficient, but they are not supported by FIrefox (and may never be). In comes a full cross-browser solution: SVG files that encapulate a JPEG with an alpha channel. This post will cover how to create these image files a number of different ways, and show how you can animate these images as well.
July 16th, 2015 by zoltan · 1 Comment
It’s possible to super-impose dynamic HTML content on top of a photos using 3D transforms to give the appearance that it is part of the picture. However, using a combination of
rotate3d() functions to do this is difficult. This article discusses how to use the
matrix3d() CSS transform with the Matrix Construction Set to get pixel-perfect 3D transforms easily and without any knowledge of matrix arithmetic. It also discusses the differences between
matrix3d(), as well as what fallbacks to use for browsers that don’t support transforms.
January 14th, 2015 by zoltan · 11 Comments
WEBP, JPEG 2000, JPEG-XR, APNG … these image formats have features that are not available in the traditional GIF/JPEG/PNG/SVG image stack, like animation, lossy compressions paired with alpha channels and better quality at higher compression levels. However, each browser seems to support only some of these formats. With the
<picture> element, along with the picturefill polyfill, you can use these great formats today while using the older formats for an old-fashioned fallback. This blog post will explain how to use picturefill or modernizr to use these formats, why you would want to use these image formats, and what tools you can use to generate them.
May 4th, 2014 by zoltan · 2 Comments
If you’ve been using CSS3 Transforms, you have probably seen that sometimes, transformed text that is not spaced correctly, is rendered with jagged edges, and letters are placed correctly on the transformed baseline. Furthermore, transformed text becomes smoother when animating, but about a second after the animation stops, you’ll see it reverts back to its former jaggedy self. This effect is really pronounced in Windows, but also appears in Mac OS X and Linux browsers. What is a typography nut to do? In this article, I present three fixes to this issue using the CSS
September 20th, 2013 by zoltan · 2 Comments
After playing around with the technology for the past two years, I have done research on how to improve the look and legibility of @font-face type. Faux-bolding and faux-italicizing (i.e. “obliquing”) can be easily avoided a lot more easily with new browsers (and in some cases, even older IE!). Fonts that look horrible in Windows can be improved with autohinting. And best of all, advanced features of OpenType fonts, like ligatures, alternative glyphs, and other character variations are almost in all the major browsers (Safari, the only holdout, will have it later this year). Let’s see how we can put this all into practice today.
May 20th, 2013 by zoltan · No Comments
April 26th, 2013 by zoltan · 6 Comments
When writing my blog post about Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML, I needed to create SVG paths. The problem is that they look so complicated and are not intuitive enough to produce by hand. However, I came across a cheap and simple way of creating SVG paths using the GIMP. People tell me I am also cheap and simple, so maybe that is why I love this solution so much (It takes only six simple steps!) So, for the rest of you like-minded people, I would like to share it this solution with you.
April 26th, 2013 by zoltan · 3 Comments
In HTML documents, setting a DOM object’s pointer-event property to none will result in any mouse event to pass through that node to the nodes positioned underneath. This, along with SVG Paths and some VML fallbacks for IE, can be used to make some very interesting effects. This article covers how to do this in depth, along with some interesting gotchas in even modern browsers that affect performance. You’d be surprised what eye-candy you can produce today, in both older versions of Internet Explorer to the most modern mobile device.
November 5th, 2012 by zoltan · 2 Comments
I have been playing around with HTML5 Forms for a while now, and one of my favorite parts of the HTML5 Forms spec is the use of CSS3 pseudo-classes to show the validation state of the form fields to the user. I believe these validation hints make a better user experience and makes the process of filling out the form less frustrating. However, I think there are some shortcomings in the existing psuedo-classes that produce these validation hints. I hope that this article will start a discussion for a possible solution that could be easily added to the CSS3 UI specification.