vertical-rhythm | 易学教程

Chrome vertical jump when refreshing page scrolled to bottom

阅读更多关于 Chrome vertical jump when refreshing page scrolled to bottom

问题 In noticed the following behavior when developing a website using Chrome: when I refresh the page while it's being scrolled fully to bottom I can observe a vertical jump. See the following Bootply. To reproduce, open the fullscreen preview (the monitor icon on the right), and try the following: refresh the page (confirm form resubmission) --> no jump scroll to middle, refresh (confirm form resubmission) --> no jump scroll to very bottom, refresh (confirm form resubmission) --> vertical jump

WordPress/GD resize images first, then crop height to a multiple of 18px minus 8px

阅读更多关于 WordPress/GD resize images first, then crop height to a multiple of 18px minus 8px

问题 here's (a strange) one for you. I'm working on WordPress site where it's important to have images sit on a baseline grid of 18px, where total image dimensions are always multiples of 18px, with the height cropped by an extra 8px. This is mostly a layout thing and to have images play nicely with text. I am trying to figure out how to hook into WP/GD functionality where: Image is resized as normal (thumbnail, medium, large), setting max width only in WP admin. The image height is (math, round?)

My jQuery code is working, but is it very crappy from a programmer's point of view?

阅读更多关于 My jQuery code is working, but is it very crappy from a programmer's point of view?

问题 I cobbled together this jQuery function. It's purpose is to calculate the margins of all img elements inside div.article in order to balance the image's height with the baseline grid of the document, wich is 20 px. In order to match my baseline grid, every image height should be a multiple of 20. If that's not the case, e.g. one image's height is 154 px, the function adds a 6 px margin to the img, so that the balance with the baseline grid is restored. The function works correctly , so my

How to handle responsive images with vertical rhythm?

阅读更多关于 How to handle responsive images with vertical rhythm?

问题 I'm developing an HTML page using Compass/SCSS and a vertical rhythm approach. I've set up a baseline and specified heights for paragraphs and headings in rem units. It works great and lays on a vertical rhythm grid nicely. However, I have a central image that takes 100% width of the column (I want it to be responsive and scale with the browser window). The problem is that this image breaks vertical rhythm because it's height is calculated dynamically according to the browser width and image

align headings to same baseline, regardless following text?

阅读更多关于 align headings to same baseline, regardless following text?

问题 is there a way to align first line of multiple headings of various size to the same baseline? Also regardless to the text that follows, which should be aligned as well. See picture at http://snapplr.com/snap/z1mw please EDIT: re-uploaded: alt text http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png It seems to me the only solution is to put each heading and each body text into separate DIV and then with headings to play with padding-top or margin-top to align them (e.g. H1

Is it possibly to keep vertical rhythm using only css?

阅读更多关于 Is it possibly to keep vertical rhythm using only css?

问题 I'm developing a typography oriented wordpress theme[1], and I'm getting troubles with the in-line images. I can control every element and adjust it's line height, bottom margin, ecc, to keep the vertical rhythm. But since images pasted through the editor can have any height, they obviously disrupt all the following content. So the question is if it's possible using margin, padding, both or another solution, to make sure that independent of the image size it will adjust to the baseline. I

automated margin functionality in CSS, not JS

阅读更多关于 automated margin functionality in CSS, not JS

问题 I have a function written in jQuery that automates the margin-bottom or padding-bottom (conditionally) of a table. Basically it negates the effect of the table cells' borders pushing down the page, keeping the vertical rhythm intact. Instead of using JS to do this, I believe I should be able to with Less and CSS instead. The condition (if-statement) is based on the number of rows (and thus borders, plus one more) in the table. Since my "magic number" is 24 (24px is the vertical rhythm unit),

How to handle responsive images with vertical rhythm?

阅读更多关于 How to handle responsive images with vertical rhythm?

I'm developing an HTML page using Compass/SCSS and a vertical rhythm approach. I've set up a baseline and specified heights for paragraphs and headings in rem units. It works great and lays on a vertical rhythm grid nicely. However, I have a central image that takes 100% width of the column (I want it to be responsive and scale with the browser window). The problem is that this image breaks vertical rhythm because it's height is calculated dynamically according to the browser width and image aspect ratio and is not respecting the baseline. How do I handle this situation in order to have a

align headings to same baseline, regardless following text?

阅读更多关于 align headings to same baseline, regardless following text?

is there a way to align first line of multiple headings of various size to the same baseline? Also regardless to the text that follows, which should be aligned as well. See picture at http://snapplr.com/snap/z1mw please EDIT: re-uploaded: alt text http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png It seems to me the only solution is to put each heading and each body text into separate DIV and then with headings to play with padding-top or margin-top to align them (e.g. H1 would be 36px with 0px margin, while H3 would be 24px with 12px top margin). Something like this: <html>

Is it possibly to keep vertical rhythm using only css?

阅读更多关于 Is it possibly to keep vertical rhythm using only css?

I'm developing a typography oriented wordpress theme[1], and I'm getting troubles with the in-line images. I can control every element and adjust it's line height, bottom margin, ecc, to keep the vertical rhythm. But since images pasted through the editor can have any height, they obviously disrupt all the following content. So the question is if it's possible using margin, padding, both or another solution, to make sure that independent of the image size it will adjust to the baseline. I know there are some alternatives like make all images turn to a multiple of the line height, that way I