Üzemeltető: Blogger.
2011. február 3., csütörtök

postheadericon PRC készítés házilag 7.rész - .prc5 - Szövegformázás

PRC készítés 5.

Szövegformázás

A mobi PRC kevés látványos szövegformázási lehetőséget nyújt. Amit képes kezelni az gyakorlatilag az alap HTML kód, és egy nagyon kevés CSS formázás. Másrészt sok paramétert (betűméret, betűtípus, szín) a Reader programok az olvasó beállítására bíznak, így ezeket bűn a PRC-ben fixen lerögzíteni. Ezek alapján úgy vélem, hogy a mobi PRC számára kimondottan előnyös a minél egyszerűbb HTML kód, azaz igyekezni kell minden formázást az alapelemek (<p> <h...> </br> <b> <i> <u> <s> <sup> <sub> <small> <big> <table> <a...> <img ....>) segítségével megoldani.
A saját gyakorlatomban ezért nagy fontosságú a HTML kód tisztítása, és mindig "fapados" HTML fájlt használok a következőkben részletezett módszereknél. A mobi korlátozott képességein túl még egy érv szól a letisztult HTML fájlok használata mellett: a "<span...>", "class=..." és "style=..." tölteléktől megszabadított kód átláthatóbb, és azok a módosítások, amit kézzel végzünk rajta biztos a kívánt eredményre vezetnek.
A következő átalakítások rövidebb leírást kaptak. A bemutatott HTML kódokat a szerkesztő keresés-csere funkciójával kell logikusan és értelemszerűen használni a HTML fájl módosításakor. A műveletek alapja mindig egy Word DOC-ból Creator-ral készített HTML szövegfájl, amin a később részletesen is ismertetett szkriptes kód-tisztítást is végrehajtottuk.



1. Sortávok

A mobiban az alapsortávot az olvasó állíthatja magának, a HTML ilyen paramétert nem ismer, a CSS formázásoktól pedig a tisztítás során megszabadultunk. Marad a bekezdések elsősora előtti szünet, ami alapesetben a mobiban nagyobb az alapsortávnál:
A mobi a "height=" attribútumot vezette be az elsősori sortáv szabályozására. Ha a bekezdések előtti szünet zavar, akkor a <p> tag-eket cseréld <p height="0">-ra!
A dolog hátulütője, hogy így az üres sorok végleg észrevehetetlenek a PRC-ben, ezt kivédheted ha a <p height="0"> </p> üressort 2-3 db alapértelmezett üressorra <p> </p> cseréled:
A <p> bekezdésekkel ellentétben a <br/> sortörések nem kapnak megelőző szünetet, így megfelelő szövegkép kapható az alkalmazásukkal:
A megoldáshoz a Word-ben érdemes automatikusan minden bekezdésjelet (enter) sortörésre (shift-enter) cserélni, majd a szöveg végigpörgetésével minden nagyobb szünethez kézzel visszaírni a bekezdésjeleket.

A "height=..." paraméter jól jön, ha egy kis plusz távolságot szeretnél nyerni a PRC-ben. Például laptörések utáni sor közvetlenül a margónál kezdődik, ami csúnya lehet:
Megfelelő pontokra a <h...> és <p> tag-ekbe beírhatsz valami "height=..." értéket:

2. Elsősor behúzása

A bekezdések és a sortörések elsősora között a behúzás alapértékében is különbség van:
Ha a bekezdések esetén el szeretnéd tüntetni az első sor behúzását, akkor a mobi "width=..." paraméterét használhatod, azaz a <p> tag-eket cseréld <p width="0">-ra:
Ugyanez fordítva, ha a sortörések esetén is egy bekezdésekhez hasonló elsősori "behúzásra" van szükséged, akkor a sorok elejére rakj két nemtörhető szóközt, azaz a <br/> tag-eket cseréld "<br/>  " kombinációra:

3. Teljes bekezdés behúzása

Ha azt szeretnéd, hogy egy szövegrész jobbról-balról beljebb legyen a margónál, akkor erről le kell mondanod. A mobi csak részben használja azt a CSS formázást, ami a margókat állítja: csak egy fix szélességű behúzás jelenik meg a PRC-ben és az is csak a bal oldalon. Ennek ellenére (mivel a HTML-ben mindkét oldal látszik) javasolt a jobb- és a balmargó állítását mindig egyszerre használni. Ehhez a style="margin-right:20pt;margin-left:20pt" attribútumot kell beírni a kérdéses bekezdés <p> tag-jébe:

4. Keret

Egyszerű keretezéses kiemelést csinálhatsz, ha a kérdéses szövegrészt egy <div> blokkba foglalod, amely rendelkezik megfelelően megadott keret-paraméterekkel: <div style="border:solid windowtext 0.5pt; padding: 1.0pt 4.0pt 1.0pt 4.0pt">
A keret mindig margótól margóig tart, ezen semmi CSS paraméter beírása nem segít. Táblázatok használatával esetleg lehet egy keret kinézetét tovább alakítani, de a táblázatok kezelése annyira bonyolult, hogy sokszor nem érdemes ezzel komolyan szenvedni.



5. Kiemelés betűmérettel

Nem javasolt a PRC-ben fixált betűméreteket használni, mivel az olvasó olyanra állíthatja, ami neki megfelel. Viszont van két HTML paraméter, ami pontos érték megadása nélkül megváltoztatja az alapértelmezett betűmérethez képest a szöveget. Ha egy szövegrészt kicsit kisebb mérettel írva szeretnél kiemelni (pl. újságrészlet), akkor az adott bekezdéseket foglald a <small>...</small> tag-ek közé:
Ha éppen nagyobb betűmérettel akarod kiemelni (pl. táblafelirat), akkor pedig használd a <big>...</big> tag-et:

6. Iniciálé

Valódi iniciálét természetesen a mobi nem tud, de a <big> tag-el és egy <b> vastagítással az első sorok első karakterét kiemelhetjük:

7. Kiemelés betűtípussal

A betűtípust sem illik lerögzíteni a PRC-ben. Ennek ellenére mivel majd' mindenki arányos (proporcionális) betűtípussal szeret olvasni, megtehetjük azt, hogy a kiemelendő szövegrészt egy fix karakterszélességű betűtípussal írjuk. A programok általában a betűtípus helyettesítésekkor arányost arányossal, fixet pedig fixszel helyettesítenek. Így ha egy részt mondjuk a fix szélességű Courier betűvel szedtünk, az olyan Reader-ekben, amelyek több karakterkészlettel rendelkeznek, ez a rész el fog ütni a többi szövegtől. Ehhez a megoldáshoz a kérdéses részt a <font face="Courier New"> ... </font> tag-ekkel kell jelölni:
A trükk a PC Reader esetén értelemszerűen látható eredményt ad a sok telepített betűkészlet miatt. A PDA-kon is van elég betűkészlet a különbség megjelenítésére, viszont a mobiltelefonokon nem mindig látszik ez a megoldás. Javasolt tehát mindig más kiemelésekkel együtt használni.



8. Igazítások százalékos táblázatokkal

A mobi a táblázatokat - ha point, pixel vagy hasonló fix módon vannak méretezve - elég kényelmetlenül kezeli. Ezzel szemben némi szövegformázást el lehet érni, ha a táblázatok méreteit csak a kijelző-szélesség százalékában határozzuk meg. Tehát a <table> és a <td> tag-ek minden "width=..." paramétere csakis százalék-értéket tartalmazzon, minden érték legyen beírva és ezek az értékek ellentmondás-mentesek legyenek. Ha a border="0" tulajdonságot használjuk a táblázatnál, akkor az olvasó észre sem veszi, hogy táblázatot használtunk. Egy minimális táblázat, ami egy <tr> sort és két <td> oszlopot tartalmaz, HTML-kódban így néz ki:
<table border="0" width="100%">
   <tr>
      <td align="left" valign="top" width="30%"> ide kerül a szöveg </td>
      <td align="left" valign="top" width="70%"> meg ide kerül a szöveg </td>
   </tr>
</table>
Az így kialakított táblázatokkal egy kis lehetőséget kapunk a szöveg képernyőbeli elosztásának szabályozására.
Például rendezett felsorolások esetén baloldalon egy keskeny oszlop a sorszámoknak, jobb oldalon a maradék hely a szöveg-elemeknek. Ekkor az oszlopok beállítása lehet <td width="15%">...</td> <td width="85%">...</td>:
Másik megoldás a táblázattal készített kétoldali behúzás. Ehhez három oszlop kell, mondjuk így: <td width="15%">...</td> <td width="70%">...</td> <td width="15%">...</td>:
Egy kis módosítással az előző megoldást keretes szöveggé lehet alakítani. Ellentétben a korábbi faltól-falig <div> kerettel, itt ha a border="1" tulajdonságot csak a középső oszlopnál adjuk meg, akkor a megjelenített képen mindkét oldalon a margónál beljebb kapjuk a keret szélét:
Ritka esetben olyan extrém formázás is felmerül, hogy egy sorban kellene a bal margóhoz és a jobb margóhoz igazított két szövegblokkot megjeleníteni. Ekkor is táblázatot használhatunk két oszloppal (illetve középen egy vékony harmadikkal, elválasztásként) és a két oszlopon belül a szövegigazítást külön szabályozhatjuk. Tehát egy ilyesfajta megoldás lehet: <td width="47%">...</td> <td width="6%">...</td> <td width="47%">...</td>:
Látható, hogy a táblázatokkal elég rugalmas szövegképet lehet kialakítani, azonban nagyon sok kézimunkával jár, így az esetek többségében szerintem felesleges ezzel szenvedni. Fontos még megjegyezni, hogy a kis kijelzőméretekre tekintettel, az olyan oszlopok, amelyek sok szöveget tartalmaznak, ne legyenek keskenyebbek 50-80%-nál.



9. Laptörések

Nem javasolt a DOC nyersanyagban laptörést vagy szakasztörést hagyni, mert csak gondot okoz a konvertálás során. Viszont utólag a HTML kézi szerkesztésével visszaírhatsz ilyen hatású utasítást a kódba.
Egyik laptörést adó megoldás a mobi saját kódja, a korábban is említett <mbp:pagebreak/>. Van egy paramétere a "crossable=...", ami azt szabályozza, hogy lapozással vagy folyamatos görgetéssel át lehet-e jutni ezen a ponton a következő oldalra. Alapértelmezésben a crossable="yes" így ezt nem is kell beírni a pagebreak tag-be. A crossable="no" viszont egy külön szövegrészt készít, amely csak a belsejébe mutató linkkel érhető el. Én például a lapokra bontott tartalomjegyzéknél használom, de ilyennel lehet például lezárni egy-egy index vagy lábjegyzet bejegyzést is, így az olvasó csak a szóban forgó jegyzetet látja a lapon nem pedig a jegyzetek folyamatos listáját.
Másik laptörés megoldás a CSS szabvány szerinti style="page-break-before: always". Ezt egyesével bírhatod a szükséges helyekre a <p> és <h...> tag-ekbe így:
<style>
h3 {
   text-align: center;
   page-break-before: always;
   }
h4 {
   text-align: center;
   page-break-before: always;
   }
</style>
"Elminster"

PRC gyártás házilag 1.rész - Javaslatok
PRC gyártás házilag 2.rész - Szövegjavítás
PRC gyártás házilag 3.rész - .prc1 - Bevezető
PRC gyártás házilag 4.rész - .prc2 - Konvertálás Creator-ral
PRC gyártás házilag 5.rész - .prc3 - Tartalomjegyzék alapfokon
PRC gyártás házilag 6.rész - .prc4 - Tartalomjegyzék megoldások
PRC gyártás házilag 7.rész - .prc5 - Szövegformázás
PRC gyártás házilag 8.rész - .prc6 - HTML tisztítás
PRC gyártás házilag 9.rész - .prc7 - Karakterek és kódlapok
PRC gyártás házilag 10.rész - .prc8 - Képek kezelése
PRC gyártás házilag 11.rész - .prc9 - Linkek és jegyzetek

0 megjegyzés: