epub code snippets (html / css)

[JSWolf]

Originally Posted by charleski

Well, a lot of publishers use the page-template badly, putting margins in it that should be specified in the css. In fact it seems a lot of them just paste in a single page-template file that they've found somewhere in the mistaken belief that it makes their output look more professional, but that's a symptom of the poor level of coding skills prevalent in the industry.

Used properly, the page-template extension offers a reasonable amount of extra functionality. It's non-standard, but we're already seeing people playing around with webkit-specific css3 elements to get nice effects on the iPad, so the epub standard is in danger of losing relevance.

Yes, the page-template is used by publishers to specify page margins. They don't use it for anything that you cannot do in CSS. I prefer my ePub to have no margins. That's my personal choice. But what I have to do to achieve that is to delete the page-template, edit the OPF to remove it, and then edit ever XML file to remove the page-template from there. Granted, doing the XML removing is easy with Notepad++ as it allows me to load all the files I want and then do a search/replace on all of them at once. Also, I then have to edit the CSS (would have to do anyway). And finally, I have to delete the page-template from the ePub itself. So that's three extra steps I have to take just to be able to edit the margins via the CSS because of this rather useless page-template.

I've not seen any use of page-template (yet) that could not be done in CSS.

[Jellby]

Originally Posted by JSWolf

But what I have to do to achieve that is to delete the page-template, edit the OPF to remove it, and then edit ever XML file to remove the page-template from there. Granted, doing the XML removing is easy with Notepad++ as it allows me to load all the files I want and then do a search/replace on all of them at once. Also, I then have to edit the CSS (would have to do anyway). And finally, I have to delete the page-template from the ePub itself.

You already "delete the page-template" as the first step

Wouldn't it just be easier to edit the page-template to make it "empty"? That way you don't need to remove every reference to it. I don't know if a truly empty file would work, but something like this probably would:

<ade:template xmlns="http://www.w3.org/1999/xhtml" xmlns:ade="http://ns.adobe.com/2006/ade" xmlns:fo="http://www.w3.org/1999/XSL/Format">

</ade:template>

I've not seen any use of page-template (yet) that could not be done in CSS.

In post #60 I showed something. It's not really a page-template, but conditional styling, but it still uses the same file. I've used it to hide "oeb-page-head" elements from ADE, which otherwise puts them in the main text flow...

[HamsterRage]

I won't claim to have thought this up myself. It draws a nice box around the header, with a big number and a subtitle for the chapter:

.chapterHeader {
  height:60px;
  border:1px solid #000;
  display:block;
  margin-bottom:20px;
  background-color:#FFF;}
  
.chapterHeader .translation {
  float:left;
  font-weight: normal;
  margin-top:38px;
  margin-left: -8px;
  margin-bottom: 0px;
  padding-right: 16px;
  padding-left: 5px ;
  padding-bottom: 0px;
  padding-top: 0px;
  font-size:26px;
  background-color:#FFF;}
                             
.chapterHeader .count {
  line-height: 100%;
  font-style:normal;
  font-weight: normal;
  text-transform:uppercase;
  font-size:94px;
  margin-right:18px;
  margin-top:-14px;
  margin-bottom: -20px;
  float:left;
  padding:0px;
  background-color:#FFF;}

And here's the the markup for the header itself:

  <div class="body chapter" id="chapter">
    <h2 id="heading_id_2"><span class="chapterHeader"><span class="translation">Chapter</span> <span class="count">1</span></span> Chapter Subtitle</h2>

[Chang]

Hey! It's me again.. This time problems with centering a table. How can I center my table easily and simply? I tried using:

table.center {
        margin-left:auto; 
        margin-right:auto;
}

It works fine e.g. in Firefox but not in ADE. Is there simple and easy way to center a small table? I don't want to use width: 100% for the table because it's a small one.

[GeoffC]

could be epubs are not designed for tables ....

[Jellby]

That's the way, but ADE just doesn't support "auto" margins

[nrapallo]

Originally Posted by GeoffC

could be epubs are not designed for tables ....

It's centering that is not supported by ADE for tables nor images...

How this "bug" can persist is beyond comprehension!

[EricDP]

Originally Posted by nrapallo

How this "bug" can persist is beyond comprehension!

Unfortunately, the standard allows this behaviour, which is one of the differences between OPS and XHTML/CSS. The standard reads "Reading Systems may set the value of any margin property whose specified value is auto to 0." See footnote 1 in section 3.3.

You can get around it by putting your content inside a table block that has been centred. See this thread for some work-arounds.

[Peter Sorotokin]

Originally Posted by nrapallo

How this "bug" can persist is beyond comprehension!

You may want to check if EPUB spec requires margin:auto support.

[Peter Sorotokin]

Originally Posted by JSWolf

Yes, the page-template is used by publishers to specify page margins. They don't use it for anything that you cannot do in CSS.

It is certainly not a good idea to use page template just for margins. These should be specified using regular margins on body and @page rule.

[EricDP]

Originally Posted by Peter Sorotokin

It is certainly not a good idea to use page template just for margins. These should be specified using regular margins on body and @page rule.

I agree, but it seems to be standard practice. At least half of the books I've purchased have done this, and with huge margins, too. The first thing I do with these books is strip the DRM and delete the page template. Then I add an @page entry into the stylesheet with the top/bottom margins, and I create a default body style with left/right margins and text-justify. Suddenly the book is readable!

Why can't publishers realize that their trade-paperback edition and hardcover edition margins just don't work on a 6" screen? Doesn't anybody proof these books on an actual reading device?

[nrapallo]

Originally Posted by nrapallo

It's centering that is not supported by ADE for tables nor images...

Originally Posted by Peter Sorotokin

You may want to check if EPUB spec requires margin:auto support.

I'm aware that margin:auto can allow rendering systems to use margin:0, but that's not what I was complaining about; I was specifically referring to the "centering" bug whereby tables are not allowed to be centered (and images are not easily allowed to be centered).

Centering simple tables (like the TOC in many Project Gutenberg books) should be provided for, and I know workarounds can be used to properly center images, while centering headings using <h1> and similar constructs has always worked like a charm!

When the device's width is known, then centering should just be an algebraic exercise when you know the "extent" (max.) width of the table and/or image. Though I can understand that tables can be arbitrarily complex and not yield it's extent width easily, simple tables should be rendered centered if so specified...

[EricDP]

Tables can be centered, you just need to make them 'inline'. Make a div with 'text-align: center'. Make your table 'display: inline-table' and it will be centered as if it were text. The only problem is, as an inline element, it can't break across pages - the entire table is treated as a single character of text.

[nrapallo]

Originally Posted by EricDP

Tables can be centered, you just need to make them 'inline'. Make a div with 'text-align: center'. Make your table 'display: inline-table' and it will be centered as if it were text. The only problem is, as an inline element, it can't break across pages - the entire table is treated as a single character of text.

That's good to know!!! It is the same answer given in another thread where I struggled with the centering of tables called eBooks of chess problems. Center table bug?

It seems I remember this problem quite distinctly, but somehow forgot it's solution, i.e. 'display: inline-table'

[nrapallo]

Originally Posted by EricDP

The only problem is, as an inline element, it can't break across pages - the entire table is treated as a single character of text.

...it can't break across pages...

Oh, that's a big problem with lengthy TOC or List of Illustrations found in some PG ebooks, like Etext #28700 that I have uploaded before to my GuteBook thread. I re-generated the .epub version and attached it below, this time inserting your suggested code, namely:

table {
    display: inline-table;
} /* work around for ADE centering with CSS problem */

You have to make the text very small to be able to see the entire Contents or Illustrations page at the beginning of the ebook. But at least it's centered!

Any better solutions...