: Text wrapping fill-last-line-first I have a peculiar design for a web page that I have to implement from an already made design, and some of the text wrappings are filled bottom-up (in my case
I have a peculiar design for a web page that I have to implement from an already made design, and some of the text wrappings are filled bottom-up (in my case it's for bottom-left aligned thin text inside colored square tiles, looks better than it sounds). That is, in a block of text that wraps across multiple lines, the bottom line is filled first (horizontally), so that any remaining horizontal space after wrapping is left for the first line.
Is this a known kind of text wrapping and how could I implement it in a web page without manually adding line-breaks in the source text? Or could you at least name that "feature" so that I could google it?
Edit: For example, in the text "Here be the link" if there is not enough room on one line then the line should be rendered as "Here n be the link" instead of the standard "Here be the n link", where "n" is a line break.
More posts by @Lee3735518
2 Comments
Sorted by latest first Latest Oldest Best
The effect you're talking about is called Vertical Alignment, in this case bottom vertical alignment. In design applications like InDesign (but not Illustrator without hacking, moan whinge moan...) there's a simple button for it.
In HTML / CSS, vertical alignment isn't so simple. Vertical alignment for a table cell is easy, vertical-align: bottom; starts text at the bottom how you describe, but outside of table cells, vertical alignment refers to how images and other inline elements with height are aligned to each block of text.
You can however force a HTML div (or any block element) to have vertical alignment, by telling it to pretend it's a table cell with the CSS rule display: table-cell; (I've seen people say it has to be something pretending to be a table, or that this is somehow 'bad practice' - they've got it mixed up with regular HTML tables, it's fine like this). Then, you can add the CSS rule vertical-align: bottom; and it'll work.
Unfortunately, you need a workaround to make this work in old versions of internet explorer which ignore display: table-cell;, and it can be tricky to make this work where CSS floats are involved, which is commonly used for boxes in a line or columns (table-cells don't float) - a grid of tiles as described in the question will almost certainly use float.
Here's a stripped down live editable example on the site JSbin demonstrating how to make it work everywhere, including old versions of IE, including in floated tiles. Hit the 'Edit in JSbin' button to see the code and to play around with it: there are lots of code comments explaining what's essential and what's optional.
The basic principle: use wrappers and a fallback trick for internet explorer with a position: absolute; wrapper and position: relative; content.
(the random grey box is IE7 screwing up the JSbin edit button...)
The simplest example for bottom alignment that works in old IE is this HTML:
<!--[if lte IE 7]><div class="old-ie"><![endif]-->
<div class="bottom wrapper">
<div class="content">
This text is bottom aligned
</div>
</div>
<div class="middle wrapper">
<div class="content">
This text is bottom aligned
</div>
</div>
<!--[if lte IE 7]></div><![endif]-->
...and this CSS:
/* for normal browsers...
*******************/
.content {
display: table-cell;
height: 200px;
}
.bottom .content {
vertical-align: bottom;
}
.middle .content {
vertical-align: middle;
}
/* make it more-or-less work in IE6, IE7
*******************/
.old-ie {
position: relative;
}
.old-ie .wrapper {
position: absolute;
}
.old-ie .content {
position: relative;
}
.old-ie .bottom .wrapper, .old-ie .bottom .content {
bottom: 0;
}
.old-ie .middle .wrapper {
top: 50%;
}
.old-ie .middle .content {
top: -50%;
}
Finally, here's a link to a StackOverflow (coding Q&A site) answer I wrote a while back, explaining in a bit more detail if needed how to get vertical-align working cross-browser with floats (probably the trickiest case) and what the limitations are.
I'm not quite sure if this is the right site to ask this question but here is an example of what you need (for IE, works in 8 and above):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.tile {width:200px; height:100px; background-color:#FFFF00; vertical-align:bottom; display:table-cell;}
</style>
</head>
<body>
<div class="tile">123</div>
</body>
</html>
Note the vertical-align:bottom; and display:table-cell; in the style and feel free to play with fonts, margins etc.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.