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

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 02-18-2013, 04:50 PM   #1
Turtle91
Guru
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: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
QT5 and image height

The problem of images not scaling correctly was mentioned somewhere before, but determined to be a QT5 bug. I've been messing with it and I don't think it's a bug - I think it is QT5 supporting HTML5.

I wrote this up as a bug report over on the QT wiki...
Quote:
When you set the height attribute on an HTML image tag to a percent, the displayed height is incorrect. QT calculates the height as a percent of the IMAGE height, instead of a percent of the CONTAINER height. It performs proper scale calculations for the width and displays the width properly based on what the height SHOULD be. This means you get a distorted image.

eg.
image dimensions: 600x800 pixels (WxH)
html tag: <div><img height="100%" src="image.jpg" alt="" /></div>

results in an image displayed at 800 pixels in height regardless of the size of the container/window and a width properly scaled for the size what the height SHOULD be.
If the parent container is 400x600 pixels then the image displays 450x800
If the parent container is 200x1600 pixels then the image displays 1200x800
If the parent container is 800x400 pixels then the image displays 300x800
...but before I submitted it, I saw something on w3Schools: with HTML5 you CAN'T use a percentage when giving the height attribute a value...it MUST be in pixels.
Quote:
Differences Between HTML 4.01 and HTML5

In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
So, I removed the height attribute from my img tag and all the scaling worked properly....
Quote:
h1[title=Cover] {margin:0 auto; text-align:center}
.image {max-height:100%; max-width:100%}

<h1 title="Cover"><img class="image" alt="cover" src="../Images/cover.jpg" /></h1>
...Except...

Now I can't get a properly scaled image to fill the entire screen (height="100%") unless the source image is larger than the container/screen.

If I enter an over-sized height in pixels (height="4000px") and rely on the max-height:100% to limit the height (which it does) I end up with an image that is the correct height but stretched to the width of the container/screen - not properly scaled.

Google gives me advice to use the CANVAS tag, but I didn't think Sigil supported all of that yet.

Anyone have an idea on how to fix this?

Last edited by Turtle91; 02-18-2013 at 08:34 PM.
Turtle91 is offline   Reply With Quote
Old 02-18-2013, 05:19 PM   #2
Turtle91
Guru
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: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
I hate it when you go searching forever on a problem....then you ask a question...and 2 minutes later you get an idea...

I didn't think this would work because background-size is a CSS3 attribute...but it does...at least in Sigil.

I have this as my cover.html file:
Quote:
<body style='background:url("../Images/cover.jpg") no-repeat fixed center center; background-size:contain'>
<h1 title="Cover"></h1>
</body>
Of course kindle Previewer doesn't support Max-Height and Max-Width...it strips them out...and ADE displayed fine when it opens...but then barfs when I use the TOC to go back to the cover...Sony Reader accepts it, but doesn't center the image...

so...there is hopefully a better way of doing it??

Last edited by Turtle91; 02-18-2013 at 05:55 PM.
Turtle91 is offline   Reply With Quote
Old 02-18-2013, 09:44 PM   #3
user_none
Sigil & calibre developer
user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.user_none ought to be getting tired of karma fortunes by now.
 
user_none's Avatar
 
Posts: 2,465
Karma: 986493
Join Date: Jan 2009
Location: Florida, USA
Device: Nook STR
Quote:
Originally Posted by Turtle91
I think it is QT5 supporting HTML5.
This would still be a Qt bug because Qt should not be using HTML 5 rendering with XHTML 1.1 content. This the purpose of the doctype...
user_none is offline   Reply With Quote
Old 02-20-2013, 03:35 PM   #4
Arios
A curiosus lector!
Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.
 
Arios's Avatar
 
Posts: 316
Karma: 763734
Join Date: Jun 2012
Device: Sony PRS-T1, Kobo Touch
Turtle91,

Did you try to play with auto settings?

I'm getting good results with:

Code:
img {
height:auto;
max-width:100%; 
}
on Sigil and eReaders.
Arios is offline   Reply With Quote
Old 02-20-2013, 04:23 PM   #5
Turtle91
Guru
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: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Quote:
Originally Posted by Arios View Post
Turtle91,

Did you try to play with auto settings?

I'm getting good results with:

Code:
img {
height:auto;
max-width:100%; 
}
on Sigil and eReaders.
Yes, I played with those for a bit. That definitely works for keeping the image in the correct aspect ratio. Thanks!

However, AUTO will only go up to 100% of the actual image height. That works great if the image is larger than the container/display - it will scale down appropriately. But it does NOT allow you to enlarge an image that is smaller to fill the screen.

I guess one would ask, "Why do you want to enlarge an image - it will just lose resolution and start to look yucky." That's true. But most of the images I have were originally scaled down to about 600 pixels high. I could zoom in on them a little without having them look too bad in the previous version, now I can't...and it appears I won't be able to when HTML5 gets fully implemented.

One quirk I found with Sigil is that the image does not automatically re-size when a pane is opened, taking up some of the viewer real estate.

eg. I have an image (cover.html) filling the entire height of the BookView pane (with the F/R) pane closed. When I open the F/R pane, the image does not resize. If the F/R pane was open when I fit the image to the BV pane then when I close the F/R pane, the image re -sizes properly. The same thing applies when I am looking at the Preview pane. Re-sizing of the image is correct when I drag the Inspector window down, but not when I drag it up. It will only refresh the preview image when I select a different tab, or switch from BV to CV.

Cheers!
Turtle91 is offline   Reply With Quote
Old 02-20-2013, 04:50 PM   #6
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: 37,884
Karma: 18755150
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Arios View Post
Turtle91,

Did you try to play with auto settings?

I'm getting good results with:

Code:
img {
height:auto;
max-width:100%; 
}
on Sigil and eReaders.
Let's say the image was the cover. That code would not work well at all. In fact, it's the wrong way around. For the cover, you want the height to be 100%. Also, if it's a map, you also want the height to be 100%. In a number of cases, that's backwards.
JSWolf is offline   Reply With Quote
Old 02-20-2013, 04:55 PM   #7
Turtle91
Guru
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: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Quote:
Originally Posted by JSWolf View Post
Let's say the image was the cover. That code would not work well at all. In fact, it's the wrong way around. For the cover, you want the height to be 100%. Also, if it's a map, you also want the height to be 100%. In a number of cases, that's backwards.
That's true...mostly...the code actually works to get it to display properly - if the image is larger than the container....that's the problem we are having...if you use "height=100%" then the display is all whacked - the aspect ratio is all tweaked. Apparently HTML5 no longer supports a % in the height/width attributes, ONLY pixels. So we are trying to figure out how to get it to display properly...an effective height=100% and yet stay scaled properly.
Turtle91 is offline   Reply With Quote
Old 02-20-2013, 05:33 PM   #8
Arios
A curiosus lector!
Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.
 
Arios's Avatar
 
Posts: 316
Karma: 763734
Join Date: Jun 2012
Device: Sony PRS-T1, Kobo Touch
@Turtle91

You have deciphered exactly what I meant and the purpose of my post about new specifications of HTML5. We have to find solutions to replace % and do some experimentations. And my suggestion is pertaining to Sigil.

You know some days the english.dll has hard time to load in my brain, so I wrote as short as I can.

Have a nice day!
Arios is offline   Reply With Quote
Old 02-20-2013, 06:13 PM   #9
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: 37,884
Karma: 18755150
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Turtle91 View Post
That's true...mostly...the code actually works to get it to display properly - if the image is larger than the container....that's the problem we are having...if you use "height=100%" then the display is all whacked - the aspect ratio is all tweaked. Apparently HTML5 no longer supports a % in the height/width attributes, ONLY pixels. So we are trying to figure out how to get it to display properly...an effective height=100% and yet stay scaled properly.
The solution is to wrap the image in an SVG container and it will work. It works in Sigil and it works in ADE.
JSWolf is offline   Reply With Quote
Old 02-20-2013, 08:51 PM   #10
Turtle91
Guru
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: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Quote:
Originally Posted by JSWolf View Post
The solution is to wrap the image in an SVG container and it will work. It works in Sigil and it works in ADE.
Uggghh.... I was hoping to stay away from SVG...I haven't figured it out yet, and when I learned that HTML5 can use the <canvas> tag, I was hoping I didn't have to. Do you know any SVG tutorial sites off hand?
Turtle91 is offline   Reply With Quote
Old 02-20-2013, 09:06 PM   #11
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: 37,884
Karma: 18755150
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Turtle91 View Post
Uggghh.... I was hoping to stay away from SVG...I haven't figured it out yet, and when I learned that HTML5 can use the <canvas> tag, I was hoping I didn't have to. Do you know any SVG tutorial sites off hand?
Here is SVG code for you to play with...

Code:
<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 482 775" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="775" width="482" xlink:href="../Images/cover.jpeg"></image>
    </svg>
  </div>
You'll need to change the href and the numbers to match your image. Also, you might need a class for the div that has no margins.
JSWolf is offline   Reply With Quote
Old 02-20-2013, 09:34 PM   #12
Turtle91
Guru
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: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Cool! That works!

Thanks!

Last edited by Turtle91; 02-20-2013 at 10:58 PM.
Turtle91 is offline   Reply With Quote
Old 02-20-2013, 10:25 PM   #13
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: 37,884
Karma: 18755150
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Turtle91 View Post
Cool! That works!

Thanks!
Did you need a class with no margins?

You are very welcome.
JSWolf is offline   Reply With Quote
Old 02-20-2013, 10:25 PM   #14
Arios
A curiosus lector!
Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.Arios ought to be getting tired of karma fortunes by now.
 
Arios's Avatar
 
Posts: 316
Karma: 763734
Join Date: Jun 2012
Device: Sony PRS-T1, Kobo Touch
Turtle91,

Of course for a cover it is better to use:

Code:
<image height="800" width="600" xlink:href="../Images/cover.png"></image>
Arios is offline   Reply With Quote
Old 02-20-2013, 10:30 PM   #15
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: 37,884
Karma: 18755150
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Arios View Post
Turtle91,

Of course for a cover it is better to use:

Code:
<image height="800" width="600" xlink:href="../Images/cover.png"></image>
No it would not. It's best to use the actual image's numbers due to a bug in an older version of ADE (no idea if the newer versions have this bug). If you use numbers that are not the actual image's numbers, you get an incorrect aspect ratio. It will probably look fine in Sigil, but it may not in ADE and it won't if the version matches the version used in the 505.
JSWolf is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Line height insanity! Kamikuza Conversion 6 10-25-2012 12:56 AM
Image height in div soparch ePub 5 03-29-2012 02:18 PM
What image height causes images to fill the screen? karenbryant ePub 7 01-04-2012 05:23 AM
Advice about line-height Julien Pham Sigil 2 12-22-2011 10:05 AM
Max-Height theducks Sigil 6 09-02-2010 06:40 PM


All times are GMT -4. The time now is 12:24 AM.


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