Automate a page split... Find & Replace doesn't work for this

LostOnTheLine · 11-22-2022, 04:10 AM

I've been trying to find a way to split a page before every <h1> heading & before & after every image with the word "insert" in the name.

I have found many results but all of them end up saying the same thing "use Regex/Find & Replace" &/or "add a Page Break" but the problem is that I'm not just needing to replace some text in a page, rather what I need is to take a page & split it right before a set, repeated entry. Some of the topics I found seemed to be asking the same thing but were not clear enough to prevent misunderstanding & just seem to end with the answering party believing they solved the problem.

What I am currently doing is just a Find for <h1> & clicking before the found text & selecting Edit > Split at Cursor. I then do another search, this time for <img &, after looking at it to be sure it's an image that is intended to be on it's own page, splitting at cursor before & after the image. I then go & rename the pages, with a set pattern, the image pages are named what the image is "insert1", "insert2", etc, the ones that start at headings are named "ch#_" with the consecutive number to the previous one, (usually starting at "0" if there's a "Prologue" chapter but if an automation would require it to always start at 1 I'm fine with that too), followed by the chapter's 1st 7 non-whitespace characters in the <h1> name.

Is there any way to shorten this process? I have a saved search for the 2, but the time that saves seems to be none, only really helping in the potential future where I won't have to remember what to search for.
I'm new to Sigil, & feel I must be missing something because this seems like regular things people would want to do, but all my searches just seem to go cold with the same non-answer.

BeckyEbook · 11-22-2022, 04:26 AM

Ad h1:

Search: <h1
Replace: <hr class="sigil_split_marker" /><h1

+ Split at Markers (F6).

Ad images:
Show sample code with img.
The solution will be very similar.
1. Find something that is usually at the beginning of the image code.
2. Put an additional splitting code in front of it.
3. Press F6 to split the files.

Turtle91 · 11-22-2022, 10:57 AM

Something along the lines of:

<img insert alt="" src="../Images/example.jpg"/>

-OR-

<img alt="" src="../Images/insertexample.jpg"/>

Code:

find: <img(.*?)insert(.*?)/>
replace: <hr class="sigil_split_marker" /><img\1\2/><hr class="sigil_split_marker" />

Then (as BeckyEbook said):
click Edit/Split at Markers (F6)

Turtle91 · 11-22-2022, 11:37 AM

....although that brings up the question of WHY you want an image to be on it's own page??

If it truly needs to be all by itself on the page then I would recommend wrapping it in an svg...that solves most of the image issues.

Spoiler:

You can even give Sigil a template file that will do this for you when you select TOOLS/Add Cover. It automagically adds the proper image width/height/filename

Just add the COMPLETE xhtml file to your Sigil Preferences Location (EDIT/PREFERENCES/Open Preferences Location) and name it "cover.xhtml"

Here is the one I use... you can modify it however you wish:

Spoiler:

Edit: I almost forgot to mention CalibUser's Sigil plugin: InsertImageSVG

LostOnTheLine · 11-25-2022, 10:03 PM

Quote:

Originally Posted by Turtle91

....although that brings up the question of WHY you want an image to be on it's own page??
InsertImageSVG

The reason is because that's pretty standard for images that are intended to take up a whole page, not all images are, that's why I specified images that have the word "insert" in them since in the ones I'm dealing with all full-page images are named insert1.jpg or insert_1.jpg while ones that are part of the page, like an image under a title, are generally named something different.

I have found that many, if not most, official books have this format with a new xhtml for the image & another after the image. I'm not opposed to a different approach, but that seems to be a common industry standard for professionally done ePubs, so I have no intention of reinventing the wheel, there's probably a reason they do it that way, that way looks nice from my experience, & looks nice across different devices, so unless there's a different way that is clearly better for some reason I'll stick to the tried & true method personally.

As far as the SVG goes... I'm not exactly sure what that's supposed to do. All I know for SVG is the Vector Graphics format & the images I have are not vector graphics. From the code you shared it looks like the image is being scaled to a specific resolution, which seems unnecessary & gives the same problem I'm trying to solve with compatibility.

The issues that cause a desire for the images to be on separate pages?
Sometimes the image is just under the resolution of the screen being used, for example if the epub was made from images sized to the old PW1 & are displayed on a PW3 you end up with 1-3 lines of text above or below the image. this is annoying & completely avoided when using a separate page for the image. I have run into the issue a few times where images were made smaller than my PW3 screen & they don't fill the page, but instead leave a blank area around it, that's not ideal, but better, IMO at least, to having the image with a single or 2 lines of text. Even when it had 4 lines I'd rather the text just start on the next page.
If I were to use your SVG code then the image would be scaled to width="400" height="600" or height="99vh" width="99vw" which doesn't sound like it is going to be good unless it is made for only a single device & not intended to be used on another device. As someone who has 2 PW3s, 2 PW1s, my Dad's old Kindle that is lower resolution, & people who use tablets & iOS & Android phones in my house building to a single dimension for one device leaves problems for other devices.

With that in mind, would you be able to give a brief explanation on why the SVG thing is what you think is better? I'm new to Sigil so I'm very much still learning. I just don't understand what it benefits from adding all that extra code when it doesn't seem to be better than what most pro-books do. Is there something I'm missing?
I'm also still trying to figure out what SVG means in your context, Scalable Vector Graphics are nice, but they have major limitations, you can't really have vector graphics with a lot of detail, & they take a lot more processing power to display than JPG or PNG images, with the more detail an image has requiring more processing power, & with illustrations that is gonna be a lot, even more than WEBP possibly. So if you are converting images to SVG that sounds problematic & definitely won't be supported across many devices. Is it something else?

LostOnTheLine · 11-25-2022, 10:28 PM

Quote:

Originally Posted by BeckyEbook

Ad h1:

Search: <h1
Replace: <hr class="sigil_split_marker" /><h1

This was very helpful. That's doing exactly what I wanted... Unfortunately it seems to also be splitting at the beginning of the ones that are already starting a page, so now I have to find a way to make them not not do that or delete blank pages.

At the very least it's a lot better than what I was previously dealing with. Thanks a bunch

Tex2002ans · 11-26-2022, 01:03 AM

Quote:

Originally Posted by LostOnTheLine

With that in mind, would you be able to give a brief explanation on why the SVG thing is what you think is better?

See my response in:

2018: "SVG images - why?"

What he is talking about is an "SVG Wrapper"... not an actual SVG (vector image).

This will scale your bitmap image properly to fit any screen resolution + rotation. (See the thread for examples.)

- - -

Side Note: There are many awesome advantages of vector images too. Especially Formulas/Equations + Charts/Graphs and all sorts of computer-generated things. (These can be scaled infinitely or zoomed in with zero loss in quality.)

Vector images are not intended for photographs.

KevinH · 11-26-2022, 05:12 AM

Quote:

Originally Posted by LostOnTheLine

This was very helpful. That's doing exactly what I wanted... Unfortunately it seems to also be splitting at the beginning of the ones that are already starting a page, so now I have to find a way to make them not not do that or delete blank pages.

At the very least it's a lot better than what I was previously dealing with. Thanks a bunch

In the latest versions of Sigil, you can use new find and replace tools to generate a set of proposed "before" and "after" find and replace results as a table and then you can delete the unwanted replacements from the table and just apply the remaining ones.

See the "Filter Replacements" in the Find and Replace chapter in the latest Sigil User Guide for details.

repilo · 11-26-2022, 06:18 AM

When I want a single image on a page I use the following styles.
To centre the image vertically, depending on its height I use a class that has the appropriate top margin (alone00 for none, alone10 por 10%, etc).

Code:

figure { margin:1em auto; padding:0; text-align:center; }
img { border:0; margin:0; padding:0; width:100%; }
figcaption { 
	margin:0; padding:.4em 0 .3em; text-align:center;
	text-indent:0; font-size:.82em; font-family:sans-serif;
}

figure.alone00 { page-break-before:always; margin-top:0; margin-bottom:0; }
figure.alone10 { page-break-before:always; padding-top:10%; page-break-after:always; }
figure.alone20 { page-break-before:always; padding-top:20%; page-break-after:always; }

Code:

  <p>Text.</p>

  <figure class="alone00">
    <img alt="" src="../images/1.jpg" />

    <figcaption><b>Fig. 1:</b> Text.</figcaption>
  </figure>

  <p>Text.</p>

Turtle91 · 11-26-2022, 07:49 AM

SVG wrapper's are a workaround to provide functionality that is not included in current CSS/HTML. It does not reformat a jpg/png to SVG.

One awesome function is the 'preserveAspectRatio' which, as it states, preserves the images aspect ratio...It prevents an image from getting clipped, or stretched, in the wrong direction...which is a failing of the method repilo mentioned. No matter the orientation of the display, or weather the image is portrait or landscape, the image will display properly on the 'page'. There will be blank space to fill whichever dimension needs it. the 'xMidYMid meet' is one of the options that simply says 'center the image on the available display vertically and horizontally.

The image height and width is not setting, or restricting, the resolution. It is informing the svg shell what the images height and width are. This is used in conjunction with the 'viewbox' setting to determine which portion of the image to display. Most often you want to display the whole image, so you would set the viewbox from the origin (0 0) to the imageWidth imageHeight (as in '0 0 600 889' for an image that is 600 pixels wide by 889 tall). You can focus on only one portion of the image by restricting those coordinates.

For more details check out tex's link.

Cheers!

LostOnTheLine · 11-26-2022, 11:41 AM

Quote:

Originally Posted by Tex2002ans

There are many awesome advantages of vector images too. Especially Formulas/Equations + Charts/Graphs and all sorts of computer-generated things. (These can be scaled infinitely or zoomed in with zero loss in quality.)

Vector images are not intended for photographs.

I've well aware of the advantages to them, but there are also a lot of limitations, they make sense for things like logos & yes charts & graphs for sure, but using them in an eBook that is intended to be read on a variety of devices that may or may not support them, has low processing power & is generally designed with lower end hardware, & you generally want to conserve processing power to preserve battery life, outweighs it's benefits for this use case IMO. I love vector graphics, don't get me wrong, I just don't think they belong in an eBook reader.
Just like I thing WEBP images are nice, you can get better compression with less quality loss, but there's a big difference in what the device reading it has to do to see it & that makes putting them in an eBook not ideal either.
It's like if you have an ePub with the highest level of zip compression, it takes a tiny bit longer to open & page turns are slightly slower, & your computer uses a bit more RAM to view it.
WEBP has the same problem & for a device like a kindle, with a much slower processor, that makes more of a difference. & it impacts the battery life. They save some space, but there's no such thing as a free lunch, there's a cost.
It doesn't matter for a computer or modern phone, but the difference is actually measurable. Now take a device that only has ½GB or ¼GB of RAM instead of 32-128GBs & 1GHz or ¾GHz CPU instead of 3-5GHz with a single core instead of 6-32 cores & what is measurable but hardly noticeable on a computer makes a much bigger difference.

Now if it's just a wrapper designed to work with vector images that's fine, I just don't see why it's necessary, not that I don't see a use for the technology.

Quote:

Originally Posted by Turtle91

One awesome function is the 'preserveAspectRatio' which, as it states, preserves the images aspect ratio...It prevents an image from getting clipped, or stretched, in the wrong direction...which is a failing of the method repilo mentioned. No matter the orientation of the display, or weather the image is portrait or landscape, the image will display properly on the 'page'. There will be blank space to fill whichever dimension needs it. the 'xMidYMid meet' is one of the options that simply says 'center the image on the available display vertically and horizontally.

The image height and width is not setting, or restricting, the resolution. It is informing the svg shell what the images height and width are. This is used in conjunction with the 'viewbox' setting to determine which portion of the image to display. Most often you want to display the whole image, so you would set the viewbox from the origin (0 0) to the imageWidth imageHeight (as in '0 0 600 889' for an image that is 600 pixels wide by 889 tall). You can focus on only one portion of the image by restricting those coordinates.

An example of a part of a Professional ePub that has the images do exactly what you are talking about with no need for having the dimensions of the image (Which would have been an issue had I done the Extract & Shrink that I have done before deciding to switch to try to get more control with Sigil):

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="en" xml:lang="en">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="default-style"/>
  <title>The Book Title Here</title>
  <link href="../Styles/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>

<body class="nomargin center">
  <section epub:type="bodymatter chapter" id="insert1">
    <img alt="insert1" class="insert" src="../Images/Insert1.jpg"/>
  </section>
</body>
</html>

That's pretty typical of the ones that I've altered before I do anything to it.
In fact before trying to do more with sigil I would take my ePubs, unzip them, rotate all wide images, then batch scale the images to slightly bigger than the largest screen we will be using, convert the non-color images to greyscale to save a few ks since they generally are RGB even though they are greyscale images for some reason.
I generally take a 40MB ePub & turn it into a 6MB ePub by doing just that & convverting ` and ` to ` & ` which usually cuts out 2-8 pages but probably increases the size as it actually consists of 2 more characters in data with the `&`.
The ones I don't do will, just like you said, show the wide image taking up half of the screen because it's aspect ratio is preserved naturally, without any special code making that happen. If a tall image is not the screen ratio it will have empty space on the side, it won't get clipped or stretched on the kindle at all, & I've only seen that clipping on phone/tablets when the image in inline with the text. Calibre's ePub Previewer will do that to the inline images if the window is small, but not to the ones that are like what I shared, probably why the Professional publishers use that format... The only difference I see from that extra steps & extra code is centering the image... Which I don't think worth that effort in the slightest.

The one that I split before & after the image:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" epub:prefix="z3998: http://www.daisy.org/z3998/2012/vocab/structure/#" lang="en" xml:lang="en">
<head>
    <title>Part 1</title>
    <link href="book.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
<section epub:type="bodymatter chapter"><div class="main"><img src="../Images/insert_1.jpg"/>

</div>
</section>
</body>
</html>

I think that's pretty close to the Pro one...

Quote:

Originally Posted by KevinH

In the latest versions of Sigil, you can use new find and replace tools to generate a set of proposed "before" and "after" find and replace results as a table and then you can delete the unwanted replacements from the table and just apply the remaining ones.

I mean if I'm going to be doing that I can just as easily, probably easier-ly actually, just delete the extra pages I don't need. So adding a more complicated step to prevent an easier step in 1 step forwards & 3 steps back.

Currently I solve the empty page problem with

Code:

Find: <br/><br/></p>
      <h1
Replace: </p><hr class="sigil_split_marker" /><h1

But i have a feeling that won't work very consistently.

I've heard the reasons for the SVG Wrapper, & I thank you for helping me understand it, but I'm now confident that it's not something I'm interested in. I'm more concerned with trying to find a way to improve the automation of splitting the images & find a way to automate renaming of pages if possible

Tex2002ans · 11-26-2022, 12:52 PM

Quote:

Originally Posted by LostOnTheLine

I've well aware of the advantages to them, but there are also a lot of limitations, [...] I love vector graphics, don't get me wrong, I just don't think they belong in an eBook reader.

Do you use Sigil's inserted covers?

Tools > Add Cover

Then you're already using SVG Wrappers. It's the same exact code.

Is the EPUB reader exploding?

Quote:

Originally Posted by LostOnTheLine

they make sense for things like logos & yes charts & graphs for sure, but using them in an eBook that is intended to be read on a variety of devices that may or may not support them, has low processing power & is generally designed with lower end hardware, & you generally want to conserve processing power to preserve battery life, outweighs it's benefits for this use case IMO.

There are plenty of other reasons for limited uses of SVG (Wrappers), but those aren't any of them.

You do know that fonts are essentially just vectors—math curves that the device will scale to fit the screen...

- - -

And, as a complete sidenote, one of the bugs/quirks of SVG (Wrappers)+Amazon-conversion is giving you exactly what you were wanting... page-breaks before and after all your images! LOL.

Quote:

Originally Posted by LostOnTheLine

Just like I thing WEBP images are nice, you can get better compression with less quality loss, but there's a big difference in what the device reading it has to do to see it & that makes putting them in an eBook not ideal either.

WEBP as an image format is... meh... (It smooths out too many of the details).

And you definitely want to avoid using them in EPUBs for now (because most readers can't support that format yet/ever).

For more discussion, see:

2019: "What about webp images?"

Quote:

Originally Posted by LostOnTheLine

Now if it's just a wrapper designed to work with vector images that's fine, I just don't see why it's necessary, not that I don't see a use for the technology.

SVG wrappers are perfect for exactly the use-case you want. An image filling up the screen.

Quote:

Originally Posted by LostOnTheLine

An example of a part of a Professional ePub that has the images do exactly what you are talking about with no need for having the dimensions of the image [...]

[...]

That's pretty typical of the ones that I've altered before I do anything to it.

Raw HTML + CSS scaling, like in your example, will fail for the reasons given in my SVG Wrappers thread.

The second you:

rotate your device
have an odd dimension (skinny/tall, short/fat image)

the "cutoff" image or "oompa loompa" effect more easily happens.

While you can try to MITIGATE this, by shoving each image into its own HTML file... that just isn't possible when you're dealing with inline images.

For example, what if you have text that's:

Code:

<p>As can be seen in Figure 1:</p>

<div class="image">
	<img [...]>
	<p class="caption">Figure 1: A thing</p>
</div>

<p>the issue can be seen. Also, see Figure 2:</p>

You can't just split the file into dozens of:

Chapter01.p1.xhtml
Chapter01.Figure1.xhtml
Chapter01.p2.xhtml
Chapter01.Figure2.xhtml
Chapter01.p3.xhtml
[...]

Yes, in some books, the single-file-per-image-method might work—like photographs between (or at the end of) each chapter—but in all the ebooks I've worked on, only a handful would even fall into that category.

(I've professionally converted 650+ books, mostly Non-Fiction.)

Quote:

Originally Posted by LostOnTheLine

[...] probably why the Professional publishers use that format...

Most publishers release garbage code in their ebooks.

Quote:

Originally Posted by LostOnTheLine

[...] but I'm now confident that it's not something I'm interested in. I'm more concerned with trying to find a way to improve the automation of splitting the images & find a way to automate renaming of pages if possible

Everyone here has given you multiple solutions:

<hr class="sigil_split_marker" />
- Inserted using Find & Replace, Regex, or Filter Replacements.
+ Edit > Split at Markers (F6)

is the best way.

But you trying to split the files before/after every image is a poor idea.

Better to use good, clean HTML+CSS and rely on page-break-before + page-break-after. See my posts in:

KevinH · 11-26-2022, 01:28 PM

Quote:

I mean if I'm going to be doing that I can just as easily, probably easier-ly actually, just delete the extra pages I don't need. So adding a more complicated step to prevent an easier step in 1 step forwards & 3 steps back.

You might want to actually try it before complaining about it. Using Filter Replacements is actually easier and faster than selecting and deleting files in BookBrowser, but to each their own. Just tried to help. If you don't want the help fine.

Turtle91 · 11-26-2022, 01:49 PM

LostOnTheLine: It appears you think there is some significance to be gained by emphasizing 'Professional Publishers'...

First, there are multiple individuals here on MR that are 'Professional Publishers'...they come here to help the not so professional people...to keep them from making egregious mistakes...and to keep abreast of the goings on in the ePub world. I wouldn't dismiss what you see here as 'less than professional'.

Second, the majority of people who post here regularly are VERY experienced in cleaning up the crap code that is published by those you refer to as 'professional'...it really is quite bad sometimes... some of those here can identify the 'professional publisher' just by looking at the method of their coding.... you see, the big 'professional publishers' usually don't code the html themselves... it is sub-contracted out to someone, or who uses a template and/or a software that produces absolute junk. Anyway, assuming what you see in 'professional publisher's' books is the 'right/best way' to do things... well following 'that path leads to the Dark Side', 'Here There Be Dragons', 'Danger Will Robinson!'

Third, your examples didn't have the CSS associated with them, so I'm not sure if you have some magical method of fixing the image problem that people have been fighting for many years...it would be interesting to see that. My bet is that it would take me about 3 seconds to 'break' that image display...and 2.5 of those seconds would be loading the book and flipping to that page.

As always, you are completely free to use any of the techniques you find here, or not... I'm certainly not trying to say you MUST use my techniques... Just be aware that your logic behind turning down that technique doesn't quite cover it. Perhaps it's because we didn't explain it very well...

Good luck to you, and Cheers!

JSWolf · 11-26-2022, 03:48 PM

@Tutrle91, that was very well said.

11-22-2022, 04:10 AM	#1
LostOnTheLine Enthusiast Posts: 31 Karma: 1158 Join Date: Jun 2021 Device: Kindle Paperwhite (PW1 & PW3)	Automate a page split... Find & Replace doesn't work for this I've been trying to find a way to split a page before every <h1> heading & before & after every image with the word "insert" in the name. I have found many results but all of them end up saying the same thing "use Regex/Find & Replace" &/or "add a Page Break" but the problem is that I'm not just needing to replace some text in a page, rather what I need is to take a page & split it right before a set, repeated entry. Some of the topics I found seemed to be asking the same thing but were not clear enough to prevent misunderstanding & just seem to end with the answering party believing they solved the problem. What I am currently doing is just a Find for <h1> & clicking before the found text & selecting Edit > Split at Cursor. I then do another search, this time for <img &, after looking at it to be sure it's an image that is intended to be on it's own page, splitting at cursor before & after the image. I then go & rename the pages, with a set pattern, the image pages are named what the image is "insert1", "insert2", etc, the ones that start at headings are named "ch#_" with the consecutive number to the previous one, (usually starting at "0" if there's a "Prologue" chapter but if an automation would require it to always start at 1 I'm fine with that too), followed by the chapter's 1st 7 non-whitespace characters in the <h1> name. Is there any way to shorten this process? I have a saved search for the 2, but the time that saves seems to be none, only really helping in the potential future where I won't have to remember what to search for. I'm new to Sigil, & feel I must be missing something because this seems like regular things people would want to do, but all my searches just seem to go cold with the same non-answer.

11-22-2022, 10:57 AM	#3
Turtle91 A Hairy Wizard Posts: 2,679 Karma: 16000001 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW	Something along the lines of: <img insert alt="" src="../Images/example.jpg"/> -OR- <img alt="" src="../Images/insertexample.jpg"/> Code: find: <img(.?)insert(.?)/> replace: <hr class="sigil_split_marker" /><img\1\2/><hr class="sigil_split_marker" /> Then (as BeckyEbook said): click Edit/Split at Markers (F6) Last edited by Turtle91; 11-22-2022 at 11:02 AM.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Search and replace sometimes doesn't work across all files	GregTheGrate	Editor	15	11-10-2021 02:49 AM
Calibre2OPDS split tags just doesn't work	DavidTC	Related Tools	16	11-04-2014 10:58 AM
Regex Help: Find page number & Replace+Remove 2x Line Breaks in Sigil	Contre-jour	Sigil	9	02-01-2013 11:47 AM
Search & Replace doesn't work for quotes	habanr	Conversion	11	04-22-2011 12:50 PM
Find, replace, split chapter?	laelaps	Sigil	8	01-20-2011 05:01 PM

11-22-2022, 04:26 AM	#2
BeckyEbook Fanatic Posts: 572 Karma: 1724081 Join Date: Jan 2017 Location: Poland Device: Kindle (Key3, PW2, PW3), Nook (ST, GLP), Kobo Touch, Tolino Vision 2	Ad h1: Search: <h1 Replace: <hr class="sigil_split_marker" /><h1 + Split at Markers (F6). Ad images: Show sample code with img. The solution will be very similar. 1. Find something that is usually at the beginning of the image code. 2. Put an additional splitting code in front of it. 3. Press F6 to split the files.

11-26-2022, 07:49 AM	#10
Turtle91 A Hairy Wizard Posts: 2,679 Karma: 16000001 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW	SVG wrapper's are a workaround to provide functionality that is not included in current CSS/HTML. It does not reformat a jpg/png to SVG. One awesome function is the 'preserveAspectRatio' which, as it states, preserves the images aspect ratio...It prevents an image from getting clipped, or stretched, in the wrong direction...which is a failing of the method repilo mentioned. No matter the orientation of the display, or weather the image is portrait or landscape, the image will display properly on the 'page'. There will be blank space to fill whichever dimension needs it. the 'xMidYMid meet' is one of the options that simply says 'center the image on the available display vertically and horizontally. The image height and width is not setting, or restricting, the resolution. It is informing the svg shell what the images height and width are. This is used in conjunction with the 'viewbox' setting to determine which portion of the image to display. Most often you want to display the whole image, so you would set the viewbox from the origin (0 0) to the imageWidth imageHeight (as in '0 0 600 889' for an image that is 600 pixels wide by 889 tall). You can focus on only one portion of the image by restricting those coordinates. For more details check out tex's link. Cheers!

11-26-2022, 01:49 PM	#14
Turtle91 A Hairy Wizard Posts: 2,679 Karma: 16000001 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2 & Air/Surface Pro/Kindle PW	LostOnTheLine: It appears you think there is some significance to be gained by emphasizing 'Professional Publishers'... First, there are multiple individuals here on MR that are 'Professional Publishers'...they come here to help the not so professional people...to keep them from making egregious mistakes...and to keep abreast of the goings on in the ePub world. I wouldn't dismiss what you see here as 'less than professional'. Second, the majority of people who post here regularly are VERY experienced in cleaning up the crap code that is published by those you refer to as 'professional'...it really is quite bad sometimes... some of those here can identify the 'professional publisher' just by looking at the method of their coding.... you see, the big 'professional publishers' usually don't code the html themselves... it is sub-contracted out to someone, or who uses a template and/or a software that produces absolute junk. Anyway, assuming what you see in 'professional publisher's' books is the 'right/best way' to do things... well following 'that path leads to the Dark Side', 'Here There Be Dragons', 'Danger Will Robinson!' Third, your examples didn't have the CSS associated with them, so I'm not sure if you have some magical method of fixing the image problem that people have been fighting for many years...it would be interesting to see that. My bet is that it would take me about 3 seconds to 'break' that image display...and 2.5 of those seconds would be loading the book and flipping to that page. As always, you are completely free to use any of the techniques you find here, or not... I'm certainly not trying to say you MUST use my techniques... Just be aware that your logic behind turning down that technique doesn't quite cover it. Perhaps it's because we didn't explain it very well... Good luck to you, and Cheers!

11-26-2022, 03:48 PM	#15
JSWolf Resident Curmudgeon Posts: 69,148 Karma: 114842697 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	@Tutrle91, that was very well said.