HTML for ebooks question
Alex Bell
haven't been able to find another newsgroup that might fit better.
And forgive me also for the long introduction for those who are not
familiar with ebooks.
The background to my question is that the documents on which ebooks are
based are basically HTML. Mobipocket, (owned by Amazon) perhaps the most
common format, has its own limited and idiosyncratic rendering of HTML.
Amongst many other problems it does not recognise margin-left,
margin-right, or margin auto. ePub is probably the way of the future,
and has a much better rendering, and I would like the ebooks I prepare
to meet W3C standards.
The page at http://pianoboe.net/EbookTemplate.html is _not_ designed to
be a web page. It is the beginning of a template which I can use to
prepare ebooks in future.
If you look at the Contents part and the TOC div in the CSS you will see
my attempts to get the TOC centred on the page. Is there a more elegant
or more efficient way of doing it? Better still, is there a way of
achieving the same effect without arbitrarily setting the width to some
value like 50%? I want some way to make the div's width only the same as
it's content so that the table of contents material is centred. And it's
possible that there might be a long chapter heading which would take up
more than 50% of the page. I thought that {width: auto;} might work, but
it doesn't work on a browser so I haven't bothered trying it on my ebook
reader.
Finally, if this is not the newsgroup for this kind of question can
anyone point me please to a group or forum which discusses HTML for
ebooks? I haven't been able to find much through Google apart from the
MobileRead forums.
--
Regards, Alex
John Hosking
...
>
> The page at http://pianoboe.net/EbookTemplate.html is _not_ designed to
> be a web page. It is the beginning of a template which I can use to
> prepare ebooks in future.
>
> If you look at the Contents part and the TOC div in the CSS you will see
> my attempts to get the TOC centred on the page. Is there a more elegant
> or more efficient way of doing it? Better still, is there a way of
> achieving the same effect without arbitrarily setting the width to some
> value like 50%? I want some way to make the div's width only the same as
> it's content so that the table of contents material is centred. And it's
> possible that there might be a long chapter heading which would take up
> more than 50% of the page. I thought that {width: auto;} might work, but
> it doesn't work on a browser so I haven't bothered trying it on my ebook
> reader.
First, I'm going to pretend that I didn't see the line
<a name="TOC"></a> <!-- Anchors go before headings -->
in your TOC block. I don't understand its point, and this is obviously an
unfinished template page. I'll also pretend your actual TOC list items
contain links to the content below. (And since these *are* items in a list,
and not really paragraphs, why not use <ul> and <li> markup? [Possibly it's
because Jukka will suggest <ol> would be more appropriate and dorayme will
argue for using a table, but don't let /them/ scare you.])
Now (finally) to your actual question. Your approach looks good to me, and
yes, it's a bit of a pain in the neck. A table (even the non-semantic
one-celled variety) will tend to size itself to match your content. The
markup you've got, not so much.
But perhaps you'd be (somewhat) happier with something like width:20em;
instead of width:50%; on your div#TOC? That allows a certain adaptation
to font size, but you still have to know in advance that no chapter heading
is more than "a certain length" (about 18 uppercase-"M" characters long,
more characters will fit the narrower they are, assuming proportional
fonts). You can try different values for the width and see what you like.
IAC, my suggestion is a bit of a hack, and therefore unsatisfying, although
perhaps it's *less unsatisfying* than what you've got.
(Personally, BTW, I'd prefer to see a bit of padding on #TOC, esp. to the
left.)
How all this will work in an e-book reader I do not know. I also don't know
of a better place to look for help. Sorry.
HTH
--
John
John Hosking
> On Sat, 04 Jul 2009 08:04:21 GMT, Alex Bell wrote:
> ...
>>
>> The page at http://pianoboe.net/EbookTemplate.html ...
>
> First, I'm going to pretend that I didn't see the line
>
> <a name="TOC"></a> <!-- Anchors go before headings -->
>
> in your TOC block. I don't understand its point, and this is obviously an
> unfinished template page.
I looked at this some more. That is, I looked at the rest of the markup,
looking beyond just the TOC block. I think I now understand what you're
trying to do. But it seems the wrong ("unbest") way to do it. I see, e.g.,
<div class="section">
<a name="Chapter04"></a> <!-- Anchors go before headings -->
<h3>Chapter 4: Chapter title</h3>
<p>Lorem ipsum dolor sit amet, ....
If all you want is an anchor for some link (like in the TOC) in the form of
href="#Chapter04" to point to, you can get rid of the extra <a> and then
assign an id to one of the other elements, such as
<div class="section">
<h3 id="Chapter04">Chapter 4: Chapter title</h3>
<p>Lorem ipsum dolor sit amet, ....
or
<div class="section" id="Chapter04">
<h3>Chapter 4: Chapter title</h3>
<p>Lorem ipsum dolor sit amet, ....
But maybe you have to do some special contortions for e-books?
--
John
Or maybe you just think you have to?
dorayme
John Hosking <john...@bluemail.ch> wrote:
> On Sat, 04 Jul 2009 08:04:21 GMT, Alex Bell wrote:
> ...
> >
> > The page at http://pianoboe.net/EbookTemplate.html
> > If you look at the Contents part and the TOC div in the CSS you will see
> > my attempts to get the TOC centred on the page. Is there a more elegant
> > or more efficient way of doing it?
>
...
> ... width:20em;
> instead of width:50%; on your div#TOC? That allows a certain adaptation
> to font size, but you still have to know in advance that no chapter heading
> is more than "a certain length" (about 18 uppercase-"M" characters long,
> more characters will fit the narrower they are, assuming proportional
> fonts). You can try different values for the width and see what you like.
> IAC, my suggestion is a bit of a hack, and therefore unsatisfying, although
> perhaps it's *less unsatisfying* than what you've got.
>
> (Personally, BTW, I'd prefer to see a bit of padding on #TOC, esp. to the
> left.)
>
For sure, some padding (0.5em would be OK)! And 20em sounds very
reasonable for width. And the sky will not fall in if someone enlarges
the text, long entries will wrap.
Talking of not having to guess widths though... another shrink to fit
box, besides a table cell is a floated div. Now there is no float:
center but the thought of a float might jog OP into designing more for a
web page. Why waste all that precious top bit of the page with a couple
of words, and a small picture and all that spare white. There is a thing
called webpage sense, and the top of the given page kind of goes against
that sense if you know what I mean.
There are better design ideas. Want me to name some? Is OP willing to
redesign the top to a different plan? Perhaps he can already think of a
plan now that I mention it.
--
dorayme
Eric Lindsay
John Hosking <john...@bluemail.ch> wrote:
> But maybe you have to do some special contortions for e-books?
Maybe the various e-book platforms should just start using HTML and CSS
in full, and let established browser engines handle a fluid layout?
Instead of trying to force e-books into a halfway house between fixed
size paper and something that fits whichever weird display size you are
selling this year.
Alex Bell
Thanks to you all, but...
This is _not_ a webpage, and never will be. The document is only on my
server so people could see it. It is the very early stage of a template
for an ebook. Though ebooks are based on HTML the various formats all do
it differently - you think browser wars and proprietary website mark up
was bad? The situation with ebooks is far worse, with most manufacturers
having their own format which cannot be read by ebook readers made by
other manufacturers. Only when ePub becomes more popular will the
situation change, but I want to prepare for that happy day by using
valid markup.
The first part of the webpage would present as a title page when seen on
an ebook, and I think presents much the same as the title page of any
book. On my ebook reader that's all that the reader sees until clicking
to go to the next page - which in this case is the table of contents. I
don't agree that white space is wasted. My ebook reader has a screen
slightly smaller than the average paperback.
Ebooks do need some contortions which web pages do not. In particular
the name link _must_ go before a heading, or very often the Hn heading
tag is ignored if the link goes after the heading. I will try John's
idea, though I don't quite see how to get from the Table of Contents to
the chapter heading. I haven't put the hrefs on the TOC in yet, but they
will go in eventuality.
And I'll try putting in some padding and using width in ems.
Can I take it that there is no way of having the TOC div take its width
from its contents; that I must specify a fixed width of some size and
some units?
--
Regards, Alex
dorayme
Alex Bell <afj...@bigpond.net.au> wrote:
> dorayme wrote:
> > In article <7b8o9kF...@mid.individual.net>,
> > John Hosking <john...@bluemail.ch> wrote:
> >
> >> On Sat, 04 Jul 2009 08:04:21 GMT, Alex Bell wrote:
> >> ...
> >>> The page at http://pianoboe.net/EbookTemplate.html
...
> > Talking of not having to guess widths though... another shrink to fit
> > box, besides a table cell is a floated div. Now there is no float:
> > center but the thought of a float might jog OP into designing more for a
> > web page. Why waste all that precious top bit of the page with a couple
> > of words, and a small picture and all that spare white. There is a thing
> > called webpage sense, and the top of the given page kind of goes against
> > that sense if you know what I mean.
> >
> > There are better design ideas. Want me to name some? Is OP willing to
> > redesign the top to a different plan? Perhaps he can already think of a
> > plan now that I mention it.
> >
>
>
> This is _not_ a webpage, and never will be. The document is only on my
> server so people could see it. It is the very early stage of a template
> for an ebook. Though ebooks are based on HTML the various formats all do
> it differently - you think browser wars and proprietary website mark up
> was bad? The situation with ebooks is far worse, with most manufacturers
> having their own format which cannot be read by ebook readers made by
> other manufacturers. Only when ePub becomes more popular will the
> situation change, but I want to prepare for that happy day by using
> valid markup.
>
Fair enough, I was too hasty in saying about the top in your context,
too tempted by a more space saving idea that would allow a shrink to fit
float.
> The first part of the webpage would present as a title page when seen on
> an ebook, and I think presents much the same as the title page of any
> book. On my ebook reader that's all that the reader sees until clicking
> to go to the next page - which in this case is the table of contents. I
> don't agree that white space is wasted. My ebook reader has a screen
> slightly smaller than the average paperback.
>
I was was being too revisionist, you are right.
> Ebooks do need some contortions which web pages do not. In particular
> the name link _must_ go before a heading, or very often the Hn heading
> tag is ignored if the link goes after the heading. I will try John's
> idea, though I don't quite see how to get from the Table of Contents to
> the chapter heading. I haven't put the hrefs on the TOC in yet, but they
> will go in eventuality.
>
> And I'll try putting in some padding and using width in ems.
>
> Can I take it that there is no way of having the TOC div take its width
> from its contents; that I must specify a fixed width of some size and
> some units?
I do have a page that *might* help you a bit:
<http://netweaver.com.au/centring/page4.html>
--
dorayme
Alex Bell
ebook readers will choke on the margin: auto; bit.
--
Regards, Alex
John Hosking
> dorayme wrote:
>> In article <7b8o9kF...@mid.individual.net>, John Hosking wrote:
>>
>>> On Sat, 04 Jul 2009 08:04:21 GMT, Alex Bell wrote:
>>> ...
>>>> The page at http://pianoboe.net/EbookTemplate.html
>>>> If you look at the Contents part and the TOC div in the CSS you will see
>>>> my attempts to get the TOC centred on the page. Is there a more elegant
>>>> or more efficient way of doing it?
>> ...
>>> ... width:20em;
>>> instead of width:50%; on your div#TOC? That allows a certain adaptation
>>> to font size, but you still have to know in advance that no chapter heading
>>> is more than "a certain length" (about 18 uppercase-"M" characters long,
>>> more characters will fit the narrower they are, assuming proportional
>>> fonts). You can try different values for the width and see what you like.
>>> IAC, my suggestion is a bit of a hack, and therefore unsatisfying, although
>>> perhaps it's *less unsatisfying* than what you've got.
>>>
>>> (Personally, BTW, I'd prefer to see a bit of padding on #TOC, esp. to the
>>> left.)
>>>
>>
>> For sure, some padding (0.5em would be OK)! And 20em sounds very
>> reasonable for width. And the sky will not fall in if someone enlarges
>> the text, long entries will wrap.
>>
>> Talking of not having to guess widths though... another shrink to fit
>> box, besides a table cell is a floated div. Now there is no float:
>> center but the thought of a float might jog OP into designing more for a
>> web page. ...
>>
>
> Thanks to you all, but...
YVW. And thanks for bringing it up here, OT though it may be. I've never
tried authoring for an e-book, so without this thread I wouldn't know of
the limitations of the medium.
>
> This is _not_ a webpage, and never will be. The document is only on my
> server so people could see it. It is the very early stage of a template
> for an ebook. Though ebooks are based on HTML the various formats all do
> it differently [etc., trimmed here]
>
> The first part of the webpage would present as a title page when seen on
> an ebook, and I think presents much the same as the title page of any
> book. On my ebook reader that's all that the reader sees until clicking
> to go to the next page - which in this case is the table of contents. I
> don't agree that white space is wasted. My ebook reader has a screen
> slightly smaller than the average paperback.
Seems like a float:left, as long as it's supported at all, would be just
fine for your purposes. On a Web page, browsers will give a float
shrink-to-fit sizing, so maybe you can use it, too. (Although if you set
the width of #TOC to be the full size of the viewport, you can forget about
the need to center it; the user sees the entire gray box, and only the gray
box, with the chapter headings left-aligned within it. Right? I guess
probably not, or you wouldn't be asking the question.)
>
> Ebooks do need some contortions which web pages do not. In particular
> the name link _must_ go before a heading, or very often the Hn heading
> tag is ignored if the link goes after the heading. I will try John's
> idea, though I don't quite see how to get from the Table of Contents to
> the chapter heading. I haven't put the hrefs on the TOC in yet, but they
> will go in eventuality.
>
<div id="TOC">
<h3>Table of Contents</h3>
<p><a href="#preface">Preface or Foreword</a></p>
<p><a href="#Chapter01">Chapter 1: Chapter Title</p>
<p><a href="#Chapter02">Chapter 2: Chapter Title</a></p>
<p><a href="#Chapter03">Chapter 3: Chapter Title</a></p>
<p><a href="#Chapter04">Chapter 4: Chapter Title</a></p>
<p><a href="#preface">Colophon or Afterword</a></p>
</div>
<div class="section" id="preface">
<h3>Preface</h3>
<p>Preface text goes here – generally information about the
author and the book.
<p><a href="#TOC">Back to Contents</a></p>
</div> <!-- End of Preface div; page break in CSS -->
<div class="section" id="Chapter01">
<h3>Chapter 1: Chapter title</h3>
<p>Lorem ipsum dolor sit amet, ....
...interdum at, aliquam vel, felis.</p>
<p><a href="#TOC">Back to Contents</a></p>
and so on. (Again, for you to test in your own, special, e-book world of
bizarre mysteries. ;-) )
>
> Can I take it that there is no way of having the TOC div take its width
> from its contents; that I must specify a fixed width of some size and
> some units?
Floats, as mentioned by dorayme; tables, as mentioned by us both. Unless
e-book reader rebel against such alien concepts.
GL.
--
John
Alex Bell
recognise float at all.
And I really do want the TOC contents (Preface, Chapter 1...) to be
centred. Dorayme mentioned waste of white space; to me having the links
down the left margin and the rest of the page white space looks unbalanced.
definition of e.g. preface to set it up as having an id in the external
CSS file? Is there a name for this technique so I can look it up? I'm
certainly not an expert, but I don't remember it being described in any
of my reading.
>
>> Can I take it that there is no way of having the TOC div take its width
>> from its contents; that I must specify a fixed width of some size and
>> some units?
>
> Floats, as mentioned by dorayme; tables, as mentioned by us both. Unless
> e-book reader rebel against such alien concepts.
ePub yet. I'm researching display: table right now.
Oh, and I should have mentioned earlier that almost all ebook readers
give the user the ability to vary the size of the font. My Cybook Gen3
gives me the choice of 10 different sizes. This is of course another
reason for using em dimensions.
>
> GL.
>
--
Regards, Alex
John Hosking
> John Hosking wrote:
>>
>> <div id="TOC">
>> <h3>Table of Contents</h3>
>> <p><a href="#preface">Preface or Foreword</a></p>
>> <p><a href="#Chapter01">Chapter 1: Chapter Title</p>
>> <p><a href="#Chapter02">Chapter 2: Chapter Title</a></p>
>> <p><a href="#Chapter03">Chapter 3: Chapter Title</a></p>
>> <p><a href="#Chapter04">Chapter 4: Chapter Title</a></p>
>> <p><a href="#preface">Colophon or Afterword</a></p>
>> </div>
>>
>> <div class="section" id="preface">
>> <h3>Preface</h3>
>> <p>Preface text goes here – generally information about the
>> author and the book.
>> <p><a href="#TOC">Back to Contents</a></p>
>> </div> <!-- End of Preface div; page break in CSS -->
>>
>> <div class="section" id="Chapter01">
>> <h3>Chapter 1: Chapter title</h3>
>> <p>Lorem ipsum dolor sit amet, ....
>>
>> ...interdum at, aliquam vel, felis.</p>
>> <p><a href="#TOC">Back to Contents</a></p>
>>
>> and so on. ...
>>
> Now that looks good! I like it and will give it a try. Do I need some
> definition of e.g. preface to set it up as having an id in the external
> CSS file? Is there a name for this technique so I can look it up? I'm
> certainly not an expert, but I don't remember it being described in any
> of my reading.
No, the above is all (mere) HTML, with the (intrinsic) opportunity for you
to reference some elements for styling by, e.g., id selector
#preface { border:2px dashed cyan; }
by class selector
.section { color:yellow; background-color:black; }
or by type selector
div { font:100% "Times New Roman", serif; }
p { font-family: Arial, "Bell Sans", sans-serif; }
as well as other selectors. You don't *have* to use any of those selectors
at all, i.e., you don't need to mention them in your CSS; their presence in
the HTML is sufficient to *allow* you to style them if you so choose (and
CSS is on and available and compliant in the UA or e-book reader thingy).
Perhaps this link, which I often use and recommend, is of use to you, even
as an e-book author: <http://css.maxdesign.com.au/selectutorial/>. I'm not
sure what other special names you're looking for, beyond what's here in my
post and expanded upon in the selectors tutorial I linked to.
--
John
By the way, I am not really recommending using yellow text on a black BG.
In fact, I strongly recommend against it. The cyan border's goofy, too.
Alex Bell
I'm known for many things to many people, but technological competence
is not one them.
--
Regards, Alex