Menu
I'm developing a typography oriented WordPress theme, and I'm getting troubles with the in-line images.
I can control every element and adjust its line height, bottom margin, etc, to keep the vertical rhythm. But since images pasted through the editor can have any height, they obviously disrupt all the following content.
Is it 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.
642
(edited -- new and improved solution)
I don't know if WordPress provides any way to generate wrapper divs around images, but if it does, then this should work. It is fairly robust in the face of different text scales and image sizes, though you may need to adjust the length of the generated-content string of alternating spaces and non-breaking spaces, depending on how tall or short your images tend to be.
The way this works is that it uses a negative margin to make the outer image wrapper just enough wider than the inner wrapper, so that one non-breaking space will fit on one line before a wrap will occur, and then it generates a string of alternating non-breaking and normal spaces that fills up one line at a time down the right edge, before spilling onto the line below. Finally, a negative margin equal to one line-height 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
