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

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 11-23-2024, 01:52 AM   #1
ElMiko
Addict
ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.ElMiko actually enjoys Vogon poetry.
 
ElMiko's Avatar
 
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?
ElMiko is offline   Reply With Quote
Old 11-23-2024, 03:20 AM   #2
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
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.
DNSB is offline   Reply With Quote
Old 11-23-2024, 06:34 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,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.
Jellby is offline   Reply With Quote
Old 11-23-2024, 08:03 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: 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:
Originally Posted by Jellby View Post
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.
But if the section break character is not part of the main font, would it change color when the colors are changed?
JSWolf is online now   Reply With Quote
Old 11-23-2024, 09:01 AM   #5
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
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.
RbnJrg is offline   Reply With Quote
Old 11-23-2024, 10:28 AM   #6
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,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:
Originally Posted by Jellby View Post
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.

Oooooh - that sounds exciting!! Can you point to a how-to or something??

Edit:
I found this

Quote:
When applied to an SVG, applying currentColor to the fill or stroke property allows you to inherit the parent element’s text color or the text color applied to the element itself.

fill: currentColor;
stroke: currentColor;
Time to go play!

Last edited by Turtle91; 11-23-2024 at 10:35 AM.
Turtle91 is offline   Reply With Quote
Old 11-23-2024, 03:07 PM   #7
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,541
Karma: 19001081
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by JSWolf View Post
But if the section break character is not part of the main font, would it change color when the colors are changed?
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...
Jellby is offline   Reply With Quote
Old 12-05-2024, 01:32 PM   #8
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,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>
Unfortunately, the last I heard, some readers/apps (kindle) don't support embedded svg very well. They want you to wrap the svg in an <img> tag (<img alt="" src="img.svg"/>). The value for currentcolor wont translate into the <img> tag. Also, embedding all that svg code can get a bit clunky, especially if you are using it a lot.

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;
}
You will just need to set the height and mask-size to the proper size.

Here are a few screenshot examples:
Click image for larger version

Name:	Screenshot 2024-12-05 113830.png
Views:	85
Size:	231.5 KB
ID:	212356 Click image for larger version

Name:	Screenshot 2024-12-05 113906.png
Views:	95
Size:	235.5 KB
ID:	212357 Click image for larger version

Name:	Screenshot 2024-12-05 113944.png
Views:	104
Size:	245.4 KB
ID:	212358

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')
Click image for larger version

Name:	Screenshot 2024-12-05 122653.png
Views:	83
Size:	126.0 KB
ID:	212359 Click image for larger version

Name:	Screenshot 2024-12-05 122637.png
Views:	80
Size:	137.5 KB
ID:	212360

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.
Turtle91 is offline   Reply With Quote
Old 12-05-2024, 04:23 PM   #9
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,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%;  
}
That would give an image like this - what we are normally used to seeing with a png image:
Click image for larger version

Name:	Screenshot 2024-12-05 151714.png
Views:	88
Size:	121.3 KB
ID:	212363

If you used the mask technique it would make the same image look like this:
Click image for larger version

Name:	Screenshot 2024-12-05 151449.png
Views:	89
Size:	116.6 KB
ID:	212364

And for the OP's original question about a fleur de lis, using a mask:
Click image for larger version

Name:	Screenshot 2024-12-05 151115.png
Views:	76
Size:	111.0 KB
ID:	212365 Click image for larger version

Name:	Screenshot 2024-12-05 151102.png
Views:	79
Size:	115.0 KB
ID:	212366


OK - I'm out - time to go pay bills!
Turtle91 is offline   Reply With Quote
Reply

Tags
image, scene break, user defined appearance

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
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


All times are GMT -4. The time now is 06:11 PM.


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