SlideShare a Scribd company logo
1 of 69
Creating
Fixed-Layout
EPUBs
(Starting slowly)
Goals
• Clear understanding of the format
• A good sense of where, when, why
• How to bake your own
• Ideas for how to enhance with grace
• A little about the various tools
• How to best use the new ID FXL export
How FXL ebooks are made
http://lifenebooks.tumblr.com/post/53204914234/how-ebooks-are-created
What is Fixed Layout?
• Print-replica format
• Absolutely positioned text overlays on image
backgrounds
• Text size cannot be changed
• Layout holds its shape, with very little device
fragmentation
Structure
• Very similar to reflowable
epub – same basic ingredients
• One HTML per page/spread
• CSS contains positioning
Where
• iBooks: iPads and on Desktop
• Kobo iOS and Android
• Google Play
• Kindle KF8*
When
• Children’s picture books
• Manga/Digital comics/Graphic novels
• Heavily illustrated non-fiction
Cautions
• Be sure to serve your content
• Check your digital comfort level when opting
for this format
• Refer back to “Where”
• Smaller distribution channels
More Cautions
• Opposite of responsive
• Text-heavy pages are going to give you device
fragmentation headaches
• Confusing consumer experience
• Expensive to produce
https://xkcd.com/927/
Diversity of the spec
• Apple/Kobo/Google FXL epub
• Kindle KF8-MOBI
• Barnes & Noble ePib
• And, until recently, Sony epub3 format
Some Non-fiction Samples
• Just Another Day
• Draw Out the Story
Three main parts of FXL
• One HTML file per page
• Viewport
• Metadata
Structure of the HTML
The CSS behind it
Viewport
• Defines the size and aspect ratio of the page
• An artifact of the print trim size
• Defined in the header, the CSS and must
match background image size
Metadata
• Key difference, forces the device to render the
epub differently
• Make sure the orientation serves the content
Spine <meta property=“ibooks:binding”>
false</meta>
Metadata in EPUB2
• Viewport definitions are the same
Images
• 3.2 million pixels limit in iBooks
• Double pixel depth of viewport for pinch-and-
zoom
• Scaled via the CSS
• Avoid flattening text into the image
• Mind your alt text
Workflow1: prep
• Duplicate the ID file
• Fonts?
• Add in covers, endpapers, marketing pages as
required
• Edit out print-specific material from copyright
page
Workflow: Text1
• Add a header to
each page, set that
text to “break epub
here”, export to
reflowable to get
one HTML file per
page
Workflow: Text 2
• Children’s titles that will have MO:
– Text into something like TextWrangler with line breaks
– Mark the end of the line (xxx)
– Put each word on it’s own line
– Number the lines
– Use the following find/replace:
(d+) (.*?)(xxx)*r with
<span id="W1">2</span> 3
Workflow: Text 2 (cont’d)
• Replace xxx with r and you have the shape
back
• Using an HTML template for your book, create
the pages from your tagged text file
HTML Template
Workflow: Images
• Save-as
• Delete all the live text boxes
• Output the ID file as a series of JPEGs, sRGB,
150dpi
• Name in a simple manner: ISBN? Page
number?
• Use PNG only when you require transparency
Workflow: OPF
• List each HTML/image in the <manifest>
• Order them in the <spine>
• Adjust metadata
• Add fonts, media to the <manifest>
• Point container.xml to OPF
Workflow: CSS
• Dupe the ID file one more time
• Delete all artwork, empty frames etc., until
nothing but live text frames are left
• Run Rorohiko’s CSS Geometry script to get the
page <div> CSS for the positioning
Workflow: CSS2
• Remembering viewport definitions from
earlier, write the CSS
• Simple, minimal – similar to reflowable CSS in
tone, clarity
• iBookstore Asset Guide says to avoid
fractional definitions, to define font size in
pixels not ems
• Fonts must be embedded
SVG
• Use sparingly per
Asset Guide and
accessibility best
practices
• For type on a curve
• Include a fallback
• MO highlights may
not work
FXL QA
• iBooks
• Kobo iOS and Android
• Readium (Chrome app)
• Google Play
• Test on device, not just in emulators!
Read Aloud
• Syncing chunks of audio to highlight along
with chunks of text
• Need an .m4a
• Use Audacity to
demarcate chunks
of the soundtrack
Audio Sync
• Export tagged chunks
to a txt file
• Number the lines
• Regex:
^(d*)s(.*?)t(.*?)t
to
<par id="par1">r<text src="filename.xhtml#W1”/>r<audio
src="audio/filename.m4a" clipBegin="2s" clipEnd="3s"
/>r</par>
• Add a little header text and you have your
SMIL file. Ta da!
Okay, it’s tedious
• Liz Castro’s Read Aloud Miniguide is very
helpful
(www.elizabethcastro.com/epub/)
• An automated audio/text synchronization
tool, in beta: https://readbeyond.it/sync/
OPF Changes
Your epub2 will no longer pass validation!
Audio Styling
• Customize the CSS
on a page-by-page
basis if you want
• Kobo support is varied – no highlight
customizing in Android; use CSS kobo-smil-
highlight for custom colour in iOS
• Read-aloud highlighting can be micro or
macro – at the word, sentence or page level
Other Audio
• Ambient soundtracks are possible in iBooks:
<audio epub:type="ibooks:soundtrack"
src="audio/soundtrack.mp4"/>
• Controls will automatically appear but
additional start and stop buttons can be made
for iBooks
Javascript
• Simple animations, small interactivities
• Call it in the HTML header, list it in the
<manifest>
• Good support from iBooks, Kobo iOS, Kobo
Android
Plug-Ins
Aquafadas:http://www.aquafadas.com/en/
Rorohiko’sEpubCrawler:www.rorohiko.com/wordpress/manuals/fixed-layout-epub-assistant-in-indesign-epubcrawler/
Flipick:http://production.flipick.com/
CircularFlo:http://www.circularsoftware.com/home-us/
ZooDigital’sZEBtool:http://www.zoodigital.com/who-we-work-with/publishers/
EasyPress:www.easypress.com/markets/book-publishers#
TigerCreate: tigerbooksmedia.com/
PubCoder: http://www.pubcoder.com/
Booqlab: http://booqlab.com/
Magic Epub: http://magicepub.com/home
But but but
• An hour or so ago, creating an FXL epub got a
lot easier
• This is big.
• Beautiful, clean,
pixel-perfect
layouts directly
out of InDesign
Things You Should Know
• Exports word-level positioning controls with
inline styling at <div> and word level.
• The HTML includes inline styling and
positioning.
Basics of Layout
• Clean layouts still matter (stern look) but,
well, not so much.
• Structure still matters
• Good typography habits matter a lot
• White space via em-, en-, or tabs won’t export
(as expected)
What?
Fonts
• Fonts must be available for packaging
• Only OpenType and TrueType fonts can be
used
Also: kerning is not supported on individual
characters
Some tips and tricks
• Rules and box outlines won’t come out at the
same thickness
• Layers and transparency are tricky.
• Unlike reflowable
epub, master page
items will come
through: folios,
running heads, any
drawn page items
that will be on each
page.
• Editing the code is hard
Best practices
• No sketchy typography practices
• Set up the ID file, deal with layers and
transparencies, and iterate from the file
• Especially for long documents, a clean
navigation file will make your life easier
Hyperlinks
• At present, cross-references, indexing, and
hyperlinks are not supported.
Beware the z-index
• The z-index property specifies the stack order of an
element.
• An element with greater stack order is always in
front of an element with a lower stack order.
• Note: z-index only works on positioned elements
(position:absolute, position:relative, or
position:fixed).
Final notes
• Conversion to KF8-FXL from this epub export
will be difficult
• Without word-level IDs applied to the <span>,
adding media-overlays will be tricky
• Revision is best achieved by re-running the
entire file – single CSS for the whole
document
Thanks!
Twitter: @LauraB7
laura@bradytypesetting.com

More Related Content

What's hot

Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography ReincarnatedWeb Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography ReincarnatedExtensis
 
EPUB 3 (non technical summary)
EPUB 3 (non technical summary)EPUB 3 (non technical summary)
EPUB 3 (non technical summary)Corbas Consulting
 
EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave Cramer
EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave CramerEPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave Cramer
EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave CramerBookNet Canada
 
Curling up with your kindle fire (fire
Curling up with your kindle fire (fireCurling up with your kindle fire (fire
Curling up with your kindle fire (fireKathy Petlewski
 
Getting Comfortable With Your iPad
Getting Comfortable With Your iPadGetting Comfortable With Your iPad
Getting Comfortable With Your iPadKathy Petlewski
 
D2L Webinar: Five More Quick Wins for Accessible Online Courses
D2L Webinar: Five More Quick Wins for Accessible Online CoursesD2L Webinar: Five More Quick Wins for Accessible Online Courses
D2L Webinar: Five More Quick Wins for Accessible Online CoursesD2L Barry
 
Html5 Forms in Squiz Matrix - Dave Letorey
Html5 Forms in Squiz Matrix - Dave LetoreyHtml5 Forms in Squiz Matrix - Dave Letorey
Html5 Forms in Squiz Matrix - Dave LetoreySquiz
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design WorkshopFaye Tandog
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlantaThinkful
 
AT Software/Apps Demonstration
AT Software/Apps DemonstrationAT Software/Apps Demonstration
AT Software/Apps Demonstrationshiina419
 

What's hot (15)

Ebooks
EbooksEbooks
Ebooks
 
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography ReincarnatedWeb Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
 
EPUB 3 (non technical summary)
EPUB 3 (non technical summary)EPUB 3 (non technical summary)
EPUB 3 (non technical summary)
 
EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave Cramer
EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave CramerEPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave Cramer
EPUB vs. WEB: A Cautionary Tale - ebookcraft 2016 - Tzviya Siegman & Dave Cramer
 
Curling up with your kindle fire (fire
Curling up with your kindle fire (fireCurling up with your kindle fire (fire
Curling up with your kindle fire (fire
 
Getting Comfortable With Your iPad
Getting Comfortable With Your iPadGetting Comfortable With Your iPad
Getting Comfortable With Your iPad
 
D2L Webinar: Five More Quick Wins for Accessible Online Courses
D2L Webinar: Five More Quick Wins for Accessible Online CoursesD2L Webinar: Five More Quick Wins for Accessible Online Courses
D2L Webinar: Five More Quick Wins for Accessible Online Courses
 
Html5 Forms in Squiz Matrix - Dave Letorey
Html5 Forms in Squiz Matrix - Dave LetoreyHtml5 Forms in Squiz Matrix - Dave Letorey
Html5 Forms in Squiz Matrix - Dave Letorey
 
HTML5 Forms OF DOOM
HTML5 Forms OF DOOMHTML5 Forms OF DOOM
HTML5 Forms OF DOOM
 
Wd hw 1
Wd hw 1Wd hw 1
Wd hw 1
 
XML and EPUB
XML and EPUBXML and EPUB
XML and EPUB
 
MCC Web Design Workshop
MCC Web Design WorkshopMCC Web Design Workshop
MCC Web Design Workshop
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
 
AT Software/Apps Demonstration
AT Software/Apps DemonstrationAT Software/Apps Demonstration
AT Software/Apps Demonstration
 
AAUP 2012: Digitizing the Backlist II (C. Lewis Evans)
AAUP 2012: Digitizing the Backlist II (C. Lewis Evans)AAUP 2012: Digitizing the Backlist II (C. Lewis Evans)
AAUP 2012: Digitizing the Backlist II (C. Lewis Evans)
 

Similar to Creating Fixed-Layout EPUBs

Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Gardendigitalbindery
 
TBEX Europe 2016 - Ebook from Content to Formatting to Publication
TBEX Europe 2016 - Ebook from Content to Formatting to PublicationTBEX Europe 2016 - Ebook from Content to Formatting to Publication
TBEX Europe 2016 - Ebook from Content to Formatting to PublicationLinda Aksomitis, Travel Blogger
 
Programming Languages #devcon2013
Programming Languages #devcon2013Programming Languages #devcon2013
Programming Languages #devcon2013Iván Montes
 
Lava con 2011 amazon and apple publishing workshop2
Lava con 2011 amazon and apple publishing workshop2Lava con 2011 amazon and apple publishing workshop2
Lava con 2011 amazon and apple publishing workshop2Matt Sullivan
 
EPUB - a workshop for beginners
EPUB - a workshop for beginnersEPUB - a workshop for beginners
EPUB - a workshop for beginnersBeat Oderbolz
 
Simply Accessible - Kevin Callahan - ebookcraft 2018
Simply Accessible - Kevin Callahan - ebookcraft 2018Simply Accessible - Kevin Callahan - ebookcraft 2018
Simply Accessible - Kevin Callahan - ebookcraft 2018BookNet Canada
 
Hacking iBooks and ePub3 with JavaScript!
Hacking iBooks and ePub3 with JavaScript!Hacking iBooks and ePub3 with JavaScript!
Hacking iBooks and ePub3 with JavaScript!Jim McKeeth
 
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresThe beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresBookNet Canada
 
DITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet RequirementsDITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet RequirementsSuite Solutions
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3Jeff Byrnes
 
The Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upThe Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upAdrian Roselli
 
Lavacon 2011: Managing Translations in Frame DITA without a CMS
Lavacon 2011: Managing Translations in Frame DITA without a CMSLavacon 2011: Managing Translations in Frame DITA without a CMS
Lavacon 2011: Managing Translations in Frame DITA without a CMSClearPath, LLC
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計傳錡 蕭
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLGrayzon Gonzales, LPT
 
Web forms and html (lect 1)
Web forms and html (lect 1)Web forms and html (lect 1)
Web forms and html (lect 1)Salman Memon
 

Similar to Creating Fixed-Layout EPUBs (20)

Open Standards in the Walled Garden
Open Standards in the Walled GardenOpen Standards in the Walled Garden
Open Standards in the Walled Garden
 
Interactive E-Books
Interactive E-BooksInteractive E-Books
Interactive E-Books
 
TBEX Europe 2016 - Ebook from Content to Formatting to Publication
TBEX Europe 2016 - Ebook from Content to Formatting to PublicationTBEX Europe 2016 - Ebook from Content to Formatting to Publication
TBEX Europe 2016 - Ebook from Content to Formatting to Publication
 
CISA 101S
CISA 101SCISA 101S
CISA 101S
 
Programming Languages #devcon2013
Programming Languages #devcon2013Programming Languages #devcon2013
Programming Languages #devcon2013
 
Oreilly
OreillyOreilly
Oreilly
 
Lava con 2011 amazon and apple publishing workshop2
Lava con 2011 amazon and apple publishing workshop2Lava con 2011 amazon and apple publishing workshop2
Lava con 2011 amazon and apple publishing workshop2
 
EPUB - a workshop for beginners
EPUB - a workshop for beginnersEPUB - a workshop for beginners
EPUB - a workshop for beginners
 
Simply Accessible - Kevin Callahan - ebookcraft 2018
Simply Accessible - Kevin Callahan - ebookcraft 2018Simply Accessible - Kevin Callahan - ebookcraft 2018
Simply Accessible - Kevin Callahan - ebookcraft 2018
 
Hacking iBooks and ePub3 with JavaScript!
Hacking iBooks and ePub3 with JavaScript!Hacking iBooks and ePub3 with JavaScript!
Hacking iBooks and ePub3 with JavaScript!
 
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris FebresThe beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres
 
DITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet RequirementsDITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet Requirements
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
The Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-upThe Role of Design in Accessibility — a11yTO Meet-up
The Role of Design in Accessibility — a11yTO Meet-up
 
Lavacon 2011: Managing Translations in Frame DITA without a CMS
Lavacon 2011: Managing Translations in Frame DITA without a CMSLavacon 2011: Managing Translations in Frame DITA without a CMS
Lavacon 2011: Managing Translations in Frame DITA without a CMS
 
Web Design Norms
Web Design NormsWeb Design Norms
Web Design Norms
 
網頁程式設計
網頁程式設計網頁程式設計
網頁程式設計
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
 
Creating ebooks
Creating ebooksCreating ebooks
Creating ebooks
 
Web forms and html (lect 1)
Web forms and html (lect 1)Web forms and html (lect 1)
Web forms and html (lect 1)
 

Recently uploaded

306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Sitegalleryaagency
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一z xss
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作7tz4rjpd
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 

Recently uploaded (20)

306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作韩国SKKU学位证,成均馆大学毕业证书1:1制作
韩国SKKU学位证,成均馆大学毕业证书1:1制作
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 

Creating Fixed-Layout EPUBs

Editor's Notes

  1. Print replica = absolute representation of the print page in an accessible digital format. Fixed-layout epub (FXL) is a print-replica format with live text. This is commonly achieved using xhtml with an image in the background and absolutely positioned text layered on top. It is possible to make image-only FXL but the lack of live text hinders accessibility and prohibits added functionality like media overlays.
  2. If you are choosing FXL because you want the page to look exactly like print, you might not be ready for digital, might not be serving your content.
  3. If I haven’t talked you out of this format yet, then I guess we can start to talk about how to build these kinds of ebooks.
  4. Comment about the book material that is on the editing room floor.
  5. Portrait, full-screen, using all the real estate it can, lots of type.
  6. Header Viewport Image with text laid on top One HTML file per page
  7. In Adobe’s FXL export, for example, 1inch = 72 pixels. Explain quick and dirty way of using Photoshop on a spread to calculate it.
  8. The top image is from the HTML, the bottom from the CSS.
  9. In the OPF Rendition:layout values can be reflowable or pre-paginated. If not specified, rendering engine assumes reflowable epub Rendition: spread values = auto, both, none Rendition: orientation = landscape, portrait, none Be sure that your choices here serve the content + platform.
  10. This skeuomorphism is unique to iBooks.
  11. Header in the OPF is, of course, different.
  12. When working on content where reflow is absolutely not okay, I put in soft line returns if they aren’t there already
  13. Delete that “break here” header from the HTML post-export.
  14. Some conversion houses prefer to work from Word files. TextWrangler is freeware from BareBones software. Putting each word on it’s own line = searching for a Word space and replacing it with a hard return. RegEx is your FXL best friend.
  15. Mind spaces/hyphens/odd characters in your naming conventions. Talk about the advantages of having one background image in behind the text.
  16. Talk about using a templated OPF and NCX and doing a simple find/replace for ISBN in XHTML file same. Don’t make typos in the metadata!
  17. Explain the percentages, how it is not in the iBooks Asset Guide but that it works everywhere.
  18. Font stack is cut off in screenshot from the CSS
  19. SVG doesn’t highlight in Kobo. Text on a straight line should not be SVG, should be rotated using code in the CSS.
  20. To create SVG: export ID to EPS, export EPS to SVG in Illustrator, open SVG in Dreamweaver, grab code from between &amp;lt;g&amp;gt; tags, insert into ebook.
  21. The rest is fiddling with the pixels.
  22. Google, iBooks iOS, iBooks Mavericks, Kobo iOS, Kobo Android, Readium
  23. Mind you don’t have any gaps in the audio; iBooks is forgiving but Kobo is not. **This is where I start to scare you.**
  24. In addition to listing the audio in the &amp;lt;manifest&amp;gt;.
  25. Customize colour, background, shadow
  26. Ambient controls go just inside the &amp;lt;body&amp;gt; tag, before the first &amp;lt;div&amp;gt;.
  27. New option to have “none” as the TOC style so, for example, iBooks will default to thumbnail navigation only. No way to opt out of CSS, only option is to add extra CSS.
  28. Threading is ignored b/c you can’t flow text from one HTML page to the next The width of each word is calculated; the next word starts after the word space. If the rendered word takes up less/more space, there will be overlaps or gaps. No horizontal/vertical scaling, beware of ligatures, no outline or other ID typography enhancements. Tracking will export. You will get a message on export telling you that those things won’t export.
  29. Vertical scaling was applied – because this doesn’t export, extremely funny spacing was the result.
  30. Swap out Postscript fonts before export or your layout will be a mess.
  31. Re-did the drawn lines to paragraph above and below rules to fix the problem. In the first sample, there is an outline on the box around the type, and drawn rules above and below “chapter”. Changing those to paragraph rules above and below solved that problem.
  32. Explain what’s going on in the code – inline styling, positioning.
  33. Talk about getting a hodge podge of file types – including from publishers with really poor layout habits – an how a multitide of sins can be forgiven in this FXL output. But a clean &amp;lt;nav&amp;gt; will only be created from a reasonably clearly structured document. And that it will make all the difference at the other end in your FXL epub.
  34. Hyperlinks out to a URL on an object is the only thing supported at this time.
  35. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).