CSS - Quelle est la meilleure solution pour mélanger le texte avec des images?

Question

Nous devons concevoir un texte comme suit:

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

Alors que XXX doit être remplacée par des images avec la même hauteur du texte en anglais.

Je voudrais savoir s'il existe ou non une meilleure solution pour cela.

Merci

Mise à jour //////// ////////////////

XXX in fact are text translated in other language. 

Par exemple, Dans une phrase suit:

Pomme, orange et banane.

Nous devons changer la ligne ci-dessus pour

d'Apple (XXX), Orange (XXX) et Banana (XXX).

Ici XXX sont la traduction de différents fruits en langues étrangères. La raison pour laquelle nous devons utiliser des images à la place du texte dans unicode est que nous ne voulons pas forcer l'utilisateur à choisir un jeu de caractères différent afin de voir la page.

Answer 1

Il est difficile de dire ce que vous voulez, étant donné que vous ne nous avez presque pas donné de détails spécifiques, mais voici quelques façons d'accomplir ce que vous voulez.

La méthode la plus simple consiste à ajouter dans les images en utilisant les balises img. Les images sont par défaut des éléments en ligne, et puisque vous avez déclaré qu'elles sont de la même taille que le texte, je ne vois pas vraiment de problème à les ajouter, comme cette image ici . Tant que vous lui donnez le bon texte alt, ça devrait aller.

Si vous voulez réellement le remplacement du texte de l'image, vous pouvez utiliser la méthode habituelle, quelque chose comme:

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

Où #replace est un span intérieur d'un paragraphe, comme:

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

Comme vous pouvez voir, c'est un peu gênant, et n'offre aucun avantage sur la méthode img du tout. Jetez un oeil à la version de remplacement de texte ici: http://jsfiddle.net/VEn5p/

Answer 2

Vous pouvez essayer de spécifier à la fois la hauteur de la ligne et la hauteur de l'image dans ems. La largeur de l'image doit être un multiple de la hauteur pour garder les bonnes proportions.