Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 11-28-2020, 08:13 PM   #1
dibster
Junior Member
dibster began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Jun 2019
Device: Kobo Clara HD
Have chapter title & image take up 50% of page height and resize img automatically?

I'm trying to set up an ebook to be formatted like this:
Quote:
CHAPTER ONE
(Image)
CHAPTER TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at turpis eu purus pretium tempus. Sed cursus, orci sit amet vehicula rhoncus, massa orci lacinia magna, vel efficitur purus lacus ac lorem. Pellentesque vulputate semper justo, ut tempor magna maximus a. Pellentesque vulputate arcu lorem, in sollicitudin justo euismod ut. Etiam volutpat luctus ante, vel mollis libero faucibus sed. Integer ut tellus vitae nisl venenatis fringilla.
I'm trying to have the very first line of body text start at 50% height of the page of the ebook, no matter the screen size, keep the text size of the chapter headings the same, but resize the image automatically so that the entire heading section takes up exactly half the vertical height of the page. I want to do this so that I can use higher-res images for the book and have it display at a proper size no matter what pixel density the screen has, and not have to customize the sizes for every single chapter (some chapters have longer titles which push the first paragraph lower, and/or the images have different dimensions).

So far, this is the closest I've gotten:
Code:
  <div class="center" style="height:50%">

    <h4>CHAPTER ONE</h4>

    <div>

      <img src="images/Ch1.jpg" style="height:100%;"/>

    </div>

    <h2 style="margin-bottom:3em">CHAPTER TITLE</h2>

  </div>

<p>Lorem ipsum dolor sit amet...</p>
This has worked to get the first paragraph to be positioned correctly. Unfortunately though, it sizes the image to be 50% of the page height, not taking into account the text above and below it, causing it to overflow out of the div and overlap with the paragraph below. Adjusting the image height percentage kind of helps, but can still overflow when the page is resized, and it would have to be done manually for each chapter.

Basically, I want the chapter title (plus the 3em margin/padding) to always align to the bottom of the first 50% of the page no matter how long the title is without overflowing below, and I want the image to resize to fill the remaining space, constraining everything into the first div of 50% height.

Is this even possible? I've tried formatting it as a 3-row table as well but couldn't quite get that to work either. Any ideas would be appreciated! I know I'm probably making it more complicated that I need to, and I can format it in alternative ways if need be, but if it's at all possible to do it this way, that would be preferred. Thanks!
dibster is offline   Reply With Quote
Old 11-29-2020, 12:55 AM   #2
fbrzvnrnd
Fanatic
fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.
 
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
You can try some tricks with table and svg, maybe, but the real answer is: I think you can't. The virtual pages of an ebook are not "inside" the DOM, there are no way to handle the "virtual" page in CSS or Javascript except the @paged_media and little else. It is an original sin of ebooks format: we work with tools born for other media (scrolling pages) and poor support for paged items.
Maybe someone have some tricks for you.
fbrzvnrnd is offline   Reply With Quote
Advert
Old 11-29-2020, 03:08 AM   #3
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
With CSS3 tools like grid and vh you can get that in a web browser. But those are not required in ePub2, and even ePub3 readers will most likely not support them properly or at all.

Code:
<div style="text-align: center; display: grid; grid-template: 'label' min-content 'image' minmax(0,max-content) 'title' min-content / 100%; height: 50vh; margin: 0;">

  <h4 style="grid-area: label;">CHAPTER ONE</h4>

  <div style="grid-area: image;">

    <img src="Ch1.jpg" alt="" style="height: 100%;"/>

  </div>

  <h2 style="margin-bottom: 3em; grid-ara: title;">CHAPTER TITLE</h2>

</div>
(Nitpick: Don't use <h4>/<h2> for purely visual styling. If there are no headings higher than chapter, chapters should be <h1> [ok, or <h2> according to some], and styling inside should be done with span/div/class, as in:

Code:
<h1>
<div class="label">CHAPTER ONE</div>
<img src="..." alt="..."/>
CHAPTER TITLE
</h1>
and yes, you need an "alt" attribute, which may be empty or not.)

Last edited by Jellby; 12-01-2020 at 03:26 AM.
Jellby is offline   Reply With Quote
Old 11-29-2020, 06:19 AM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,654
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Jellby View Post
With CSS3 tools like grid and vh you can get that in a web browser. But those are not required in ePub2, and even ePub3 readers will most likely not supported them properly or at all.

Code:
<div style="text-align: center; display: grid; grid-template: 'label' min-content 'image' minmax(0,max-content) 'title' min-content / 100%; height: 50vh; margin: 0;">

  <h4 style="grid-area: label;">CHAPTER ONE</h4>

  <div style="grid-area: image;">

    <img src="Ch1.jpg" alt="" style="height: 100%;"/>

  </div>

  <h2 style="margin-bottom: 3em; grid-ara: title;">CHAPTER TITLE</h2>

</div>
(Nitpick: Don't use <h4>/<h2> for purely visual styling. If there are no headings higher than chapter, chapters should be <h1> [ok, or <h2> according to some], and styling inside should be done with span/div/class, as in:

Code:
<h1>
<div class="label">CHAPTER ONE</div>
<img src="..." alt="..."/>
CHAPTER TITLE
</h1>
and yes, you need an "alt" attribute, which may be empty or not.)
A lot of people will disagree with your h1 code.

Code:
<h1>CHAPTER ONE</h1>
<div class="center"><img src="..." alt="..."/></div>
<h2>CHAPTER TITLE</h2>
And of course style h1, .center, and h2 appropriately.
JSWolf is online now   Reply With Quote
Old 11-30-2020, 10:10 AM   #5
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by Jellby View Post
With CSS3 tools like grid and vh you can get that in a web browser. But those are not required in ePub2, and even ePub3 readers will most likely not supported them properly or at all.

Code:
<div style="text-align: center; display: grid; grid-template: 'label' min-content 'image' minmax(0,max-content) 'title' min-content / 100%; height: 50vh; margin: 0;">

  <h4 style="grid-area: label;">CHAPTER ONE</h4>

  <div style="grid-area: image;">

    <img src="Ch1.jpg" alt="" style="height: 100%;"/>

  </div>

  <h2 style="margin-bottom: 3em; grid-ara: title;">CHAPTER TITLE</h2>

</div>
(Nitpick: Don't use <h4>/<h2> for purely visual styling. If there are no headings higher than chapter, chapters should be <h1> [ok, or <h2> according to some], and styling inside should be done with span/div/class, as in:

Code:
<h1>
<div class="label">CHAPTER ONE</div>
<img src="..." alt="..."/>
CHAPTER TITLE
</h1>
and yes, you need an "alt" attribute, which may be empty or not.)
I don't see how this can work, realistically, in 99% of all eReaders. You have a scenario in which you want the later element, the body text, to be determined FIRST and then the heading element, with the contained image element, determined SECOND, based upon the rendering of the first. I don't see that working worth a damn, surely not on Kindle (MOBI or ePUB), B&N's Nook devices (via ADE), or KoboBooks' devices.

Something like that might and I emphasize, MIGHT, work on a browser-based reader, something like Readium, but for regular, everyday eReaders? Not a chance.

(This comment is directed to the thread-submitter, not to my buddy Jellby! His markup is super for browsers.)


Hitch
Hitch is offline   Reply With Quote
Advert
Old 11-30-2020, 12:49 PM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Hitch View Post
You have a scenario in which you want the later element, the body text, to be determined FIRST and then the heading element, with the contained image element, determined SECOND, based upon the rendering of the first.
Actually, the problem is not so much the interplay between heading and text, which can be done with a simple "height: 50vh" (if the reader supports vh, which only refers to the "page size", whatever that is). The main problem I see is that the size of the image must be determined after everything else in the heading is known. It might be possible to do with tables, but I wouldn't think it a good idea anyway.
Jellby is offline   Reply With Quote
Old 11-30-2020, 04:24 PM   #7
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by Jellby View Post
Actually, the problem is not so much the interplay between heading and text, which can be done with a simple "height: 50vh" (if the reader supports vh, which only refers to the "page size", whatever that is). The main problem I see is that the size of the image must be determined after everything else in the heading is known. It might be possible to do with tables, but I wouldn't think it a good idea anyway.
Yes, I concur with your analysis, but I do feel compelled to add, vh is supported like...nowhere. Not in real devices, I mean and how the bloody hell would you even get that right, anyway? (I'm not arguing, I'm thinking aloud.)

I guess you could write a boatload of media queries..(she thinks somewhat furiously)...for...what, display size? And then do the @ this and @That and make it come out KINDA the right size.

And yes, the problem with calculating X after Y is what I meant. You can't do the image unless/until the heading size is known and you can't know that unless/until the body is known, right? Or did I miss something?

Hitch
Hitch is offline   Reply With Quote
Old 11-30-2020, 04:32 PM   #8
fbrzvnrnd
Fanatic
fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.
 
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
Quote:
Originally Posted by Jellby View Post
Actually, the problem is not so much the interplay between heading and text, which can be done with a simple "height: 50vh" (if the reader supports vh, which only refers to the "page size", whatever that is). The main problem I see is that the size of the image must be determined after everything else in the heading is known. It might be possible to do with tables, but I wouldn't think it a good idea anyway.
Maybe it is easier in javascript?
fbrzvnrnd is offline   Reply With Quote
Old 11-30-2020, 04:51 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,654
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by fbrzvnrnd View Post
Maybe it is easier in javascript?
And it will then 100% fail on a lot of reading software.
JSWolf is online now   Reply With Quote
Old 11-30-2020, 05:02 PM   #10
fbrzvnrnd
Fanatic
fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.fbrzvnrnd ought to be getting tired of karma fortunes by now.
 
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
Quote:
Originally Posted by JSWolf View Post
And it will then 100% fail on a lot of reading software.
do not remind me!
fbrzvnrnd is offline   Reply With Quote
Old 11-30-2020, 06:36 PM   #11
dibster
Junior Member
dibster began at the beginning.
 
Posts: 9
Karma: 10
Join Date: Jun 2019
Device: Kobo Clara HD
Yeah, I kinda figured it wouldn't work, but thanks for all the feedback! I will just format it a different way.
dibster is offline   Reply With Quote
Old 12-01-2020, 12:46 PM   #12
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,069
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
Quote:
Originally Posted by Jellby View Post
With CSS3 tools like grid and vh you can get that in a web browser. But those are not required in ePub2, and even ePub3 readers will most likely not support them properly or at all.

...


(Nitpick: Don't use <h4>/<h2> for purely visual styling. If there are no headings higher than chapter, chapters should be <h1> [ok, or <h2> according to some], and styling inside should be done with span/div/class, as in:

...

That's Awesome! I think my Christmas project is going to be (finally) learning/transitioning to ePub3.... then I can play with these new capabilities...



For the OP -

I agree with the idea NOT to use <h> tags simply to format the style. <h> tags are used to mark your text with the correct semantics. There are multiple discussions about that here on these boards, so I won't bore you with that here. However, you might try something along these lines to simplify the chapter heading. All the styling can easily be done in the CSS file, which keeps the html file itself very clean. Of course, the css itself is just an example, you can change that however you wish - the idea is that you do the styling in the CSS file, not the html file.


Code:
  /* however you want to format... */ 
h3      {text-align:center; font-weight:bold; font-size:.8em; margin:0 0 3em}
h3 img  {display:block; margin:.5em auto; width:35%; max-width:600px}
h3 span {display:block; font-size:1.4em}
p.first {text-indent:0}
 
<h3>CHAPTER ONE <img src="..." alt=""/> <span>CHAPTER TITLE</span></h3>
<p class="first">Lorem ipsum dolor sit amet...</p>
Turtle91 is offline   Reply With Quote
Old 12-01-2020, 12:57 PM   #13
hobnail
Running with scissors
hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.hobnail ought to be getting tired of karma fortunes by now.
 
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
Quote:
Originally Posted by Turtle91 View Post
... hN span {display:block; ...
I've been using this ever since I saw your post about it some time ago and I love it. Such a great trick and no more futzing around with multiple h tags when a book has a chapter number and a chapter title.
hobnail is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Automatically Change Title & Author Metadata from ISBN? Soonerlater Library Management 3 05-08-2020 05:59 PM
Possible bug I noticed if a chapter has a title page on a separate text file dibster Kobo Reader 6 07-05-2019 10:00 AM
centered title page and chapter numbers display left in epub JohnMurphy99 Introduce Yourself 1 06-04-2017 06:33 AM
Images im front of Chapter title get moved to a new page JSWolf Conversion 2 08-03-2012 09:49 PM
WIDTH and HEIGHT in <img> tags Pablo Sigil 3 06-10-2010 05:37 PM


All times are GMT -4. The time now is 01:18 PM.


MobileRead.com is a privately owned, operated and funded community.