C28: Szövegdobozok méretének meghatározása em egységek segítségével
Alkalmazás
CSS
Ez a technika az alábbiakra vonatkozik:
A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések
Internet Explorer 6-os böngésző alkalmazása esetén a Windows High Contrast mód túl nagyra fogja újraméretezni a beágyazott táblázatokban található százalékos méretalapú karaktereket. Az IE modernebb verziói és a Firefox viszont már nem méretezi újra High Contrast módban a karaktereket és ebből a szempontból nem okoznak problémát.
Leírás
A technika rendeltetése az, hogy segítségével meghatározható legyen a szöveget tartalmazó vagy em mértékegységet alkalmazó szöveg befogadására alkalmas dobozok szélessége, illetve magassága. A szövegek újraméretezését támogató felhasználói programok számára ez lehetővé teszi azt, hogy a szöveg méretének változásának megfelelően változtassák meg az őket tartalmazó dobozok méreteit.
Más mértékegységekben meghatározott szövegdoboz magasság és/vagy szélesség esetén előfordulhat, hogy a szöveg bizonyos részei levágásra kerülnek a méret növelésekor, mivel azok kívül kerülnek a dobozok szegélyein.
A dobozok alapvetően a szöveg elhelyezésének szabályozására szolgálnak a dobozon belül. Ezen kívül tartalmazhatnak egyéb rendező és struktúrális elemeket, valamint űrlapvezérlőket.
Példák
1. példa: Szöveget tartalmazó dobozok méreteinek meghatározása em mértékegységgel.
Az alábbi példában a "nav_menu" azonosítóval rendelkező doboz a weboldal fő tartományának baloldalán elhelyezkedő navigációs menü pozícionálására szolgál. A navigációs menü a "nav_list" azonosítóval ellátott szöveges hivatkozások listáját tartalmazza. A hivatkozások szövegének mérete, valamint a doboz szélessége em mértékegységben került megadásra.
Példa kód:
#nav_menu { width: 20em; height: 100em }
#nav_list { font-size: 100%; }
2. példa: A szöveges alapú űrlapvezérlők méretének meghatározása em egységek segítségével
Az alábbi példában a szöveget tartalmazó, vagy szöveget elfogadó beviteli elemek a "form 1" osztálynevet kapják. A CSS szabályok segítségével a karakterek mérete százalékosan, míg szélességük em egységben kerül megadásra. Ez lehetővé teszi az űrlap vezérlőkön lévő karakterek megváltoztatását anélkül, hogy a szöveg egy része levágásra kerülne (mivel az űrlap vezérlő szélessége a karakter méretével arányosan fog megváltozni).
Példa kód:
input.form1 { font-size: 100%; width: 15em; }
3. példa: Em egységekben megadott legördülő dobozok
Az alábbi példában a kiválasztást szolgáló elemek a "pick" osztálynevet kapták. A CSS szabályok segítségével a karakterek mérete százalékosan, míg szélességük em egységben kerül megadásra. Ez lehetővé teszi azt, hogy a szövegméret beállításainak megváltoztatásakor az űrlapvezérlő szövege levágás nélkül kerüljön újraméretezésre.
Példa kód:
input.pick { font-size: 100%; width: 10em; }
4. példa: Nem-szöveges alapú űrlapvezérlők méretezése em egységek segítségével
Az alábbi példában a jelölőnégyzeteket és rádiógombokat meghatározó beviteli elemek a "choose" osztálynevet kapták. A CSS szabályok segítségével ezeknek az elemeknek em egységekkel került meghatározásra a szélessége és a magassága. A szövegméretek beállításának megváltoztatásakor ez lehetővé teszi majd az űrlapvezérlő újraméretezését.
Példa kód:
input.choose { width: 1.2em; height: 1.2em; }
Kapcsolódó technikák
- C12: Százalékos érték használata a karakterek méretének megadásához
- C14: Az em mértékegység használata karakter méretek meghatározásához
- C17: Szöveget tartalmazó űrlap elemek méretezése
- C20: Oszlopok szélességének meghatározása relatív mértékegységekkel olyan módon, hogy a böngésző újraméretezésekor a sorok átlagosan legfeljebb 80 karakter hosszúságúak legyenek
Ellenőrzések
Folyamat
-
Azonosítsa a szöveget tartalmazó vagy szövegek bevitelét lehetővé tevő dobozokat.
-
Ellenőrizze, hogy a doboz szélessége és/vagy magassága em egységekben került-e meghatározásra.
Elvárható eredmények
-
A 2. pont igaz.