Allow me to introduce myself.

Photo: Don Kittle

I am Zoltan "Du Lac" Hawryluk (and yes, Zoltan is my real name).

I am a web developer born and raised in Toronto, Canada. I research new web technologies, especially the ones with the sexy overused acronyms, like HTML5 and CSS3. I am also the creator of several JavaScript libraries (cssSandpaper, html5Widgets, visibleIf), a few online tools (IE Transform Translator, CSS3 Matrix Construction Set) and other random things (CSS3 Font Converter).

When I discover stuff, I post my findings here — partly because I want to share with the community, and partly because I forget things if I don't write them down. More about me.

Recent Posts

Fixing Cross-Browser Issues With CSS3 Viewport Units in IE9+ and Safari for iOS

September 24th, 2014 by zoltan · 1 Comment

With viewport units, you can describe width, height, font-size and other CSS styles as percentages of the viewport width and height. There are, however, a few nasty gotchas when it comes to using them in iOS Safari and IE9 and 10. They also don’t always play nice in CSS3 calc() statements and don’t work at all in IE Visual Filters. Using them in iframes can also be problematic. This post talks about how to work around these issues easily using a JavaScript buggyfill (not polyfill). I have used viewport units in production sites today, and now you can too, on any phone or device used in the wild today.

Read the whole article »

Fixing Typography Inside of 2-D CSS Transforms

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 perspective, filter and outline properties.

Read the whole article »

Better Web Typography With font-weight, Autohinting and font-feature-settings

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.

Read the whole article »

Cross-Browser SVG Text-Paths Without JavaScript — Even In Older IE.

May 20th, 2013 by zoltan · No Comments

c-is-for-cookie Designers have been using textpaths for years in print, but doing this on the web is a little tricky. SVG, which supports textpaths in modern browsers, is not supported by IE <= 8. Older IE does, however, support VML, another vector markup format that can do textpaths as well. After playing around, I found it is possible to put both on a web page and even code common CSS to style them — all without JavaScript. I’ll explain how we can layout and style textpaths in all browsers (including IE <= 8) as well as what a Bézier Curve is, and a bit of a code that will show how to push text on a path as well tween a textpath.

Read the whole article »

How To Create SVG Paths Easily Using The GIMP

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.

Read the whole article »

Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML

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.

Read the whole article »

Animating Circular Paths Using CSS3 Animations.

March 3rd, 2013 by zoltan · 15 Comments

For the longest time I assumed that one couldn’t use CSS Transitions or animations to move DOM objects in anything but a straight path. Sure, a developer could use multiple keyframes to create a list of straight paths to simulate a curve, but I didn’t think one could just define a curve with just two keyframes. I was wrong. If you are coding for a modern web browser, then this is very doable!. This article will show you how it’s done in modern browsers, the math involved, and what to do with older versions of IE that don’t support CSS3 Animations.

Read the whole article »

Cross-Browser Animated Image Masking (Even in IE) Using polyClip.js

January 14th, 2013 by zoltan · No Comments

dad I first created polyClip.js so I could combine the lossy compression algorithm of JPEGs with the ability to have a transparent area that PNGs allow. The result works well in all browsers, but can polyClip.js be fast enough to change the clipping area on-the-fly and even animate it at reasonably fast speeds with CSS3-style transformations on the clipping areas. The answer is a resounding yes and it is really fast even in older IE as well. This article will discuss in doing this with polyClip and a related library, Silk.js to do battery friendly and CPU efficient HTML5 animations.

Read the whole article »

CSS3 Pseudo-Classes and HTML5 Forms: Their Limitations and a Possible Solution

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.

Read the whole article »

Cross Browser GPU Acceleration and requestAnimationFrame in Depth

September 23rd, 2012 by zoltan · 4 Comments

Animations made with requestAnimationFrame appear less jumpy and stuttery than those using setTimeout or jQuery.animate by ensuring that animation frames are generated at the most optimal times according to the CPU load, what the browser is doing, what the graphics card is doing, etc. Recently, I researched a bit about how it works, how different browsers behave with it, and how well browsers are at animating both Canvas and SVG. This article will be a brain dump of all I have learned so far. Some of what I discovered may surprise you.

Read the whole article »