SVG not centering vertically

Turtle91 · 01-09-2020, 10:19 AM

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>

My Coding that doesn't work:

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>

The problem was I had added the <h1> tag in order to enable Sigil's auto TOC feature. I thought I was being sneaky by using the style="display:none".

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!

KevinH · 01-09-2020, 10:32 AM

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?

KevinH · 01-09-2020, 10:34 AM

If so, I can change the svg fixup code in PreviewWindow to allow for a possible empty h1 tag to follow the body tag.

Turtle91 · 01-09-2020, 11:07 AM

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!

KevinH · 01-09-2020, 12:05 PM

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.

KevinH · 01-09-2020, 03:35 PM

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.

Turtle91 · 01-09-2020, 03:43 PM

Awesome - Thanks!

01-09-2020, 10:19 AM	#1
Turtle91 A Hairy Wizard Posts: 3,095 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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> My Coding that doesn't work: 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> The problem was I had added the <h1> tag in order to enable Sigil's auto TOC feature. I thought I was being sneaky by using the style="display:none". 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!

01-09-2020, 10:32 AM	#2
KevinH Sigil Developer Posts: 7,644 Karma: 5433388 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.

01-09-2020, 10:34 AM	#3
KevinH Sigil Developer Posts: 7,644 Karma: 5433388 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.

01-09-2020, 12:05 PM	#5
KevinH Sigil Developer Posts: 7,644 Karma: 5433388 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.

Similar Threads
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

01-09-2020, 11:07 AM	#4
Turtle91 A Hairy Wizard Posts: 3,095 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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!

01-09-2020, 03:35 PM	#6
KevinH Sigil Developer Posts: 7,644 Karma: 5433388 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.

01-09-2020, 03:43 PM	#7
Turtle91 A Hairy Wizard Posts: 3,095 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Awesome - Thanks!