![]() |
#1 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,312
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
|
SVG not centering vertically
Oh mighty CSS guru's - lend me your wits...
I've noticed that Sigil doesn't properly display the "xMidYMid meet" function of an SVG - it would place the SVG at the top of the screen. I resigned myself that it was some QT display bug that would get fixed in some future iteration. BUT, I was working on a book this morning and saw that it was placed properly! I thought maybe it had been fixed in 1.0.0 and was all super excited. I used Sigil's Tools/Add Cover function to load my default cover template....and.... It wasn't displayed properly again! ![]() I compared my svg coding with the original (that displayed properly) and found the culprit: Works Properly: Code:
<body style="margin:0; padding:0; text-align:center; background-color:black"> <div style="margin:0; padding:0"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1076 1614" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="1076" height="1614" xlink:href="cover.jpeg"/> </svg> </div> </body> Code:
<body style="margin:0; padding:0; text-align:center; background-color:black">
<h1 style="display:none" title="Cover"/>
<div style="margin:0; padding:0">
<svg
xmlns="http://www.w3.org/2000/svg"
height="100%" width="100%"
preserveAspectRatio="xMidYMid meet" version="1.1"
viewBox="0 0 1076 1614"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="1076" height="1614" xlink:href="cover.jpeg"/>
</svg>
</div>
</body>
From what I understand, that should not allocate any display space or affect the rest of the display at all...but it apparently fiddles with something to cause the image to be displayed at the top of the screen. 1) Is this a Sigil bug? 2) Is there some other method to make Sigil recognize the page as being counted in the auto TOC? Thanks! |
![]() |
![]() |
![]() |
#2 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,478
Karma: 5703586
Join Date: Nov 2009
Device: many
|
Are you talking about how it shows in Sigil's Preview mode or how it shows in an epub e-reader here?
If Sigil only, this might be related to the QtWebEngine's change to want the css3 100vh and 100vw instead of 100% for absolute control of width and height. Please try changing your version of the svg attributes to use height="100vh" and width="100vw", and try it again. Did that change it? Last edited by KevinH; 01-09-2020 at 10:59 AM. |
![]() |
![]() |
![]() |
#3 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,478
Karma: 5703586
Join Date: Nov 2009
Device: many
|
If so, I can change the svg fixup code in PreviewWindow to allow for a possible empty h1 tag to follow the body tag.
Last edited by KevinH; 01-09-2020 at 11:00 AM. |
![]() |
![]() |
![]() |
#4 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,312
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 was referring to Sigil's preview window, but I've had the same issue with Marvin.
Interestingly, the original code displayed properly using the 100% in Preview but not in Marvin. When I changed my code (including the <h1> tag) to use the vh/vw it displayed fine in both Preview and Marvin. ![]() I wasn't aware that the 100% had been deprecated. Thanks! |
![]() |
![]() |
![]() |
#5 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,478
Karma: 5703586
Join Date: Nov 2009
Device: many
|
Only in css3 (epub3) We have a fix up routine in Sigil to auto convert for backwards compatibility. I will add in handling empty h1-h6 to the detect cover code fixup routine.
Last edited by KevinH; 01-09-2020 at 12:27 PM. |
![]() |
![]() |
![]() |
#6 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,478
Karma: 5703586
Join Date: Nov 2009
Device: many
|
This should now be fixed in master. If the Sigil code detects a Cover svg page in Preview it with 100% height and 100% width, it will temporarily adjust them behind the scenes to use 100vh and 100vw so that the Cover presents in Preview exactly as it used to under CSS 2 and epub2.
|
![]() |
![]() |
![]() |
#7 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,312
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
|
Awesome - Thanks!
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Centering svg node in xhtml | AliceWonder | ePub | 2 | 09-13-2019 12:46 AM |
Can't add cover in Calibre -- get "svg-error" (the property 'svg' should be declared) | Just some guy | Editor | 7 | 04-11-2017 09:54 PM |
Centering SVG graphics in iBooks? | FunkeXMix | ePub | 8 | 01-04-2013 09:21 PM |
How to make SVG scale properly vertically? | SBT | ePub | 10 | 12-22-2012 01:00 PM |
Can you center vertically? | bfollowell | ePub | 10 | 07-07-2011 03:19 AM |