View Single Post
Old 01-09-2020, 10:19 AM   #1
Turtle91
A Hairy Wizard
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: 3,355
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>
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!
Turtle91 is offline   Reply With Quote