MobileRead Forums - View Single Post

rubeus · 12-05-2015, 02:12 PM

Hi,

over the time the resolution of ebook devices increased from 800x60 too full HD and even more (retine displays)

What resolution should an image have? An image having a gootd resolution for 800x600 looks like a stamp on hires screens. If you assign a proportonal width like 90% may lead to a resizing where the displayed image is oversized. it looks ugly - especially indexed images. So the ideal formatting would resize the image proportional, but stop the image to be scaled larger than it is. Im archiving this by using these css rules:

Code:

div.cimg {
  width: 100%;
  text-align: center;
  margin: 1em 8px 1em 8px;
}

div.cimg img {
  width: 100%;
}

div.cimg + p {
  text-indent: 0;
}

This will center the image, make a margin around it, scaling the image to fit on the screen and set the indentation of the following paragraph to zero.
But it will not prevent the image to be resized larger than it is. This is done by adding the max-width style to the img rule. As the width of an image varies from image to image a special css rule is necassry for each image - or each image needs to have the same resolution.
To solve that the max-width style can be apllied to the img element:

Code:

  <div class="cimg">
    <img alt="" src="../Images/img07.png" style="max-width: 520px"/>
  </div>

Now the image will be resized according to the screen size but this will stop at 520px, the width of the image itself.
Still this is very time consuming even with a snippet as the snippet cant retrieve the image resolution.

The Plugin below will go through every text file and will add the maxwidth style te every img element. Existing styles will be kept, if there is already a max-width style the value will be checked and corrected if necessary.
I'm new to Python, especially to PIL and BS4, so i gave the version 0.0.1. Use at your own risk and always have a backup

This plugin wouldnt exist without the help of Doitso and KevinH.

Every comment to improve is welcomed.

Requirements: Sigil 0.9.1 with internal Python enabled. The Plugin is not 2.7 enabled.

12-05-2015, 02:12 PM	#1
rubeus Banned Posts: 272 Karma: 1224588 Join Date: Sep 2014 Device: Sony PRS 650	Limit images to be resized Hi, over the time the resolution of ebook devices increased from 800x60 too full HD and even more (retine displays) What resolution should an image have? An image having a gootd resolution for 800x600 looks like a stamp on hires screens. If you assign a proportonal width like 90% may lead to a resizing where the displayed image is oversized. it looks ugly - especially indexed images. So the ideal formatting would resize the image proportional, but stop the image to be scaled larger than it is. Im archiving this by using these css rules: Code: div.cimg { width: 100%; text-align: center; margin: 1em 8px 1em 8px; } div.cimg img { width: 100%; } div.cimg + p { text-indent: 0; } This will center the image, make a margin around it, scaling the image to fit on the screen and set the indentation of the following paragraph to zero. But it will not prevent the image to be resized larger than it is. This is done by adding the max-width style to the img rule. As the width of an image varies from image to image a special css rule is necassry for each image - or each image needs to have the same resolution. To solve that the max-width style can be apllied to the img element: Code: <div class="cimg"> <img alt="" src="../Images/img07.png" style="max-width: 520px"/> </div> Now the image will be resized according to the screen size but this will stop at 520px, the width of the image itself. Still this is very time consuming even with a snippet as the snippet cant retrieve the image resolution. The Plugin below will go through every text file and will add the maxwidth style te every img element. Existing styles will be kept, if there is already a max-width style the value will be checked and corrected if necessary. I'm new to Python, especially to PIL and BS4, so i gave the version 0.0.1. Use at your own risk and always have a backup This plugin wouldnt exist without the help of Doitso and KevinH. Every comment to improve is welcomed. Requirements: Sigil 0.9.1 with internal Python enabled. The Plugin is not 2.7 enabled. Last edited by rubeus; 03-30-2016 at 04:28 AM.