CODEWITHSUNDEEP
css
mjf
mjf

Reputation: 528

CSS and font size proportional to text length?

Is it possible to achieve font effect similar to the one seen in the right column on the http://www.athensfoodtours.com/tours/ website in the right column using pure CSS? I guess it's not possible but want to be sure before starting creating some ugly images...

Upvotes: 0

Views: 929

Answers (4)

DA.
DA.

Reputation: 40691

Some of these answers call for stretching type. That's a huge no-no if you have any consideration for typeface designs. ;)

What the example is doing visually is scaling the type proportionally until it fits a particular width.

You can't do this with CSS, but you could with JS.

You'd put each line in a div set to something like inline-block so you can grab it's width. You'd then grab the width, compare it to what it should be, then increase or decrease the font size by some unit of measurement, recheck the size, and repeat until it matches your target width.

It's an interesting question/challenge. If no one has given you a working example in the next few hours, I'll try and come back and whip something up.

Upvotes: 1

James Allen
James Allen

Reputation: 819

Not automatically, but you could manually set the font-stretch style for each line. I'm not sure how widely supported the tag is, but here's the W3C specification for that style:

CSS Font Module Level 3 - Section 3.3

Possible usage...

{font-weight: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded}

Upvotes: 0

Sean Powell
Sean Powell

Reputation: 1437

There is a font-stretch property in CSS, but sadly it is not widely supported very well.

Before you go ahead and make images, there are a couple of jQuery plugins which might be worth taking a look at: Stretch and TextFill

Upvotes: 1

Version1
Version1

Reputation: 657

They are images, it is achieved like so;

a span {text-indent: -9999px;}

Each a has an id assigned to it an a background imaged placed, then on hover changes the background-position like so.

#somelink:hover {background-position: 0 20px;}

You can tell they are images, look at the five point link the S is slightly cut off, sloppy design there!

Upvotes: 0

Related Questions