Created
March 18, 2011 06:08
-
-
Save rockinghelvetica/875684 to your computer and use it in GitHub Desktop.
Fix broken baseline alignment in Webkit when using multiple columns.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Fix baseline alignment in Webkit for CSS3 columns. | |
| * Copyright 2011 Nicholas Macias | |
| * Dual licensed under the MIT or GPL Version 2 licenses. | |
| * http://jquery.org/license | |
| */ | |
| (function($){ | |
| $.fn.fixbaselines = function () { | |
| return this.each(function() { | |
| var $this = $(this); | |
| var h = parseInt($this.css('line-height'), 10); | |
| $this.height(h * parseInt($this.height() / h)); | |
| }); | |
| }; | |
| })(this.jQuery); | |
| //The fix is to make the multicolumn container a multiple of the line-height. | |
| //EXAMPLE, if using modernizr and e.g. a class "multicolumns". | |
| if(Modernizr.csscolumns) { | |
| $('.multicolumns').fixbaselines(); | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is simply magic. I was like, "wtf Chrome, why are your columns mis-aligned, is it seriously that hard even with proper margins and line-heights"? Somehow this just ... makes the bugs go poof. Mostly. Now I'm trying to figure out why Chrome isn't smart enough to align its own damn baselines, particularly across column containers.
More baseline goodies:
What's fun is knowing that if you don't give a damn about accessibility in early IE, you can still use pixels -- such a technique could work particularly well if scripted, turning ems into pixels at various scales through some kind of CSS pre-processor. Just a thought.