![]() |
#1 |
Addict
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 326
Karma: 56788
Join Date: Jun 2011
Device: Kindle
|
How to make adaptive custom scene breaks
If I have a custom scene break that's image based —eg. a fleur de lis or some other custom image that's a jpg or png file) is there a way for me to format it, or convert it to a different file type so that if a reader changes the books background or font color in the e-reader, the scene break will adjust accordingly?
Right now, for example, if the reader were to change the book to dark mode (i.e. black/dark background; white text), the scene break image would: in the case of the jpg file, remain a black fleur de lis, inside a box with a white background. or, in the case, of a png file, remain a black fleur de list, inside a box with a transparent background, effectively rendering the scene break image invisible (black text on a black/dark background). Is there any way to make the custom scene break adaptive? |
![]() |
![]() |
![]() |
#2 |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 42,433
Karma: 162918680
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
In theory, you could use the media query prefers-color-scheme but that does not work with any ereader devices that I've tried it with.
See prefers-color-scheme for more information. |
![]() |
![]() |
![]() |
#3 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,541
Karma: 19001081
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Use a font instead of an image. There are (lots of) fonts with (lots of) ornaments. If you're very picky about which particular image to use, I think there are tools that can convert an image into a font. You'll probably be limited to monochrome, no partial opacity images.
Or if you use an SVG image, I believe you can leave one of the colors unspecified and it will use the current text color. However, I'm not sure if this is actually part of the spec, or if it's easily done with any image editor software (SVG files are text, you could always edit the text), or if ebook readers will actually support it. |
![]() |
![]() |
![]() |
#4 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 77,819
Karma: 142032074
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
#5 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,614
Karma: 8399999
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Under epub3, you can do what you posted with javascript.
|
![]() |
![]() |
![]() |
#6 | ||
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,254
Karma: 20040707
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Oooooh - that sounds exciting!! Can you point to a how-to or something?? Edit: I found this Quote:
Last edited by Turtle91; 11-23-2024 at 10:35 AM. |
||
![]() |
![]() |
![]() |
#7 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,541
Karma: 19001081
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
It would behave like any other font. Same as a fancy font for titles or handwritten texts or whatever. It's up to you (and the software) to set up the styles such that the color changes (or not) when choosing dark/night mode...
|
![]() |
![]() |
![]() |
#8 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,254
Karma: 20040707
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Hi all!
After playing around a bit I thought I'd post my results in case anyone else was interested. I built this using ePub2. If you are creating an ePub3 only book then you could possibly use javascript. The device/app would also need to support some specific css...so, definitely test on your device... Using fill:currentcolor and stroke:currentcolor in your css works but only under certain circumstances. In an ePub you could embed the svg code directly in the html page: Code:
svg path, svg stroke {fill:currentcolor; stroke:currentcolor} <p>yadda yadda</p> <svg><g><path d="......"/></g></svg> <p>yadda yadda</p> After practicing a bit more google-fu I found that you could use image masks in your css and simply set the backgound-color to currentcolor. Image masks are almost universally supported in browsers (except IE...go figure...), so there is a decent chance they will work on your device/app as well! The downside is that you are limited to fairly simple, monochrome style, images...but since these are used for scene breaks, and we're mostly worried about a dark image on a dark background, that's not too bad. Code:
hr {border:none; margin:1.5em auto; text-align:center; overflow: hidden; page-break-inside: avoid; break-inside: avoid} //*This is just the defaults I use for an hr...style yours however you wish *// hr.ChDiv { height:.3em; background-color:currentcolor; -webkit-mask-image: url('../Images/img_ChDiv.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: auto 100%; -webkit-mask-position: center; //* if your device doesn't support webkit, then you could try the non-webkit version *// mask-image: url('../Images/img_ChDiv.svg'); mask-repeat: no-repeat; mask-size: auto 100%; mask-position: center; } Here are a few screenshot examples: Also, this technique is not limited to svg...it works fine with .png and .jpg...just remember it is using a mask, so none of the image detail will be visible, just a silhouette. Here are some screenshots with a .png Code:
-webkit-mask-image: url('../Images/img_ChDiv.png')
mask-image: url('../Images/img_ChDiv.png')
Hope that helps someone! Cheers! edit: it works with .jpg but jpg normally doesn't have a transparency channel, so it will just show up as a silhouette of the entire picture including the background. ie it will just be a solid rectangle... edit: edit: you don't have to specify the mask-size separately...you can just leave it as mask-size: auto 100%; then you only need to change the height. Last edited by Turtle91; 12-05-2024 at 09:15 PM. |
![]() |
![]() |
![]() |
#9 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,254
Karma: 20040707
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Just for a complete answer:
If you wanted the detail available with a .png image I would change the css to something like this: Code:
hr.ChDiv { height:2em; background: transparent url("../Images/Wrench.png") no-repeat center; background-size: auto 100%; } If you used the mask technique it would make the same image look like this: And for the OP's original question about a fleur de lis, using a mask: OK - I'm out - time to go pay bills! |
![]() |
![]() |
![]() |
Tags |
image, scene break, user defined appearance |
Thread Tools | Search this Thread |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Css for keeping scene breaks? | Waylander | Conversion | 1 | 12-11-2013 10:12 AM |
Questions about scene breaks in conversion | lunixer | Conversion | 8 | 08-14-2011 04:36 AM |
Managing Scene Breaks during Conversion | Nathan0015 | Conversion | 8 | 06-17-2011 10:38 AM |
Scene Breaks - Using more than one type | ghostyjack | Workshop | 7 | 04-07-2011 08:33 AM |
Maintaining scene breaks | wellington | Calibre | 6 | 07-18-2010 09:43 PM |