vertical-rhythm
Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.
jonschlinkert (Jon Schlinkert) · GitHub jonschlinkert has 626 repositories written in javascript, css, and html. follow their code on github.
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:
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>
<head>
<style type="text/css" media="all">
div {
width: 240px;
float: left;
}
h1 {
font-size: 36px;
margin: 0;
padding: 0;
}
h3 {
font-size: 24px;
margin: 0;
padding: 10px 0 0 0; /*for some reason I must use 10px instead of 12px to align. Why??*/
}
</style>
</head>
<body>
<div>
<h1>H1 heading</h1>
</div>
<div>
<h3>H3 heading</h3>
</div>
<div>
<h3>H3 heading that is somewhat longer and spans multiple lines</h3>
</div>
<div style="clear:both;"></div>
<div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
<div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
<div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>
</body>
But this is not very nice solution. Is there something better, please?
Thank you very much!
Source: (StackOverflow)
Are there any existing plugins/extensions/methods to maintain vertical rhythm for Twitter's Bootstrap project?
It is quite a laborious task to create good vertical rhythm templates, I would rather use a pre-baked solution. I am open to creative suggestions, I just want my pages nicely aligned in the end.
Edit: To clarify what I am after...
Vertical rhythm is a technique used to ensure that every element on a page lines up according to a horizontal grid. This is achieved by setting the height, padding and margin of every item to conform to a standard unit line size. If a line of text in a paragraph is 20px high (including margin and padding) then maybe a heading 4 will also be 20px high, and a heading 1 might be 40px high. This maintains the rhythm of the text across columns.
I want to use this technique in combination with bootstrap (from twitter), but it would be quite a lot of work to get everything looking nice. For example, all the buttons would need to conform to the same vertical height definition as paragraph text etc... There are other standard controls used in bootstrap which would also all need rules to define their height appropriately.
I could start with a generic solution for vertical rhythm, which would go a long way to achieving what I want, but I wanted to know if anyone else has started this, or has any idea of another way to achieve this.
Edit: Assuming there is nothing like what I want...
Maybe just a good vertical-rhythm based css template would be a good starting point. Preferably something that is continuing to be developed, is already usable, well thought out, and adaptable.
Source: (StackOverflow)
I'm trying to understand vertical rhythm and read the whole day about, tried several things but my layout keeps breaking because I fail to apply compass padding trailer correctly as you can see in the screen shot:
!screenshot
- The line with the yellow background is my hr tag.
- The ones with the orange background are articles.
Here's my code:
HTML:
<article>…</article>
<hr/>
<article>…</article>
CSS:
hr {
background: rgba(yellow, 0.3);
@include trailing-border;
//border: 0;
//height: 0;
//border-top: 1px solid rgba(0, 0, 0, 0.1);
//border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
For the sake of keeping it simple I commented my HR styling out.
Here's another example where the gap is more visible:
!screenshot2
hr {
background: rgba(yellow, 0.3);
@include trailer(1.5);
@include trailing-border;
@include leader(1.5);
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
I don't know what I'm doing wrong here. Please help me out to understand this property.
Links:
Source: (StackOverflow)
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 actual question is: Since I'm not a programmer, I'm wondering if my code is very crappy although it's working, and if so, how could the code be improved?
The jQuery code:
$('div.article img').each(function() {
// define line height of CSS baseline grid:
var line_height = 20;
// capture the height of the img:
var img_height = $(this).attr('height');
// divide img height by line height and round up to get the next integer:
var img_multiply = Math.ceil(img_height / line_height);
// calculate the img margin needed to balance the height with the baseline grid:
var img_margin = (img_multiply * line_height) - img_height;
// if calculated margin < 5 px:
if (img_margin < 5) {
// then add another 20 px to avoid too small whitespace:
img_margin = img_margin + 20;
}
// if img has caption:
if ($($(this)).next().length) {
// then apply margin to caption instead of img:
$($(this)).next().attr('style', "margin-bottom: " + img_margin + "px;");
} else {
// apply margin to img:
$(this).attr('style', "margin-bottom: " + img_margin + "px;");
}
});
HTML code example, img with caption:
<div class="article">
<!-- [...] -->
<p class="image">
<img src="http://example.com/images/123.jpg" width="230" height="154" alt="Image alt text goes here" />
<small>Image Caption Goes Here</small>
</p>
<!-- [...] -->
</div>
HTML code example, img without caption:
<div class="article">
<!-- [...] -->
<p class="image">
<img src="http://example.com/images/123.jpg" width="230" height="154" alt="Image alt text goes here" />
</p>
<!-- [...] -->
</div>
Edit: refined code based on Russ Cam's suggestions:
var line_height = 20;
var min_margin = 5;
$('div.article img').each(function() {
var $this = $(this); // prefixed variable name with $ to remind it's a jQuery object
var img_height = $this.height();
var img_margin = ((Math.ceil(img_height / line_height)) * line_height) - img_height;
img_margin = (img_margin < min_margin)? img_margin + line_height : img_margin;
if ($this.next().length) {
$this.next().css({'margin-bottom' : img_margin + 'px'});
} else {
$this.css({'margin-bottom' : img_margin + 'px'});
}
});
Source: (StackOverflow)
First time posting so treat me gently :)
So I'm trying to position two buttons side-by-side using Susy and this seems to work fine:
.fifty {
@include span-columns(3);
@include nth-omega(2n);
}
However as soon as I ad a 1px border to the button the effective width is 100%+4px and thus it breaks the layout.
I'm using the Compass Vertical Rhythm plugin for all my button padding values so would like not to mess that up.
Any help, greatly appreciated.
Source: (StackOverflow)
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
The jump is in fact caused by this Javascript that tries to maintain vertical rhythm when page contains figures with .align-center class:
$(document).ready(function() {
$(window).resize(function() {
var baseline = parseInt($('body').css('line-height'), 10)
$('.align-center').each(function() {
var height = $(this).outerHeight();
console.log(height)
var bottom = baseline - (height % baseline);
if (bottom != 0)
{
bottom += parseInt($(this).css('padding-bottom'), 10)
$(this).css('padding-bottom', bottom);
}
});
}).trigger("resize");
});
Of course removing this Javascript also removes the vertical jump observed.
What I don't understand is that padding is applied when DOM is ready so it shouldn't cause visible vertical jumps. I think the jump has to do with the way Chrome handles the viewport when page is scrolled to very bottom but I don't really know how to confirm/infirm this.
When trying this in Firefox or Safari, I don't observe any jump.
Any idea please?
Edit: I opened a bug on Chrome's bug tracker.
Source: (StackOverflow)
I'm trying to build a 2 column layout with a consistent vertical rhythm (aligned baselines). The calculations for this are pretty straightforward, and I have them working fine. My question is this:
When two columns of text sit side by side, is it possible to have vertical rhythm maintained (or regained) when the vertical-margins in the columns are not 'whole lines'.
In this example: http://jsfiddle.net/beejamin/PMCXt/ I have an unordered list, where both the list, and the list items have 'half a line' of margin-bottom. When there are an even number of list items, the margins add up to a whole line, and the rhythm is kept (that's good!). When there are an odd number though, the baselines are thrown out, and can't ever join up again (unless I get lucky and another odd-numbered list comes along).
Setting whole-line margins on list items is too much (especially with a long list), and setting no margin is not enough.
Is there any way I can avoid/mitigate this? I won't know the number of lines in advance, and I don't want to use javascript for this (I'm trying to build a generic scheme that I can re-use).
Source: (StackOverflow)
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 can keep the rhythm. Other option would be use javascript, not ideal, but if there's no css solution, I'll have to consider it.
[1] As you can see, this is a css related issue rather than a wordpress one, that's why I'm posting this question here.
Source: (StackOverflow)
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?) cropped to the closest multiple value of X (in this case 18px).
- Using the new height, crop again by subtracting another X value of the height (in this case 8px).
The end result would ideally be a plugin where values can be activated and edited for individual users in a multi-site environment.
Have searched and searched, but none the wiser.
Any ideas or (paid) help would be fabulous, many thanks!
F.
Source: (StackOverflow)
When applying the compass vertical rhythm module one thing bugged me, that in the case a headline is too long to fit into one single line the line-height looked way too large since it follows the value from the $base-line-height variable. Generally i think it should better follow the rule of thumb: the bigger the headline the smaller the line-height.
I've found an article covering that subject, suggesting to use the $base-line-height over the font size of the specific headline. Based on the adjust-font-size-to and the adjust-leading-to mixins I've created modified versions:
@mixin adjust-headline-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
@if not $relative-font-sizing and $from-size != $base-font-size {
@warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
}
font-size: $font-unit * $to-size / $from-size;
@include adjust-headline-leading-to(if($relative-font-sizing, $to-size, $base-line-height));
}
@mixin adjust-headline-leading-to($to-size) {
line-height: $base-line-height / $to-size;
}
Is that a clean modification? I have my issues with (if($relative-font-sizing, $to-size, $base-line-height)) statement in the adjust-headline-leading-to based on:
@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
line-height: rhythm($lines, $font-size);
}
the outputs from small test cases look solid but wanted to take care and ask if there are any grave visible mistakes in adjust-headline-size-to and adjust-headline-leading-to? Best regards Ralf
Source: (StackOverflow)
I heard that relative units are better then absolute, but sometimes browsers round it wrong and it's hard to calculate. Do you know any tool that can help?
I used SASS/Compass. It's good and very easy, but not perfect…
Source: (StackOverflow)
I have a <tr> with 4 <th>'s inside and without borders the <tr> and <th>'s are all 22 pixels tall which equals my $base-line-height - Perfect.
However, when I add +horizontal-borders(1px, 0) the <th>'s show up as 23 pixels tall and knock my vertical rhythm out.
Why is this and how can I fix it?
Source: (StackOverflow)
I'm learning Compass, i'm a little bit cofused about 2 mixins: adjust-leading-to and leader. Can some one tell me the difference between them ?
Thank you very much !
Source: (StackOverflow)
I have a very fundamental question to choose padding size for vertical rhytm.
Let's say that:
.body{
font-size: 14px;
line-height: 18px;
}
And we have a div with content (div has a border):
<div class="content">
... a very large text content here ...
</div>
Which one of the following would be the right chose for vertical align, this one:
.content{ padding: 18px; .... }
or should I consider the difference (18-14)/2 = 2px, So:
.content{ padding: 16px 18px 16px 18px; .... }
or if both answers are wrong, would you please explain how to approach this issue.
Source: (StackOverflow)