![]() |
#1 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Calculating and inserting image width. A plugin?
Hi
Sigil is very handy namely for its plugins, this explains the title I gave to this thread. It is about calculating and inserting image width. Rationale: we have two kinds of images: the fullscreen ones and the others. 1. - A fullscreen image is very safely contained in its own page. I tend to use this very basic code (example): Spoiler:
2. - A plain image will just flow with the text: We'll use only a part of the above code. Code:
<div style="text-align:center"><img alt="002" id="fig-2" src="../Images/Image-02.jpg" style="width: 60%;"/></div> The percentage of width (here in bold) is truly the crucial figure. The more precise, the better display. Obviously it can't be more than 100%. This how I calculate width for an image of a 626 × 942 pixels size to obtain 88.6% (626/942) ×4 /3 I wish this could be done and inserted automatically for all images of an Epub. If one does not agree with the 4/3 fraction (because his(her) own screen may have a different size), this fraction could be defined as a variable. Last edited by roger64; 07-25-2017 at 01:57 AM. |
![]() |
![]() |
![]() |
#2 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,491
Karma: 5703586
Join Date: Nov 2009
Device: many
|
What is your screen size here? Where is your 4/3 come from? How will the epub turn out when displayed on a desktop display or ipad/tablet with radically different screen sized and dimensions. I assume your dimensions are given a widthxheight? Is that correct?
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,313
Karma: 20171571
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
|
I'm not sure it is even necessary to do those calculations?? For non-full-page images all you need to do is set the width in % and the height is automatically figured keeping the proper aspect-ratio. This will keep the image at your given % of the screen. To prevent over stretching the image for large screens you just add the max-width property.
For example: Code:
div.image2 {width:60%; max-width:626px; text-align:center;
margin:1em auto; text-indent:0; padding:0}
<div class="image2"><img alt="" src="../Images/Image-02.jpg" /></div>
Code:
#fig-2 {width:60%; max-width:626px; text-align:center;
margin:1em auto; text-indent:0; padding:0}
<div id="fig-2"><img alt="" src="../Images/Image-02.jpg" /></div>
Last edited by Turtle91; 07-25-2017 at 11:40 AM. |
![]() |
![]() |
![]() |
#4 | ||
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Quote:
The 4/3 ratio comes from my six-inch Kindle PW3. I am used to tune my e-books, quite often some image books. I have been adding percentage width for quite a long time. It's enough for me to indicate this precise (and calculated) width to get a perfect display on any EPUB using koreader (and also after conversion with Prince PDF where I produce 9×12 and IPAD size PDF). Why should I refrain from using it? A plugin can be used to suit your personal needs but I guess probably a majority of users could make a good use of this 4/3 aspect ratio. If this aspect ratio is not convenient for some screen sizes, it can become either a variable or even the plugin should not be used. Though they are perfectly valid css properties, I have not this quality of result with max-width values. "height:auto" is also useless for me (I mean it's as well as nothing). As Turtle91 said Quote:
*For small images, a CSS class can also be included to set margin-top or margin-bottom values. Last edited by roger64; 07-25-2017 at 12:40 PM. Reason: automated |
||
![]() |
![]() |
![]() |
#5 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,491
Karma: 5703586
Join Date: Nov 2009
Device: many
|
I do not understand the calculation yet. Is your original image 626 pixels wide and and 942 pixels tall or visa-versa?
If 626 wide and 942 tall and your screen has a 4/3 aspect ratio (say 800 pixels wide by 600 pixels tall) then allowing your image width to be 88.6% of the screen would result in an image width of 708.8 pixels. To keep the same aspect ratio, you would have to scale your image height to 1066 pixels which would go over one screen in height. If instead your image is 942 pixels wide and 626 pixels tall and your screen has a 4/3 aspect ratio (again use a width of 800 and height of 600 for the screen), then setting the width to use to be 88.6% of the screen would result in an image width of 708.8 pixels which then would result in an image height of 471 pixels on the screen (to keep the same aspect ratio) which would fit nicely into a single screen. That is why I asked if you were using image width over image height or visa-versa? Which is it? |
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,313
Karma: 20171571
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:
![]() If that is correct then you simply need to set your percentage at 100% (or 95%, or 90%...to provide whatever borders you want around the image) and use the max-width property set to that image's width in pixels. Code:
#fig-2 {width:100%; max-width:626px; text-align:center;
margin:1em auto; text-indent:0; padding:0}
On a large screen you cannot get a more perfect display of your image. On a small screen the image will still be scaled down to fit the screen size but will keep the proper aspect ratio. There is one caveat... If your image is higher than it is wide then you need to add a limit in your css. img {max-height:100%} You can see the scaling aspects of this in Sigil by changing the preview window dimensions. Slide the width back and forth and you will see the image scale while maintaining the perfect aspect ratio. You can even compare the two techniques by putting one on top of the other on the same page (on a large screen): Code:
#fig-2 {width:100%; max-width:626px; text-align:center; margin:1em auto; text-indent:0; padding:0} <body> <div id="fig-2"> <img alt="" src="../Images/Image-02.jpg" /> </div> <div style="text-align:center"> <img alt="002" id="fig-2" src="../Images/Image-02.jpg" style="width: 88.6%;"/> </div> </body> |
|
![]() |
![]() |
![]() |
#7 | |||
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Quote:
Quote:
Quote:
626/932 = 0,6716 0,6716 × 4 / 3 = 0,8954 that is 89.5% Thus, the image on my screen will fit exactly 100% of its height, leave a little more than 5% margin on either side and will not be distorted nor cropped nor allow any vertical white space. I think it is the best we can hope for on a small screen. Last edited by roger64; 07-25-2017 at 03:42 PM. |
|||
![]() |
![]() |
![]() |
#8 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,491
Karma: 5703586
Join Date: Nov 2009
Device: many
|
Okay, I finally think I understand. Your 4/3 had me confused as your aspect ratio (width / height) when it is not.
Your example works as follows: Image width = 626 px Image height = 932 px Screen width = 600 px Screen Height = 800 px So the problem is you need to scale the image height down to fit the screen height and then keeping the same aspect ratio, figure out what percentage of your screen width to use. So 800 / 932 is how much you need to scale (multiply by) to get your height to 800 px (100%). Your new width to keep the same aspect ratio means you must multiply your image width by the same factor: 626 * (800 / 932) This is in pixels, to convert that to % of screen width have to divide it by the screen width: which gives after regrouping terms: (626 / 932) * (800 / 600) which equals (626/932) * (4/3) So 4/3 was not your screen aspect ratio but its inverse. Now what you are trying to do all makes sense! Last edited by KevinH; 07-26-2017 at 08:56 AM. |
![]() |
![]() |
![]() |
#9 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,491
Karma: 5703586
Join Date: Nov 2009
Device: many
|
So to make this algorithm general, you will need to know your target screen width, target screen height, and image width and height.
Code:
if (image height > screen height) then use: (image width/image height) * (screen height / screen width) as % of width else use: 100% of width |
![]() |
![]() |
![]() |
#10 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Yes.
![]() As you realize, I am not a mathematician. We reach here the top of my scientific expertise. The ratio 4/3 has been convenient for me with the Kobo Glo and the PW3. It's not a generic value but it's widely used. Last edited by roger64; 07-25-2017 at 03:51 PM. |
![]() |
![]() |
![]() |
#11 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,491
Karma: 5703586
Join Date: Nov 2009
Device: many
|
When I get a free moment tomorrow, I will see if there are any other special cases that make any sense to handle as well, as there still should be cases when image height is larger than image width but less than screen height that should be handled scaled appropriately too.
Last edited by KevinH; 07-25-2017 at 04:05 PM. |
![]() |
![]() |
![]() |
#12 | |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 5,687
Karma: 24031401
Join Date: Dec 2010
Device: Kindle PW2
|
Quote:
ERROR(RSC-005): Error while parsing file 'value of attribute "width" is invalid; must be an integer'. Apparently, in HTML5 files, image scaling must be done via CSS. For example, via id or class attributes. I.e., it might be better to generate custom class or id based styles for each unique image, because this method will work for epub2 and epub3 books. (Of course, the plugin would also have to remove any existing img width/height attributes.) EDIT: I had assumed that roger64 used a width attribute with a percentage value. I re-read the thread and found out that he uses inline styles. These inline styles will of course not be flagged by epubcheck. Last edited by Doitsu; 07-26-2017 at 02:23 AM. |
|
![]() |
![]() |
![]() |
#13 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,313
Karma: 20171571
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
|
OK. I see now what you are trying to do. I'm not sure I would spend time creating a plugin to create this "optimal" percentage when CSS does all the work for you automatically - and it works for all devices, not just your specific device display. Good news though - I'm not a plugin creator!!
![]() I concur with Doitsu's recommendation though - have any plugin automatically add custom classes or IDs to the CSS for the selected images and insert basic tags in the html file. eg. Code:
img {max-height:100%} div.image1 {width:100%; max-width:SGC_IMAGE_WIDTH} <div class="image1"><img alt="" src="../Images/SGC_IMAGE_FILENAME" /></div> -OR- img {max-height:100%} #image1 {width:100%; max-width:SGC_IMAGE_WIDTH} <div id="image1"><img alt="" src="../Images/SGC_IMAGE_FILENAME" /></div> Since Sigil has an "Insert File" function that already does most of the work...wouldn't it be easier to simply add a user preferences section for that tool?? One where the user could enter their desired default code into a text box. If the textbox is empty Sigil uses it's normal algorithm, if not it uses the user's code. It is a simple copy/paste with some basic variable fields. These variable fields are already in use by Sigil: SGC_IMAGE_WIDTH, SGC_IMAGE_HEIGHT, SGC_IMAGE_FILENAME, etc. It wouldn't just need to be for "Insert File" function either. It could be used for the "Add Cover" tool, or the "Create HTML ToC" tools that already look in a folder location to see if there is a user defined "cover.xhtml" or "sgc-toc.css" file. It seems like it would be simpler (or at least easier for the user) to enter their desired code into textboxes in preferences than create a new file in a hidden Sigil folder... FWIW |
![]() |
![]() |
![]() |
#14 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,624
Karma: 3120635
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
Thanks to Doitsu for correcting his warning on EPUB3. As written in the first post I use inline styles within the img tag to express:
Code:
style="width:xx%;" Last edited by roger64; 07-26-2017 at 08:57 AM. |
![]() |
![]() |
![]() |
#15 |
Witchman
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 628
Karma: 788808
Join Date: May 2013
Location: Philippines
Device: Android S5
|
At roger64's invitation I hope nobody minds if I chip in on this discussion.
In my CustomCleanerPLus plugin I also have an option to convert ebook images in pixels to percentage width format(vs screen width) to help normalize ebook images that are smaller than 100% screen width. In case people are wondering why you need to use use percentage format like this -- for example in Kindle conversions, the Kindle overrides tend to decimate or ruin screen sizes smaller than 100% screen width when they are defined in pixels. If you don't believe me then go over to the KDP forum -- we still get several complaints per week on average from people complaining about incorrect ebook image size when they convert their ebook to Kindle mobi. To avoid this problem you have to avoid the Kindle overrides by declaring your height and width values as an inline style within the <img> tag. Furthermore, you should also declare your screen width as a percentage of screen size to help maintain appropriate image dimensions across all the many ereader screen widths. The code in my CustomCleanerPlugin is quite simple. When it finds a line with an <img> tag I use PIL to discover the image height and width in pixels. Then I convert just the width value to a percentage using this simple ballpark calculation: image width/650 x 100 Then I extract the existing height and width in pixels from the existing code using bs4 and just insert an inline style declaration something like this: <p class=imagestyle><img alt="" src="..Images/yadayada.jpg" style="width: 27%;height: auto; "> I must also emphasize that my choice of 650 pixels in the above calculation is just a ballpark figure. That's because you will never be able to achieve the perfect image percentage width for every ereader out there because their screen widths will all be different. My own expectations of a person using my image conversion is that if they don't like the size of the ebook image after using my plugin then they should go into the image code in Sigil and increase or decrease the percentage width to their hearts content until they are satisfied. In other words, using a fixed screen width in your percentage width calculation will never give you the perfect screen width for your ebook image because the final image height and width will always vary according to the differences between my fixed ballpark figure(or any ballpark figure) and all the different ereader screen widths out there. Last edited by slowsmile; 07-27-2017 at 09:19 AM. |
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Plugin for inserting endnotes in an epub 2.0 | elibrarian | Plugins | 51 | 12-20-2023 09:28 AM |
Maximize Image Width | Cyberseeker | ePub | 19 | 06-07-2017 02:53 PM |
Changing image width in the economist | goios | Recipes | 1 | 04-24-2014 01:29 PM |
Inserting a background image | roger64 | ePub | 1 | 12-28-2012 06:12 AM |
ADE bug in calculating width | DaleDe | ePub | 6 | 01-17-2010 09:33 AM |