Never came across it, but any know a way in which you can force justify text vertically? Ie automatic leading to a defined height?

Line-height is the CSS property you are after

Aye that’s for leading. But can you make it force justify? Would be good if there was a line-height:auto. But nope, unfortunately.

Are you wanting to do something like centre some text vertically? If you do then this might help

Justify refers to horizontal alignment, leading refers to vertical. So some confusion, in my mind at least, as to what exactly you are after.

No, don’t want to centre it. I want to force justify vertically! 😆

Sounds like op is after vertical justification. It’s a thing in inDesign. Unfortunately looks like it may not be with HTML/CSS.

I think I understand what you want to do. Do you want the line-height to automatically expand to the point that the text fills the entire height of its container?

There’s not really a reliable way of doing it, but theoretically, if you knew the number of lines of text (i.e. how much text and how it wrapped), and you knew the height of the container, you could do it like this:

https://codepen.io/peterjlambert/pen/dWmxrm

Here, I’ve set the height of the container to 900px and the width to 300px. With the font-size at 16px, the text wraps onto 15 lines. Setting the line-height to 900/15 makes the text fill the container vertically.

sirromj – Member
Sounds like op is after vertical justification. It’s a thing in inDesign. Unfortunately looks like it may not be with HTML/CSS.

Bingo! 😆

Problem is, the IT bod told someone it’s possible, I’m going to give him a slap when he comes back from holiday! But i thought I’d have a wee look about see if possible in case I’ve missed it.

I’ve always thought it not possible(I would have used it before now if it was), but looking to see anyhow.

Ps bit more context, it’s for a print template created in html/css the system generates a pdf for print from this.

OK, I think I know what you are after but it’s not justified text which only applies to horizontal alignment, I’m not sure it really has a name.

What I think you want is for the text to fill the bounding box so that the first line is aligned to the top of the box and the last line to the bottom?

If so then why? Is the bounding box a fixed size? By default in HTML box elements that contain something are only as big as they need to be to contain whatever’s there so they will simply expand if more text is added.

Without knowing the exact requirements of what you want and limitations of what you are working with it’s hard to explain better.

Edit: posted after the other two responses.

But of course, that’s pretty inflexible. Change a word in the text and it’s screwed. 🙂

spicypedro – Member
I think I understand what you want to do. Do you want the line-height to automatically expand to the point that the text fills the entire height of its container?

There’s not really a reliable way of doing it, but theoretically, if you knew the number of lines of text (i.e. how much text and how it wrapped), and you knew the height of the container, you could do it like this:

https://codepen.io/peterjlambert/pen/dWmxrm

Here, I’ve set the height of the container to 900px and the width to 300px. With the font-size at 16px, the text wraps onto 15 lines. Setting the line-height to 900/15 makes the text fill the container vertically.

interesting that, didn’t know about the calc thing(is that css3? (Or some underlying javascipt library?) I may be limited in that respect to a few css3 features, so may not be available to me.)

The amount of text will also be variable, That’s the point of the auto really. So I can’t define the number of lines.

whitestone – Member
OK, I think I know what you are after but it’s not justified text which only applies to horizontal alignment, I’m not sure it really has a name.

It does! 😆

Is the containing box/element fixed in size? You might need to use Javascript and attach a function to the onload event. See this StackOverflow Q&A

Calc() is part of CSS3, yeah, but it’s got very solid support. http://caniuse.com/#search=calc

In this scenario though, I just used it to demonstrate the calculation. You could just have easily used line-height: 60px.

But all that depends on knowing the length of the text so it’s a moot point. Interesting experiment though.

There might be something else here that we can do with a bit of JS though. I’ll have an experiment.

OK. Here we go. With a little bit of jQuery (although it could easily be rewritten in pure JS), we can do it automagically, knowing only the font-size (16px in this case).

https://codepen.io/peterjlambert/pen/dWmxrm

Cheers, yes was thinking javascript too. but we’re on an older version of the html to pdf software so I don’t think I can use javascript unfortuntely(I’ve never actually had the need to try mind you, so I guess i could try see what happens.)

You can sometimes get away with using something like:

.parent-element {
display: inline-block;
}

.child-element {
vertical-align: middle;
}

Or something like that. It doesn’t alway work though.

Chances are your HTML to PDF software won’t support that though.

OK. Here we go. With a little bit of jQuery (although it could easily be rewritten in pure JS), we can do it automagically, knowing only the font-size (16px in this case).

https://codepen.io/peterjlambert/pen/dWmxrm

I’d need to include the jquery library in my zip uploaded with that, eh?

I’ll play with this, see if I can get it to work, as mentioned though, I’m pretty certain javascript is out(not been any updates for years and we’re changing to a new system next year, i think javascipt support is next version up! 🙁 .).. Only thing is text size will also be variable. usually set to a 6 percentage settings either side of 14pt as standard. (but I also define the middle text size for that, at a percentage too Ie if I want the mid range to be 9pt. I’ll set the text and 65% in my html.)

Hmm. I suppose if you can’t use client-side scripting, there might be a way to do it server side but you’d need more information up front.

– Height and width of container in pixels
– Font-size
– String length in characters
– Width of a character (so you’d need to be using a monospaced font)

You could then calculate how much text per line before it wraps (width/font-size), and therefore how many times it wraps and then you’d know the number of lines. Then you could do the calculation in my example and have it print an inline style="line-height: whatever" attribute on the container.

Jesus. Variable font sizes too? It’s becoming a beast!

I’m thinking sticking with my original plan of slapping the IT guy is my best course of action here! 😆

Yes. Definitely assault the IT guys.

😆

cheers for your help anyhow, given me plenty of ammunition, soon as I mention serverside scripting he’ll run a mile! 😆

FWIW, I’ve updated the pen so you don’t need jQuery.

I have enjoyed this morning’s diversion. 🙂

good man, thank you, will give that a go this afternoon.

as suspected, javascript a no go. Cheers all, was worth ago anyway!