02-27-2011, 08:51 PM | #136 |
Wizard
Posts: 1,158
Karma: 32196
Join Date: Jan 2007
Location: Anchorage, AK
Device: Sony Reader PRS-505, PRS-650, PRS-T3, Pocketbook HD2
|
|
08-23-2011, 02:09 AM | #137 |
Junior Member
Posts: 6
Karma: 10
Join Date: Aug 2011
Device: iOs
|
CSS template for ePUB with InDesign CS5.5
It would be awesome if there was a starting template designed for creating an ePUB with InDesign CS5.5.
I've looked at the ePUB ZenGarden for ePUB which is cool but doesn't have a lot of the common features that many books might want - like wrapped images, drop caps, etc. I want my eBook to look great but I'm not a CSS wizard. Having a template for InDesign CS5.5 would be a great way to start eBook creation from scratch. I was hoping that I'd find something like a CSS template for ePUB in this thread but not so. Anyone have something like this, a starting template for ePUBs? Could be a basic CSS or InDesign CS5.5 file. |
08-23-2011, 04:25 AM | #138 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
You can easily create a template for your own with the code snippets in this thread. It is usually better to only put the styles in the stylesheet that you are using to prevent redundant coding.
You don't have to be a wizard, most stuff isn't really complex. At least basic CSS knowledge is invaluable if you are creating ePUBs. Personally I am not to crazy about the stylesheets ID generates. The examples I have seen here on the forum has a lot of redundant code. I think most stylesheets can be reduced to approx. 20% with no impacton the display of the text. |
08-24-2011, 12:07 AM | #139 | |
Junior Member
Posts: 6
Karma: 10
Join Date: Aug 2011
Device: iOs
|
CSS and/or ID template for EPUB creation
The majority of the code in this thread relates to drop caps. I'm looking for a starter template, one that contains the majority of styles that most users are going to require. I suggested a few of them already in my last post.
Of course we all want an uber-clean stylesheet...but we also want to get the job done quick. Having pre-determined styles, especially in a WYSIWYG tool like InDesign, that correctly display in the exported EPUB would be a huge time saver for me. Once I set the styles correctly in ID, I can go back and tweak the exported EPUB to my hearts content. The template is a starting block to save time. As I mentioned, the ePub Zen Garden begins this process by creating a blank template with pre-determined styles but is missing a number of the basic styles most designers would need. Anyone have such a template they would be willing to post? Quote:
|
|
08-24-2011, 03:56 AM | #140 |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
You can open any of the books I have uploaded and see the embedded styles, they are pretty much my "templates", although each book has its own little customizations. I don't use wrapped images, though, because I couldn't find a satisfactory solution that would work in all situations (big and small screens, landscape and portrait).
|
08-24-2011, 11:05 AM | #141 |
GuteBook/Mobi2IMP Creator
Posts: 2,958
Karma: 2530691
Join Date: Dec 2007
Location: Toronto, Canada
Device: REB1200 EBW1150 Device: T1 NSTG iLiad_v2 NC Device: Asus_TF Next1 WPDN
|
You can start off with the one Project Gutenberg used for one of their latest ebook offerings, Ulster Folklore by Elizabeth Andrews and modifiy to suit your generic needs. That html ebook can be found here.
( It's etext # 37187 for GuteBook users... ) By the way, below is just a listing of their <styles> section embedded in their .html, namely: Code:
<style type="text/css"> <!-- p { margin-top: .75em; text-align: justify; text-indent: 1.25em; margin-bottom: .75em; } body{margin-left: 10%; margin-right: 10%; } h1,h2,h3,h4,h5,h6 { text-align: center; /* all headings centered */ clear: both; margin: auto; } hr { width: 33%; margin-top: 2em; margin-bottom: 2em; margin-left: auto; margin-right: auto; clear: both; } table { margin-left: auto; margin-right: auto; } .pagenum { /* uncomment the next line for invisible page numbers */ position: absolute; right: 2%; font-size: 75%; color: gray; background-color: inherit; text-align: right; text-indent: 0em; font-style: normal; font-weight: normal; font-variant: normal;} /* Chapter Start */ .newpg {page-break-before: always;} .firstwords {font-variant:small-caps;font-size:1.2em;font-weight:bold;} .firstLetter{ display : block; float : left; margin-top : -0.17em; margin-left : -0.1em; margin-right : 0.4em; height : 2em; text-indent: 0em; } .firstLetter span{ font-size : 3.33em; /* use 3.33em for two lines */ line-height : 1em; } .firstLetter + span{ margin-left : -1.4em; } .chapsub { font-size:1.1em; font-weight:bold; text-align: center; font-variant: small-caps; text-indent:0em; margin-top:.35em; margin-bottom:.75em; margin-left: 5%; margin-right: 5%;} .center {text-align: center;text-indent:0em;} .smcap {font-variant: small-caps;} .caption { font-size: .7em; font-weight:bold; text-align: left; font-family: serif; text-indent:0em; margin-left:.8em; margin-bottom:.2em; } .captioncenter { font-size: .7em; font-weight: bold; text-align: center; font-family: serif; margin-top:.2em; text-indent:0em; margin-left:0em; } .captionimage { font-size: .9em; font-weight: bold; text-align: center; font-family: serif; margin-top:.3em; text-indent:0em; margin-left:0em; font-variant: small-caps; } /* Images */ .figcenter { margin: auto; text-align: center; } .alignright { float: right; padding-right: .4em; font-style:italic; } /* Footnotes */ .footnotes {border: dashed 1px;margin-top:2em;} .footnote {margin-left: 5%; margin-right: 5%; font-size: 0.9em; text-indent: 1.5em;} .fnanchor {vertical-align: super; font-size: .7em; text-decoration: none;} .fnanchorchap {vertical-align: super; font-size: .5em; text-decoration: none;} .label { font-size: 1em; font-weight: bold;} /* Poetry */ .poem { margin-left:15%; margin-right:15%; text-align: left; } .poem br {display: none;} .poem .stanza {margin: 1em 0em 1em 0em;} .poem span.i0 { font-size: .9em; display: block; margin-left: 2em; padding-left: 3em; text-indent: -3em; } .poem span.i0a { font-size: .9em; display: block; margin-left: 2em; padding-left: 2.65em; text-indent: -3.00em; } .poem span.i2 { font-size: .9em; display: block; margin-left: 3.25em; padding-left: 3em; text-indent: -3em; } .smaller {font-size:.7em;} .toctext {text-align: left;font-size:1em; display: block; padding-left: 1.8em; text-indent: -2.5em;margin-left:1em;} .linearound { border-width: 2px; border-style: solid; border-color: black; margin-left:10%;margin-right:10%; } .index { margin-top:.2em; margin-bottom:.2em; margin-right:15%; margin-left:15%; display: block; padding-left: 1.8em; text-indent: -1.8em; } .indexstart { margin-top:.2em; margin-bottom:.2em; padding-top:.9em; margin-right:15%; margin-left:15%; display: block; padding-left: 1.8em; text-indent: -1.8em; } --> </style> Last edited by nrapallo; 08-25-2011 at 09:13 AM. Reason: typo |
08-24-2011, 12:07 PM | #142 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
They sure give up a lot of screen space with left and right margins (20%, 30% on poetry). Perhaps they are targeting computers rather than portable devices.
|
08-24-2011, 12:28 PM | #143 | |
GuteBook/Mobi2IMP Creator
Posts: 2,958
Karma: 2530691
Join Date: Dec 2007
Location: Toronto, Canada
Device: REB1200 EBW1150 Device: T1 NSTG iLiad_v2 NC Device: Asus_TF Next1 WPDN
|
Quote:
... but seriously, they are still trying to reproduce the original book "page layout" without regards to smaller portable devices. My GuteBook pre/post processor eliminates a lot of these biases and substitutes my own as an ebook creator for portable devices... |
|
08-24-2011, 12:36 PM | #144 |
Resident Curmudgeon
Posts: 73,894
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
May as well delete that CSS from PG. It's awful. 10% margins? Who are they trying to fool? Even on a computer screen that's way too wide.
|
08-24-2011, 12:45 PM | #145 |
GuteBook/Mobi2IMP Creator
Posts: 2,958
Karma: 2530691
Join Date: Dec 2007
Location: Toronto, Canada
Device: REB1200 EBW1150 Device: T1 NSTG iLiad_v2 NC Device: Asus_TF Next1 WPDN
|
This is what I've replaced their CSS with after using GuteBook to create an epub ebook without wide margins, page numbers inserted into the text body, large pararagh/section breaks, etc... (Note: the code in Blue at the bottom was inserted by GuteBook to replace any previous style used by PG above it)
Code:
<style type="text/css">
<!--
p { margin-top: .75em;
text-align: justify;
text-indent: 1.25em;
margin-bottom: .75em;
}
body { margin-left: 1%; margin-right: 1%; text-align: justify; text-indent: 2em; }
h1,h2,h3,h4,h5,h6 {
text-align: center; /* all headings centered */
clear: both;
margin: auto;
}
hr { width: 33%;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
clear: both;
}
table {
margin-left: auto;
margin-right: auto;
}
.pagenum { /* uncomment the next line for invisible page numbers */
position: absolute; right: 2%;
font-size: 75%;
color: gray;
background-color: inherit;
text-align: right;
text-indent: 0em;
font-style: normal;
font-weight: normal;
font-variant: normal;}
/* Chapter Start */
.newpg {page-break-before: always;}
.firstwords {font-variant:small-caps;font-size:1.2em;font-weight:bold;}
.firstLetter{
display : block;
float : left;
margin-top : -0.17em;
margin-left : -0.1em;
margin-right : 0.4em;
height : 2em;
text-indent: 0em;
}
.firstLetter span{
font-size : 3.33em; /* use 3.33em for two lines */
line-height : 1em;
}
.firstLetter + span{
margin-left : -1.4em;
}
.chapsub {
font-size:1.1em;
font-weight:bold;
text-align: center;
font-variant: small-caps;
text-indent:0em;
margin-top:.35em;
margin-bottom:.75em;
margin-left: 5%;
margin-right: 5%;}
.center {text-align: center;text-indent:0em;}
.smcap {font-variant: small-caps;}
.caption {
font-size: .7em;
font-weight:bold;
text-align: left;
font-family: serif;
text-indent:0em;
margin-left:.8em;
margin-bottom:.2em;
}
.captioncenter {
font-size: .7em;
font-weight: bold;
text-align: center;
font-family: serif;
margin-top:.2em;
text-indent:0em;
margin-left:0em;
}
.captionimage {
font-size: .9em;
font-weight: bold;
text-align: center;
font-family: serif;
margin-top:.3em;
text-indent:0em;
margin-left:0em;
font-variant: small-caps;
}
/* Images */
.figcenter {
margin: auto;
text-align: center;
}
.alignright {
float: right;
padding-right: .4em;
font-style:italic;
}
/* Footnotes */
.footnotes {border: dashed 1px;margin-top:2em;}
.footnote {margin-left: 5%; margin-right: 5%; font-size: 0.9em; text-indent: 1.5em;}
.fnanchor {vertical-align: super; font-size: .7em; text-decoration: none;}
.fnanchorchap {vertical-align: super; font-size: .5em; text-decoration: none;}
.label { font-size: 1em; font-weight: bold;}
/* Poetry */
.poem {
margin-left:15%;
margin-right:15%;
text-align: left;
}
.poem br {display: none;}
.poem .stanza {margin: 1em 0em 1em 0em;}
.poem span.i0 {
font-size: .9em;
display: block;
margin-left: 2em;
padding-left: 3em;
text-indent: -3em;
}
.poem span.i0a {
font-size: .9em;
display: block;
margin-left: 2em;
padding-left: 2.65em;
text-indent: -3.00em;
}
.poem span.i2 {
font-size: .9em;
display: block;
margin-left: 3.25em;
padding-left: 3em;
text-indent: -3em;
}
.smaller {font-size:.7em;}
.toctext {text-align: left;font-size:1em; display: block; padding-left: 1.8em; text-indent: -2.5em;margin-left:1em;}
.linearound {
border-width: 2px;
border-style: solid; border-color: black; margin-left:10%;margin-right:10%;
}
.index {
margin-top:.2em;
margin-bottom:.2em;
margin-right:15%;
margin-left:15%;
display: block;
padding-left: 1.8em;
text-indent: -1.8em;
}
.indexstart {
margin-top:.2em;
margin-bottom:.2em;
padding-top:.9em;
margin-right:15%;
margin-left:15%;
display: block;
padding-left: 1.8em;
text-indent: -1.8em;
}
-->
h1, h2, h3, h4, h5, h6 {text-align: center }
h2 { page-break-before: always; }
p {text-indent: 2em; margin-top: 0em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em}
br {margin-top: 0em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em}
</style>
|
08-24-2011, 12:48 PM | #146 |
Resident Curmudgeon
Posts: 73,894
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
.poem has 15% margins? That CSS still needs a lot of work.
|
08-25-2011, 04:18 AM | #147 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
08-25-2011, 11:16 AM | #148 |
GuteBook/Mobi2IMP Creator
Posts: 2,958
Karma: 2530691
Join Date: Dec 2007
Location: Toronto, Canada
Device: REB1200 EBW1150 Device: T1 NSTG iLiad_v2 NC Device: Asus_TF Next1 WPDN
|
While far from perfect, it can provide some useful formatting, if you fix/correct the large margins.
I uploaded here my epub version of that PG html ebook Ulster Folklore by Elizabeth Andrews. As a result, as you can see, it can be made to look very nice (with minor CSS edits) even on portable devices... |
09-02-2011, 01:53 PM | #149 |
Groupie
Posts: 183
Karma: 266070
Join Date: Dec 2010
Device: Win7,Win10,Lubuntu,smartphone
|
A comment:
with that kind of style-sheet (yes, I also convert from PG quite a lot) I cannot get the small-caps to show (desktop; XP; Calibre viewer) unless I add font-family: serif; to the declaration -- I used to need font-family: verdana, serif; until I updated to the "calibri, etc. pack". Of course, I am using "default system fonts", and usually disable any others -- liking clear-type. This is intended as a warning/request for information: is that a general issue ... ? Of course, there are specific small-caps fonts, or font families with the variant included (I have found quite a few as freebies) -- but I should say many people, like myself, would rather stick to system defaults. |
09-02-2011, 06:06 PM | #150 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
There is an issue with small caps. They are usually not supported in the readers, but they should. Currently your only real method is to include a small caps font.
Another method is the fake the smallcaps by reducing the size of capitals. However, that is not the same. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
direkter Umlaut oder lieber HTML Code in Epub ? | NASCARaddicted | Erste Hilfe | 14 | 06-16-2011 05:54 AM |
Programming language code snippets in ebooks? | Connochaetes | Writers' Corner | 7 | 10-18-2010 02:43 PM |
ebook-convert HTML to EPUB and problem with <pre><code> | mikegr | Calibre | 2 | 03-09-2010 02:27 PM |
css override code for margins? | Amalthia | Calibre | 15 | 08-11-2009 07:20 PM |
Problems generating ePub from HTML/CSS | AlexBell | Calibre | 3 | 07-17-2009 05:10 AM |