|
|
Thread Tools | Search this Thread |
11-28-2020, 08:13 PM | #1 | |
Junior Member
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:
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> 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! |
|
11-29-2020, 12:55 AM | #2 |
Fanatic
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. |
11-29-2020, 03:08 AM | #3 |
frumious Bandersnatch
Posts: 7,516
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> Code:
<h1> <div class="label">CHAPTER ONE</div> <img src="..." alt="..."/> CHAPTER TITLE </h1> Last edited by Jellby; 12-01-2020 at 03:26 AM. |
11-29-2020, 06:19 AM | #4 | |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Code:
<h1>CHAPTER ONE</h1> <div class="center"><img src="..." alt="..."/></div> <h2>CHAPTER TITLE</h2> |
|
11-30-2020, 10:10 AM | #5 | |
Bookmaker & Cat Slave
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
11-30-2020, 12:49 PM | #6 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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.
|
11-30-2020, 04:24 PM | #7 | |
Bookmaker & Cat Slave
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
11-30-2020, 04:32 PM | #8 | |
Fanatic
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
|
Quote:
|
|
11-30-2020, 04:51 PM | #9 |
Resident Curmudgeon
Posts: 73,983
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
11-30-2020, 05:02 PM | #10 |
Fanatic
Posts: 554
Karma: 400004
Join Date: Feb 2009
Device: ONYX M96
|
|
11-30-2020, 06:36 PM | #11 |
Junior Member
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.
|
12-01-2020, 12:46 PM | #12 | |
A Hairy Wizard
Posts: 3,095
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:
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> |
|
12-01-2020, 12:57 PM | #13 |
Running with scissors
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
|
|
|
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 |