C22: A szöveg megjelenítésének szabályozása CSS segítségével.
Alkalmazás
Minden CSS-t támogató technológia.
Ez a technika az alábbiakra vonatkozik:
- 1.3.1 teljesítési feltétel (Információ és relációk/összefüggések)
- 1.4.4 teljesítési feltétel (Szöveg átméretezés)
- 1.4.5 teljesítési feltétel (Képként reprezentált szöveg)
- 1.4.9 teljesítési feltétel (Képként reprezentált szöveg megjelenítése (kivétel nélkül))
Leírás
A technika azt szemlélteti, hogyan lehet a CSS segítségével a szöveg vizuális megjelenítését szabályozni. Ezzel a módszerrel a felhasználók, a felhasználói programon keresztül, az igényeiknek megfelelően módosíthatják a szöveg vizuális tulajdonságait. A szöveg tulajdonságai magukban foglalják a méretet, színt, betűtípust és a relatív elhelyezkedést.
Ebből a szempontból a CSS előnye elsősorban abban rejlik, hogy elválasztja egymástól a dokumentum strukturáját és a megjelenítést. Rendeltetésük szerint a stíluslapok, a kijelölésen felül, a karakterek térközének, a szövegek igazításának, az elemek elhelyezésének, az audió fájlok lejátszásának, a betűtípusok jellemzőinek stb. nagyon pontos beállítását teszik lehetővé. A stílus és a kijelölés elválasztása révén a szerkesztők egyszerűsíthetik a tartalomban szereplő kijelölést, amelyek ezáltal akadálymentesebbé válnak.
A képeken belül elhelyezkedő szövegeknek gyakran vannak akadálymentesítési problémái. Ezek között szerepel az alábbi képességek hiánya is:
-
a böngésző beállításainak megfelelő méretezés
-
a böngésző vagy a felhasználó által alkalmazott stíluslap beállításainak megfelelő színek megjelenítése
-
az olyan operációs rendszer beállítások tiszteletben tartása, mint például a nagy kontraszt
A megfelelő vizuális megjelenítés elérése érdekében célszerű az említett elemek szöveges részeiben valódi szöveget, valamint a szemantikus kijelölés és a stíluslapok kombinációit használni. A hatékony működés biztosítása érdekében javasolt a felhasználó által is elérhető betűtípusok használata, illetve meg kell határozni azokat a betűtípusokat, amelyek az elsődleges betűtípus hiányában felhasználhatóvá válnak. A modernebb gépek vagy felhasználói programok gyakran kiegyenlítik vagy megszüntetik a szövegek alternatív nevét, amelynek eredményeképpen a fejlécek és gombok szépen jelennek meg ezeken a rendszereken és nem torzítják el a szöveg képét.
Az alábbi CSS tulajdonságok hasznosak a szövegek formázása és a képekben szereplő szövegek elkerülése szempontjából:
-
A
font-familytulajdonság az állandó betűszélességű karakter családok kódolási aspektusát mutatja be. -
A
text-aligntulajdonság a szöveget a nézőponttól jobbra jeleníti meg. -
A
font-sizetulajdonság a szöveg méretének növelésére szolgál. -
A
font-styletulajdonság dőlt betűs szövegek megjelenítésére szolgál. -
A
font-weighttulajdonság a szöveg betűvastagságának a beállítására szolgál. -
A
colortulajdonság a szöveg vagy szövegdobozok színének beállítására szolgál. -
A
line-heighttulajdonság a szövegblokkban használatos sorköz beállítására szolgál. -
A
text-transformtulajdonság a karakterek nagyságát (kisbetű, nagybetű) szabályozza a szövegben. -
A
letter-spacingtulajdonság a szöveg karakterei között lévő térközt szabályozza. -
A
background-imagetulajdonság a szöveg, vagy nem-szöveges tartalom hátterének a beállítását szolgálja. -
A
first-linepszeudo osztály a szövegblokk első sorának megjelenítését szabályozza. -
Az
:first-letterpszeudo osztály a szövegblokk első betűjének a megjelenítését szabályozza. -
A
:beforeés:afterpszeudo osztályok a szövegblokkok előtti vagy utáni nem-szöveges tartalmak beszúrására szolgálnak.
Példák
1. példa: CSS karaktercsalád alkalmazása a szöveg karaktercsaládjainak beállítására
Az XHTML komponens:
Példa kód:
<p>The Javascript method to convert a string to uppercase is <code>toUpperCase()</code>.</p>
A CSS komponens:
Példa kód:
code { font-family:"Courier New", Courier, monospace }
2. példa: CSS szövegigazítás alkalmazása a szöveg elhelyezésének (igazításának) beállítására
Az XHTML komponens:
Példa kód:
<p class="right">This text should be to the right of the viewport.</p>
A CSS komponens:
Példa kód:
.right { text-align: right; }
3. példa: CSS karakterméret használata a szöveg méretének beállítására
Az XHTML komponens:
Példa kód:
<p>09 <strong class="largersize">March</strong> 2008</p>
A CSS komponens:
Példa kód:
strong.largersize { font-size: 1.5em; }
4. példa: CSS szín használata a szöveg színének beállítására
Megjegyzés: A példában alkalmazott stílus nem használható információ, struktúra vagy kapcsolatok közvetítésére.
Az XHTML komponens:
Példa kód:
<p>09 <em class="highlight">March</em> 2008</p>
A CSS komponens:
Példa kód:
.highlight{ color: red; }
5. példa: CSS karaktertípus használata a szöveg dőltté tétele érdekében
Megjegyzés: A példában alkalmazott stílus nem használható információ, struktúra vagy kapcsolatok közvetítésére.
Az XHTML komponens:
Példa kód:
<p>The article is available in the <a href="http://www.example.com" class="featuredsite">Endocrinology
Blog</a>.</p>
A CSS komponens:
Példa kód:
.featuredsite{ font-style:italic; }
6. példa: CSS karaktervastagság használata a szöveg karakter vastagságának alkalmazására.
Megjegyzés: A példában alkalmazott stílus nem használható információ, struktúra vagy kapcsolatok közvetítésére.
Az XHTML komponens:
Példa kód:
<p>This deal is available <span class="highlight">now!</span></p>
A CSS komponens:
Példa kód:
.highlight { font-weight:bold; color:#990000; }
7. példa: CSS text-transform használata a szöveg méretének átalakítására
Megjegyzés: A példában alkalmazott stílus nem használható információ, struktúra vagy kapcsolatok közvetítésére.
Az XHTML komponens:
Példa kód:
<p>09 <span class="caps">March</span> 2008</p>
A CSS komponens:
Példa kód:
.caps { text-transform:uppercase; }
8. példa: CSS sortávolság alkalmazása a szöveg sorainak beállítása céljából.
A CSS sortávolság tulajdonság a karakter méreténél kétszer nagyobb távolságra állítja be a bekezdés távolságát.
Az XHTML komponens:
Példa kód:
<p>Concern for man and his fate must always form the<br />
chief interest of all technical endeavors. <br />
Never forget this in the midst of your diagrams and equations. </p>
A CSS komponens:
Példa kód:
p { line-height:2em; }
A CSS sortávolság tulajdonság a karakter méreténél kisebb szöveg sortávolság megjelenítésére szolgál. A szöveg második sora az első sor után kerül pozicionálásra, így a szöveg úgy jelenik meg mintha az első sor része lenne, de egy kicsit alatta helyezkedik el.
Az XHTML komponens:
Példa kód:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
A CSS komponens:
Példa kód:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; }
9. példa: CSS betű térköz használata a szöveg térközeinek beállítására
A CSS betű térköz tulajdonság a szöveg második sorában egymáshoz közelebb elhelyezkedő betűk megjelenítésére szolgál.
Az XHTML komponens:
Példa kód:
<h1 class="overlap"><span class="upper">News</span><br />
<span class="byline">today</span></h1>
A CSS komponens:
Példa kód:
.overlap { line-height:0.2em; }
.upper { text-transform:uppercase; }
.byline { color:red; font-style:italic; font-weight:bold; padding-left:3em; letter-spacing:-0.1em; }
A CSS betű térköz tulajdonság a szöveg második sorában egymáshoz közelebb elhelyezkedő betűk megjelenítésére szolgál.
Az XHTML komponens:
Példa kód:
<h1 class="upper2">News</h1>
A CSS komponens:
Példa kód:
.upper2 { text-transform:uppercase; letter-spacing:1em; }
10. példa: CSS háttérkép alkalmazása szövegek és képek szintezésére.
A karakter stílus tulajdonság egy banner szöveges komponensének megjelenítésére, míg a háttérkép tulajdonság a szöveg hátterében lévő kép megjelenítésére szolgál.
Az XHTML komponens:
Példa kód:
<div id="banner"><span id="bannerstyle1">Welcome</span>
<span id="bannerstyle2">to your local city council</span></div>
A CSS komponens:
Példa kód:
#banner {
color:white;
background-image:url(banner-bg.gif);
background-repeat:no-repeat;
background-color:#003399;
width:29em;
}
#bannerstyle1 {
text-transform:uppercase;
font-weight:bold;
font-size:2.5em;
}
#bannerstyle2 {
font-style:italic;
font-weight:bold;
letter-spacing:-0.1em;
font-size:1.5em;
}
11. példa: CSS első sor használata a szöveg első sorának megjelenítésére
A CSS :first-line pszeudo osztály a
szöveg első sorát jeleníti meg nagyobb méretű, piros
színű karakterekkel.
Az XHTML komponens:
Példa kód:
<p class="startline">Once upon a time...<br />
...in a land far, far away... </p>
A CSS komponens:
Példa kód:
.startline:first-line { font-size:2em; color:#990000; }
12. példa: CSS első betű használata a szöveg első betűjének megjelenítése céljából
A CSS :first-letter pszeudo osztály az
első betűt nagyobb méretben, piros színben, és
függőlegesen középre zárt helyzetben jeleníti meg.
Az XHTML komponens:
Példa kód:
<p class="startletter">Once upon a time...</p>
A CSS komponens:
Példa kód:
.startletter:first-letter { font-size:2em; color:#990000; vertical-align:middle; }
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
- C8: A CSS betű térköz használata a szavakon belüli térközök szabályozása céljából
- C12: Százalékos érték használata a karakterek méretének megadásához
- C13: Megnevezett karakter méretek használata
- C14: Az em mértékegység használata karakter méretek meghatározásához
- C21: Sorközök állítása CSS-ben
- SCR34: A szövegmérettel arányos méret és pozíció kiszámolása
Ellenőrzések
Folyamat
-
Ellenőrizze, hogy a szöveg vizuális megjelenését CSS tulajdonságokkal szabályozták-e.
Elvárható eredmények
-
Az 1. pont igaz.