-
2
Forståelse for grafisk workflow – Overvejelser og design
problematikker
Forståelse for grafisk workflow
I designet af den trykte bog har jeg haft et vågent øje til de
overvejelser og design problematikker det medfører at bogen skulle
klare at laves til en E-bog.
Her vil jeg klarlægge nogle af de design overvejelser der er
gjort for at gøre dette muligt med de restriktioner e-bøger
har.
ProduktSammenhængende produktserie bestående af en trykt bog, en
hjemme-side og en e-bog, med en visuel identitet der binder
produkterne sammen.
Hvad er en E-bog?E-bøger er et term der bliver smidt rundt meget
nutildags, og det variere fra alt mellem interaktive pdf 'er til
hjemmelavede formater der er be-grænset til bestemte forlag. I mit
tilfælde tager jeg udgangspunkt i det åbne format „.epub“ som
bliver brugt til langt de fleste e-bogs hjemme-sider.
Nøglepunkter
√ Behold det visuelle design
√ Funktionelle links og henvisninger
√ Cover
√ EPubcheck godkendt
Problematiske elementer
√ Fonte
√ Grafiske elementer
√ Billeder
-
Overvejelser og design problematikker – Forståelse for grafisk
workflow
3
-
4
Forståelse for grafisk workflow – Overvejelser og design
problematikker
Filformater i en E-bog
Opbygningen af en E-bogE-bøger er baseret på xhtml kodesproget,
dog med visse be-grænsninger, baseret på hvilken læser der bruges
til at vise e-bogen, ligesom forskellige browsers fortolker xhtml
for-skelligt. Dette betyder, at når man laver e-bøger er man ofte
tvunget til at kode til de mest brugte på forskellige
platforme.
Mest populære E-bogslæsere
Apple: Bruger deres egen læser, kaldet Ibook. Den-ne læser er
opdateret med de nyeste koder og vir-ker med de fleste xhtml og
html 5 koder.
Fordelen ved Ibook og apples strenge regler for udgivelsen af
Apps gør det nemt at finde ud af hvordan en E-bog vil se ud på en
Apple.
Android: Da android er en åben platform gør det også at der
findes et utal af forskellige læsere. Den mest almindelige er
BluFire Reader.
Alle disser fortolker koderne meget forskelligt og hvad der ser
rigtigt ud på en, virker overhove-det ikke på andre. Dog fungere
fonte på de fleste, men visse læsere har tendens til at ignorere
top margener.
Windows: Windows platformen har ligesom An-droid en del
forskellige læsere tilgængelige, men modsat Android er over 80% af
alle E-bøger læst på den samme platform, nemlig Adobe Digital
Editions. Denne læser klarer de fleste ting nemt og er den bedste
læser til at tjekke general funk-tionalitet igennem, dog har den en
tendens til at pixelere billeder når den skalere dem.
Specifikke filformater og deres brug
.opf: Denne fil fortæller læseren hvilket indhold ebogen består
af og i hvil-ken rækkefølge filerne skal læses.
.xhtml: Disse filer består af en eller flere sider i E-bogen og
hver er typisk et kapitel. Når man splitter et dokument ved
eksporten af Indesign laver den en ny .xhtml fil.
.ncx: Denne fil laver en indholdsfortegnelse som bliver
importeret af læse-ren. Denne fil skal bygges op på en helt bestemt
måde, ellers vil E-bogen fejle i godkendelsen hos mange online
butikker.
-
Overvejelser og design problematikker – Forståelse for grafisk
workflow
5Font typer
OvervejelserVed design af min trykte bog, blev jeg nødt til at
tænke over designet med det udgangspunkt at bogen skulle laves til
en E-bog, da der er unikke regler til .epub formatet.
FonteDa jeg designede min bog, valgte jeg at bruge en font til
min brødtekst, som findes på alle læsere, nemlig Minion Pro.
Jeg har valgt at beholde min Agency FB font til overskrif-ter,
og vedhæfte fonten i min E-bog. Dette er normalt ikke gjort, da
ikke alle læsere tager hensyn til vedhæftede fonte.
Dog har den sidste opdatering af Ibook gjort at den accep-tere
flere OpenType fonte, og det gjorde at jeg følte mig tryg ved
brugen af Agency FB, da 9 ud af 10 e-bøger nu bliver læst på en
læser der understøtter det.
Grafik og billederE-bøger læser billeder som en hjemmeside gør
det, og bru-ger samme css regler, heriblandt primært margins til at
be-stemme hvordan den interagere med andre elementer.
Da min bog består af mange elementer med rammer om-kring, både
billeder og tekst (som vist til ventre), er jeg blevet nødt til at
lægge dem ind i e-bogen som billeder med teksten inkluderet.
Normalt ville jeg kunne gøre det med bok-se og float, men ikke alle
læsere acceptere float reglen, så for at ramme så bredt som muligt
var dette løsningen.
For at mindske pixeleringen af teksten, som kan ske på visse
læsere når de skalere billedet, har jeg lagt dem i 100% størrelse
og låst den til dette i css filen.
Jeg har valgt at droppe den pagina bar i siden af bogen, da
ebøgers pagina er dynamisk opdaterede baseret på læseren.
TrueType: Udviklet af Apple i 1980'erne til at erstatte ældre
fontyper såsom Type 1. Selvom TrueType er licenseret af Microsoft,
kan brugen af True-Type på tværs af Apple og Microsoft systemer
stadig skabe problemer, hvor der f.eks. skal bruges forskellige
fonte til hvert system.
Derudover har mange TrueType fonte ikke et særligt stort
bibliotek af karaktere.
OpenType: Udviklet i samarbejde mellem Adobe og Microsoft, og
blev annonceret tilbage i 1996, Adobe har siden lavet samtlige af
deres fonte til dette format.
I modsætning til TrueType kan OpenType fonte bruges på både
Apple og Microsoft systemer, og følger de samme typografiske regler
på begge syste-mer. Dette gør også OpenType fonte til den
foretrukne font type til E-bøger.
Specielt til e-bøger: E-bøger understøtter som basis kun et
begrænset antal fonte, alt efter hvilken læser der bruges, med kun
få fonte tilfælles.
Grafik og billede elementer
-
6
Forståelse for grafisk workflow – Overvejelser og design
problematikker
Udsnit af kode fra trykt bog side 10: Timeline
Fra InDesign til E-pubE-bøger i .epub formatet laves ved at
eksportere dokumentet, hvor en masse hensyn er taget inden
eksporten, dette gælder især afsnitsformater og tegnformater.
Alle formater bliver lavet om til koder som vist til højre, dog
er ikke alle format funktioner understøttet ved eksport til
.epub.
Derudover skal man tænke på bogen, som ville man lave en
hjemmeside. F.eks. må der ikke være specialtegn eller mellemrum i
formatnavne og filnavne, inklusiv billeder.
Formater til kode
Afsnitsformater =
Tegnformater =
Både afsnitsformater og tegnformater får en class, der har samme
navn som formatet har i InDesign, dette er grunden til at man ikke
må bruge specialtegn og mellemrum i navnene.
En vigtig note er også, at hvis en font har en kursiv der ikke
hedder italic, skal man manuelt ind og rette den i koden, da den
ellers ikke følger med.
Alle kapitler har et id tag, som bruges som link destination fra
indholdsfortegnelsen.
Udsnit af kode fra „content.opf“
-
Overvejelser og design problematikker – Forståelse for grafisk
workflow
7Indholdsfortegnelse
IndholdsfortegnelseNår man eksportere til en e-bog er et
indholdsfortegnelses-format en nødvendighed, da den bruges til at
definere de indbyggede indhodsfortegnelser i forskellige
e-bogslæsere, og hvis den ikke indeholder en, vil den ikke blive
godkendt.
Da jeg lavede mit indholdsfortegnelsesformat, gjorde jeg
således:
1 Definer format: Her medtager jeg alle afsnitsfor-mater der
skal med i indholdsfortegnelsen. Derefter indstiller jeg dem alle
til ikke at medtage sidetal, da e-bøger er „reflowable“, og dette
gør at deres sider ændre sig alt efter læser og skriftstørrelse der
er valgt.
2 Eksportindstillinger: Her indsætter jeg mit
ind-holdsfortegnelsesformat under TOC-format.
3 toc.xhtml: Bruger informationen fra formatet til at lave en
ordered list med list elementer til hver punkt i
indholdsfortegnelsen. Disse bliver brugt til læsere med xhtml
baserede indholdsfortegnelser.
4 toc.ncx: Ligesom .xhtml filen bruger denne infor-mationen fra
formatet til at generere en indholdfor-tegnelse. NCX filen bruger
et tag i ste-det for en ordered list. NavMap tagget er specifikt
til e-bøger og bliver brugt i de fleste læsere, såsom IBooks og
Adobe Digital editions.
1
2
3
4
-
8
Forståelse for grafisk workflow – Overvejelser og design
problematikker
Udsnit af kode fra „idGeneratedStyles.css“
StylesheetUdseendet af en e-bog er defineret udfra et stylesheet
der bli-ver automatisk genereret når man eksportere fra
InDesign.
Efter eksporteringen skal man dog ind og rette i style-sheetet,
for at sikre at bogen kan blive godkendt og for at finjustere mange
af koderne da eksporten ikke er perfekt.
1 Et eksempel på css koden der importere en font, der er
vedhæftet i .epub filen. Her er det Agency FB fonten der er
importeret hvor dens egenskaber er defineret.
2 Her bliver de generelle indstillinger for hele e-bogen sat,
dette er defineret udfra indstillingerne når man eksportere fra
InDesign.
Koden „-epub-hyphens“ giver bogen rettigheder til at dele ord
efter det sprog der er defineret i „con-tent.opf “ filen.
3 Den autogenerede css kode for Afsnitsformatet „Brødtekst med
indryk“ eller som jeg skriver for at sikre at det virker i .epub
„br_m_indryk“.
Koden „-epub-text-align-last: left;“ gør at en tekst med
„text-align: justify“ lader den sidste linie stå med „text-align:
left“ i stedet for justify, hvilket er vigtigt i eksempelvis en
e-bogs roman.
1
2
3
-
Overvejelser og design problematikker – Forståelse for grafisk
workflow
9Uddrag
1200 Pixels
1636 Pixels
1.200 * 1.636 = 1.963.200 Pixels
CoverNår man eksportere en InDesign fil til en .epub fil har man
2 muligheder. Enten tager man og laver et cover billede af den
første side, eller også kan man importere et .jpg billede.
Cover billeder har nogle bestemte regler for opløsning de skal
leve op til. De skal være i 300 dpi og have en max pixelmængde på
1.999.999 (dvs. at bredde * højde ikke må overstige 2 millioner
pixels).
Jeg har valgt at bruge samme cover billede som den trykte bog
til mit cover, dog med et lille E-Pub-tag i øverste venstre
hjørne.
EPubcheck godkendelseFor at sikre en vis standard, som .epub
bøger skal leve op til for at de kan uploades til online butikker,
har organisationen IDPF (International Digital Publishing Forum)
lavet en va-lidater som læser koden i e-bogen og finder potentielle
fejl.
Dette er et java program der kan downloades, og jeg bru-ger det
til samtlige e-bøger jeg laver for at sikre standarden
overholdes.