Geek Answers Handbook

Is it possible to maintain a vertical rhythm using only css?

I am developing a typographic oriented wordpress theme [1], and I am having problems with embedded images.

I can control each element and adjust its line height, bottom edge, ecc to maintain a vertical rhythm. But since the images inserted into the editor can have any height, they obviously violate all the content.

So, the question is whether it is possible to use a marker, add-on or another solution to make sure that regardless of the size of the image, it will be adjusted to the baseline.

I know that there are several alternatives, for example, so that all the images turn into a multiple of the line, so I can maintain the rhythm. Another option would be to use javascript rather than perfect, but if there is no css solution, I will have to consider it.

[1] As you can see, this is a css-related issue, not a wordpress, so I post this question here.

+8
javascript css typography
source share
6 answers

(edited - new and improved solution)

I don't know if WordPress provides any way to create divs wrappers around images, but if that is the case then this should work. It is quite resistant to various text scales and image sizes, although you may need to adjust the line length of the generated contents of alternating spaces and non-breaking spaces depending on how tall or short your images are.

How it works is that it uses a negative margin to make the outer shell of the image wider enough than the inner shell, so that one inseparable space will fit on one line before the wrapper happens, and then it generates a line of alternating inextricable and normal spaces, which fills one line at a time on the right edge before spilling on the line below. Finally, a negative margin of one line counteracts the partially filled line of spaces below the image.

<!DOCTYPE html> <html> <style> .html { line-height: 1.25em; } .p { margin: 0; padding: 0; } .section, .imginner { width: 20em; } .section { float: left; margin: 0.5em; background-color: #eeeeff; } .fakeimage { background-color: #ffeeee; } .imgouter { margin-right: -0.5em; background-color: #eeffee; margin-bottom: -1.25em; /* minus 1 line-height */ } .imgouter:after { content:'\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0' } .imginner { float: left; background-color: #ffffdd; } </style> <head> </head> <body> <div class='section'> Some text text text text text text. Some text text text text text text. <div class='imgouter'> <div class='imginner'> <div class='fakeimage' style="width:145px; height:92px"> (image here) </div> </div> </div> Some text text text text text text. Some text text text text text text. Some text text text text text text. </div> <div class='section'> Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. Some text text text text text text. </div> </body> </html>
+8
source share

If you want to do this exclusively with CSS, then you need to know the size of each image in advance. For example, in this demo :

screenshot

I have a grid of 20 pixels and an image height of 150 pixels, so I placed the image in a container with a height of 160 pixels. This requires additional markup:

 <div class=figure> <div class=image-wrap style="height:160px"> <img width=150 height=150> </div> <p class=caption>Figure 1 </div>

Perhaps such markup can be generated by the WordPress plugin, which gets the markup of the image and the minimum height and displays the shell aligned to the grid div . (I am not familiar with WordPress.)

An alternative would be to use JavaScript, which was discussed in a similar question .

+1
source share

I can’t guarantee that all of this will work, but it might be worth a try:

If you can guarantee that all image heights are specified in em , you can set the font size of img elements to be the same as line-height to make sure that all correctly inserted images are sized properly:

 html { font-size: 15px; line-height: 18px; } img { font-size: 18px; line-height: 18px; }

Alternatively, you can try floating images in paragraphs so that the image is wrapped with the correct rhythm.

 <p><img ... /> Lorem ipsum dolor sit amet...</p>

And finally, the pure CSS that you have - must be crazy to implement - this method:

  • Calculate the line spacing you are using
  • Make sure it goes all the way to the pixel (otherwise it will never work).
  • Make sure that all heights are specified evenly: <img height="100" vs <img height="100px"
  • Write an obscene amount of CSS rules:
 img[height$="1"] { margin-bottom: 9px; } img[height$="2"] { margin-bottom: 8px; } ...etc...

Note that this works great for 10 and other multiples of 10 and 5, but it will be a royal pain for almost everything else.

+1
source share

@PaBLoX, I believe it’s quite possible to achieve a vertical rhythm using only CSS. The real question is: "Can you create a reusable template with a vertical rhythm using only CSS?" Each project is different, uses different font families, etc. Although the vertical rhythm should be based on input-based math, the variables change with each project. Maybe you don’t need a vertical rhythm in the style of "blog style" on the trading site ...

In any case, it was a while since this question was asked, but if you or someone else want to see an example (attempt) when creating a template for a vertical rhythm, here is the repo on github: https://github.com / jonschlinkert / vertical-rhythm

This is the starting point. I suspect that ultimately the project will consist of several different templates for different needs.

+1
source share

In my opinion a clean css solution is not possible. Take for example a table. The table cell has some margins by default, so the content is readable. You can try to make each table cell even in height, but it will be difficult. In addition, adding, for example, a lower border, somewhere, will also add to the height of the element, which means you have to reckon with it. I love the way Compass vertical rhythm tools support vertical rhythm, but for embedded images and tables, for example, I found that pure CSS is missing. For this reason, I wrote a simple jquery plugin that could help with this, find it here: https://github.com/dagomar/rhythm.js

The only drawback is that for built-in elements for work, it will need an offset, I still do not understand if this can be automated. The offset you can find only by checking it, I found that offset 6 (by default) works best for baselines with 21-24 pixels, but it may be that the font size is affected. So far, as evidence of the concept, I have found that it works very well. It also works for sensitive images (window.resize). Hope this helps.

+1
source share

I would suggest using a CSS framework like Foundation, Bootstrap, and Compass + SCSS to help with this. I actually did some work setting up Foundation with a decent standard Vertical Rhythm rule set that you can use right out of the box. I have a blog post that explains this and has a link to a pull request on Github.

http://lucisferre.net/2012/10/08/getting-into-vertical-rhythm/

With this, you can create decent basic CSS for your typography and other page elements. Or you can apply the technique to existing CSS. It's a little tiring, but it's not that hard.

0
source share

More articles:


All Articles