CSS を使用して、次の HTMLのテキスト ( "Word 1 Word2 Word3 Word4" ) を画像に置き換えたいと考えています。テキストと同じように、画像も水平方向にインラインで表示したいと思います。
<div id="aSentence">
<p>
<span id="word1">Word1  </span>
<span id="word2">Word2  </span>
<span id="word3">Word3  </span>
<span id="word4">Word4  </span>
</p>
</div>
私はmezzoblueや他のいくつかのサイトからいくつかのテクニックを読んで試してみましたが、これらのテクニックでは、テキストのスパンが単語を作成する 1 つまたは別の要素タイプで囲まれている必要があるように思われるという結論に達しています。横に並ばない。
この目標を達成する方法についてのアイデアはありますか? （可能であれば）スクリーンリーダーなどにソリューションを「アクセス可能」にしたいと思います。
どうもありがとう、
プレンボ。
PS: いくつかの手法を実装しようとしましたが、どれも正しく機能しませんでした: TextReplacement.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Text Replacement by Image using CSS</title>
<style type="text/css" title="currentStyle" media="screen">
@import "TextReplacement.css";
</style>
</head>
<body id="bodyId">
<div id="centerContainer">
<h1><span>Comparison of Various Techniques</span></h1>
<p class="noteText">(NOTE: only text "Word1" is being replaced by image)</p>
<div id="mainBodyContainer">
<div class="techniqueContainer">
<h2>Technique 1: FIR</h2>
<ul id="t1List">
<li id="t1w1"><span>Word1. </span></li>
<li id="t1w2"><span>Word2. </span></li>
<li id="t1w3"><span>Word3. </span></li>
<li id="t1w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Word 1 and corresponding image disappear completely.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 2: Radu</h2>
<ul id="t2List">
<li id="t2w1"><span>Word1. </span></li>
<li id="t2w2"><span>Word2. </span></li>
<li id="t2w3"><span>Word3. </span></li>
<li id="t2w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">All disapppear completely.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 3: Rundle</h2>
<ul id="t3List">
<li id="t3w1"><span>Word1. </span></li>
<li id="t3w2"><span>Word2. </span></li>
<li id="t3w3"><span>Word3. </span></li>
<li id="t3w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">No effect - image and text visible.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 4: Leahy/Langridge</h2>
<ul id="t4List">
<li id="t4w1"><span>Word1. </span></li>
<li id="t4w2"><span>Word2. </span></li>
<li id="t4w3"><span>Word3. </span></li>
<li id="t4w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Image appears above Word1.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 5: Dwyer</h2>
<ul id="t5List">
<li id="t5w1"><span>Word1. </span></li>
<li id="t5w2"><span>Word2. </span></li>
<li id="t5w3"><span>Word3. </span></li>
<li id="t5w4"><span>Word4. </span></li>
</ul>
<p class="techniqueComment">Word 1 and corresponding image disappear completely. Same as Technique 1.</p>
</div>
<div class="techniqueContainer">
<h2>Technique 6: Jason</h2>
<div id="t6List" class="borderContainer">
<span id="t6w1">Word1. </span>
<span id="t6w2">Word2. </span>
<span id="t6w3">Word3. </span>
<span id="t6w4">Word4. </span>
</div>
<p class="techniqueComment">Same as Technique 3 - Rundle.</p>
</div>
</div>
</div>
</body>
</html>
CSS ファイル: TextReplacement.css
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: verdana, "trebuchet MS", helvetica, sans-serif;
}
#centerContainer {
margin-left: auto; /* centres container */
margin-right: auto; /* centres container */
margin-top: 18px;
}
#mainBodyContainer {
width: 900px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
font-size: 1.8em;
font-weight: bold;
}
#mainBodyContainer h2{
font-size: 1.2em;
font-weight: bold;
font-style: italic;
color: green;
}
div.techniqueContainer{
text-align: center;
margin-bottom: 30px;
}
p.techniqueComment{
font-size: 0.5em;
font-weight: normal;
font-style: italic;
color: red;
}
p.noteText{
font-size: 1em;
font-weight: normal;
font-style: italic;
color: blue;
}
#mainBodyContainer ul{
list-style: none;
border: 1px solid #820000;
}
#mainBodyContainer ul li{
display: inline;
}
/* TECHNIQUE 1: FIR */
li#t1w1 {
width: 250px;
height: 61px;
background-image: url(http://stackoverflow.com/content/img/so/logo.png);
}
li#t1w1 span {
display: none;
}
/* TECHNIQUE 2: Radu */
li#t2w1 {
width: 2250px;
height: 61px;
background: url(http://stackoverflow.com/content/img/so/logo.png) top right;
margin: 0 0 0 -2000px;
}
/* TECHNIQUE 3: Rundle */
li#t3w1 {
width: 250px;
height: 61px;
background: url(http://stackoverflow.com/content/img/so/logo.png);
text-indent: -9999px;
}
/*TECHNIQUE 4: Leahy/Langridge. */
li#t4w1 {
width: 250px;
padding: 61px 0 0 0;
height: 0;
background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat;
overflow: hidden;
}
/*TECHNIQUE 5: Dwyer. */
#t5{
}
#t5List{
list-style: none;
border: 1px solid #820000;
}
#t5List li{
display: inline;
}
li#t5w1 {
width: 250px;
height: 61px;
background-image: url(http://stackoverflow.com/content/img/so/logo.png);
}
li#t5w1 span{
display: block;
width: 0;
height: 0;
overflow: hidden;
}
/* TECHNIQUE 6: Jason */
li#t6w1 {
}
#t6w1{
text-indent: -5000px;
background: url(http://stackoverflow.com/content/img/so/logo.png) no-repeat 0 0;
overflow: hidden;
}