CSS - What is a better solution to mix text with images?

Question

Hello all,

We have to design some text as follows:

Text in English XXX Text in English XXX Text in English.

While XXX should be replaced by images with the same height of the Text in English.

I would like to know whether or not there is a better solution for this.

Thank you

//////// Update ////////////////

XXX in fact are text translated in other language.

For example, In one sentence as follows:

Apple, Orange, and Banana.

We have to change the above line to

Apple (XXX), Orange (XXX), and Banana (XXX).

Here XXX are translation of different fruit in foreign languages. The reason why we have to use images instead of text in unicode is that we don't want to force the user to choose different character set in order to see the page.

Answer 1

You could try specifying both the line height and image height in ems. The image width would have to be a multiple of the height to keep the correct proportions.

Answer 2

It's hard to tell what you want given that you've given us almost no specific detail at all, but here's some ways to accomplish what you want.

The simplest method is to add in the images using the img tags. Images are by default inline elements, and since you stated that they are of the same height as the text, I don't really see any problem with just adding them in, like this image here . As long as you give it the correct alt text, it should be fine.

If actually want image text replacement, then you can utilize the usual method, something like:

#replace {
    text-indent: -9999px;
    background: url('http://i.imgur.com/da29E.png') no-repeat center bottom;
    width: 16px;
    height: 14px;
    display: inline-block;
}

Where #replace is a span inside a paragraph, like:

<p>The <span id="replace">Flag of the United States of America</span> is a brilliant flag. </p>

As you can see, its a little troublesome, and does not offer any advantage over the img method at all. Have a look at the text replacement version here: http://jsfiddle.net/VEn5p/