Is there a cross-browser way to condense text on a page?

Question

I am looking for a way to condense relatively small areas of text on a page in an effort to mimic a graphic button that was done with a non-standard font. Ideally, just the letters would get squished or made thinner, leaving the space between words more or less the same. I know there are some CSS attributes that do things like this, but they are more focused on spacing between the letters and not so much on the widths of the letters themselves. These CSS methods are also not very cross-browser friendly. The majority of the user base is using IE6, so that puts a large restriction on CSS-based methods out of the blocks.

So, is there any way to control the character width/spacing that is cross-browser friendly? I know jQuery works across browsers quite well, so could this perhaps be done with jQuery by manipulating the location of the letters and possibly their widths? These are small bits of text, 5 words at a time, or so, so speed is something that can be dealt with later.

---

EDIT: Ok, so, the CSS letter-spacing property, as well as the word-spacing property will allow me to control the space between letters/words. However, this makes things look squished. If this truly is the only option, then I'll have to make it work, but what I am really looking for is a way to squish the letters themselves, to make the characters thinner.

Answer 1

maybe

letter-spacing:-1px

will help

Answer 2

Are you sure you're specifying your doctypes properly? Perhaps your browsers are interpreting your CSS in quirks mode, resulting in the unpredictable behavior.

I don't think jQuery will be of much help to you if letter-spacing isn't working properly. You can't alter the positions of individual letters unless every letter is inside its own element, such as a span, which just seems messy.

EDIT: If you want to shrink the horizontal width of the characters themselves, that would theoretically be done with font-stretch: narrower, for example. But it seems the major browser don't support it properly or at all. Apparently it was in CSS2, but then dropped in CSS2.1 and is now planned for CSS3.

Answer 3

It sounds like a nightmare.

You can fudge the whole thing by putting each word if a floated DIV and fiddling with the width each DIV.

Answer 4

I think this sort of thing should probably be done in a graphics editor and output to a lightweight image (png or similar). I think this is the only simple and reliable way to control the visual output of the text to this extent.

Make sure you repeat the text in the alt attribute on the img tag for accessibility.

This approach has issues with localization - in that you need a version for each locale - but this is still doable.

There are also going to be issues if you wanted to keep this text in-line with some other text - e.g. in the middle of a paragraph. But if that's what is being done, it sounds like "squished up text" may not really be a good UI.

Answer 5

I'd have to question the wisdom of even trying to do this in the first place. Just replace the darn graphic with something readable; or something you can duplicate with your text.

What you want to do is change the text's font. I think your best bet is looking through a bunch of different fonts that come preinstalled for your userbase and trying for the best font+size combo.

Answer 6

Short answer: I don't think there is a working cross-browser example that meets your requirements.

The CSS3 specification includes a font-stretch property, but sadly enough, CSS3 is barely (if at all) supported at this time.

Some possible ways that could emulate this behaviour that I can think of:

• Use a flash-based approach like sIFR
• Use a javascript / canvas based approach like Typeface.js. There's a font-stretch example included on the example page
• Use condensed fonts (icky-approach, since this means you are relying on the font being available for the client), like Arial Narrow.
• Use a server-side script that generates an image from text parameters

In short, there is no simple and elegant solution to this problem because text and image manipulation is generally something you'd do in a graphics editor.

If this is not possible, I'd definately recommend looking into Typeface and sIFR.

Answer 7

So, you want to squish it without squishing it?

Try adjusting the font-size then. Or some combination of letter-spacing, word-spacing and font-size. (All of which work just fine in IE6).

.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }

Answer 8

You may be able to track down the original font with WhatTheFont