Mobileread
Have chapter title & image take up 50% of page height and resize img automatically?
#1  dibster 11-28-2020, 08:13 PM
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!
Reply 

#2  fbrzvnrnd 11-29-2020, 12:55 AM
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.
Reply 

#3  Jellby 11-29-2020, 03:08 AM
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.)
Reply 

#4  JSWolf 11-29-2020, 06:19 AM
Quote Jellby
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.
Reply 

#5  Hitch 11-30-2020, 10:10 AM
Quote Jellby
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
Reply 

#6  Jellby 11-30-2020, 12:49 PM
Quote Hitch
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.
Reply 

#7  Hitch 11-30-2020, 04:24 PM
Quote Jellby
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
Reply 

#8  fbrzvnrnd 11-30-2020, 04:32 PM
Quote Jellby
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?
Reply 

#9  JSWolf 11-30-2020, 04:51 PM
Quote fbrzvnrnd
Maybe it is easier in javascript?
And it will then 100% fail on a lot of reading software.
Reply 

#10  fbrzvnrnd 11-30-2020, 05:02 PM
Quote JSWolf
And it will then 100% fail on a lot of reading software.
do not remind me!
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register