Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
1  
Could you add an image? I can't imagine it looking good. –  svick Feb 10 '13 at 23:23
add comment

2 Answers

up vote 5 down vote accepted

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...)

enter image description here


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.

share|improve this answer
    
First of all, thank you for taking the time to write this up but I'm afraid you misunderstood me (or more likely I've explained it badly in the question). It's not a matter of a bottom vertical alignment, it's a matter of the "shape" of the wrapped text. 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 standard "Here be the \n link". –  Boris B. Feb 11 '13 at 19:24
    
Right, wasn't clear. That's a lot more difficult, if it has a name, I've never heard of it - people are likely to assume the unexpected break means something in the text, like a pause. For the web, you'll first need to vertical align to the bottom, then you'll need some Javascript that analyses the text and calculates where to place a line break. That's a tricky programming problem and you should probably ask the programmers on stack overflow. I'd guess the best way would involve building a visibility: hidden; one word at a time from back to front, testing the width against the space. –  user568458 Feb 11 '13 at 19:41
    
P.s. if the purpose of this is to avoid a title, can't you just make the title float: left; or right in the tile? This would make the main tile text flow around the title and could be a more conventional way to make things work. Conventional is usually good in typography because if a reader is distracted puzzling out an unusual layout, they're paying less attention to the content. –  user568458 Feb 11 '13 at 19:47
    
I agree completely, but it's not really my choice, customers in-house designer made the design and I'm supposed to implement it... :( –  Boris B. Feb 11 '13 at 19:50
1  
You have my sympathy! If that type of alignment did exist, it would be called "top ragged" I imagine (the ragged side in typographic alignment is the uneven side). –  user568458 Feb 11 '13 at 19:54
show 3 more comments

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.