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.