Multi same-width line multisized HTML text?

Question

A designer did a very nice design that's pretty hard to me to apply. It's to be applied to Wordpress posts titles so it should work with any text.

So before I turn her idea off, I'll check SO up :).

Titles should be multiline, one or more words per line. Lines will be splitted using PHP according to a given algorithm that counts characters into as even as possible lines, to look like this:

<h1>
    <span>Lorem Ipsum</span>
    <span>Dolor Sit</span>
</h1>

Each line's font-size should be adjusted so it's width equals the full width (fixed) of the h1 box. Also, some neggative line-spacing will be used. It should look like this:

enter image description here

I can afford to use CSS3 and JS on this.

is there a max number of lines? or is it dynmic? – Sai Oct 16 '14 at 20:40 — Sai, Oct 16 '14 at 20:40
@FabianMebus fittext.js didn't do the job at all. – Mauro Oct 16 '14 at 20:52 — Mauro, Oct 16 '14 at 20:52
@Sai It's dynamic. Up to the author. – Mauro Oct 16 '14 at 20:52 — Mauro, Oct 16 '14 at 20:52

Mauro · Accepted Answer · 2014-10-18T00:08:38.457

2

I posted the question after trying a couple of plugins that didn't do the job very well. But then I tried BigText.

HTML

<h1 id="bigtext">
     <div>Lorem Ipsum</div>
     <div>Dolor Sit</div>
</h1>

CSS

#bigtext {
  font-family:'Arial Black', sans-serif;
  text-align: center;
  width: 400px;
  margin: 60px auto;
  text-transform: uppercase;
  line-height: 0.75;
  letter-spacing: -3px;
}

JS

$("#bigtext").bigtext();

Here's a JFiddle to see it in action.

edited Oct 18 '14 at 00:08

answered Oct 16 '14 at 20:48

Mauro

3,946
2
27
41

That did the trick! however you might want to consider using unitless `` for `line-height` property: http://jsfiddle.net/hashem/355j4ry4/2/ – Hashem Qolami Oct 16 '14 at 20:53
@HashemQolami Why is that better? – Mauro Oct 17 '14 at 00:11
1

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values – Hashem Qolami Oct 17 '14 at 23:45
@HashemQolami That's clever. Thank You! You've made my day. – Mauro Oct 18 '14 at 00:09

Multi same-width line multisized HTML text?

1 Answers1