2
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.
Nøglepunkter
√ Behold det visuelle design
√ Funktionelle links og henvisninger
Produkt
√ Cover
Sammenhængende produktserie bestående af en trykt bog, en hjemme
side og en e-bog, med en visuel identitet der binder produkterne sammen.
√ EPubcheck godkendt
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 begræ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 hjemmesider.
Forståelse for grafisk workflow – Overvejelser og design problematikker
Problematiske elementer
√ Fonte
√ Grafiske elementer
√ Billeder
3
Overvejelser og design problematikker – Forståelse for grafisk workflow
4
Filformater i en E-bog
Opbygningen af en E-bog
E-bøger er baseret på xhtml kodesproget, dog med visse begrænsninger, baseret på hvilken læser der bruges til at vise
e-bogen, ligesom forskellige browsers fortolker xhtml forskelligt. 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. Denne læser er opdateret med de nyeste koder og virker 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 overhovedet 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 Android 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 funktionalitet igennem, dog har den en tendens til at
pixelere billeder når den skalere dem.
Forståelse for grafisk workflow – Overvejelser og design problematikker
Specifikke filformater og deres brug
.opf: Denne fil fortæller læseren hvilket indhold ebogen består af og i hvilken 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æseren. Denne fil skal bygges op på en helt bestemt måde, ellers vil E-bogen
fejle i godkendelsen hos mange online butikker.
5
Font typer
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 systemer. 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
Overvejelser
Ved 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.
Fonte
Da 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 overskrifter, 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 acceptere 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 billeder
E-bøger læser billeder som en hjemmeside gør det, og bruger samme css regler, heriblandt primært margins til at bestemme hvordan den interagere med andre elementer.
Da min bog består af mange elementer med rammer omkring, 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 <div> bokse 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.
Overvejelser og design problematikker – Forståelse for grafisk workflow
6
Udsnit af kode fra trykt bog side 10: Timeline
Fra InDesign til E-pub
E-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 = <p></p>
Tegnformater = <span></span>
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.
Forståelse for grafisk workflow – Overvejelser og design problematikker
Udsnit af kode fra „content.opf“
7
Indholdsfortegnelse
Indholdsfortegnelse
Når man eksportere til en e-bog er et indholdsfortegnelsesformat 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
2
1
2
3
3
4
Definer format: Her medtager jeg alle afsnitsformater 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.
Eksportindstillinger: Her indsætter jeg mit indholdsfortegnelsesformat under TOC-format.
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.
toc.ncx: Ligesom .xhtml filen bruger denne informationen fra formatet til at generere en indholdfortegnelse. NCX filen bruger et <navMap> tag i stedet 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.
4
Overvejelser og design problematikker – Forståelse for grafisk workflow
8
Udsnit af kode fra „idGeneratedStyles.css“
Stylesheet
1
Udseendet af en e-bog er defineret udfra et stylesheet der bliver 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.
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 „content.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
Forståelse for grafisk workflow – Overvejelser og design problematikker
2
3
9
Uddrag
1200 Pixels
Cover
Nå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 godkendelse
1636 Pixels
For 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 validater som læser koden i e-bogen og finder potentielle fejl.
Dette er et java program der kan downloades, og jeg bruger det til samtlige e-bøger jeg laver for at sikre standarden
overholdes.
1.200 * 1.636 = 1.963.200 Pixels
Overvejelser og design problematikker – Forståelse for grafisk workflow