Centering SVG in Kindle Previewer

[what]

Originally Posted by JSWolf

So what are you going to do for Mobi? You also have to that into account. That's the problem trying to publish on Amazon using any sort of advanced formatting as you have to deal with Mobi, KF8, and KFX.

What do you recommend that I do?

[jhowell]

When you publish a book on Amazon it will be converted to multiple formats that are each rendered a bit differently. I suggest you keep it simple in order to have the best chance of it looking good on as many devices as possible.

I looked at a book from a major publisher recently with both portrait and landscape images that render well on my Kindle device in either orientation. The code used was:

HTML:
<figure class="IMG-NOS"><img id="fig2" class="img90"
src="../Images/image00123.jpeg" title="description" alt="description"/></figure>

CSS:
figure.IMG-NOS {
	display: block;
	margin-bottom: 0em;
	margin-top: 0em;
	text-indent: 0em;
	margin-right: 0em;
	margin-left: 0em;
	text-align: center;
}

img.img90 {
	width:100%;
}

[fbrzvnrnd]

Originally Posted by jhowell

HTML:

CSS:
figure.IMG-NOS {
	display: block;
	margin-bottom: 0em;
	margin-top: 0em;
	text-indent: 0em;
	margin-right: 0em;
	margin-left: 0em;
	text-align: center;
}

ouch: text-align for a block element?

[what]

Originally Posted by fbrzvnrnd

ouch: text-align for a block element?

As I read the code, the content of the block element is text-aligned. Actually that solution is the same as the one you provided. In both cases there is a block container (either FIGURE or P) and the content of that container gets centered using text-align.

[fbrzvnrnd]

Originally Posted by what

As I read the code, the content of the block element is text-aligned. Actually that solution is the same as the one you provided. In both cases there is a block container (either FIGURE or P) and the content of that container gets centered using text-align.

It's correct: but the figure content usually does not have text as content. It could have <p> and the <p> has - as content - text. A block element inside a block element with "text-align" is not centered (or at least it shouldn't) AFAIK

[jhowell]

Originally Posted by fbrzvnrnd

It's correct: but the figure content usually does not have text as content. It could have <p> and the <p> has - as content - text. A block element inside a block element with "text-align" is not centered (or at least it shouldn't) AFAIK

This is typical code for centering images. The <img> element is not a block element and is what gets aligned. <div> would work the same for the outer wrapper, but <figure> is more semantically informative. Using <p> would also work, but is semantically inferior and could introduce a skew to the centering because of indentation.

[fbrzvnrnd]

Originally Posted by jhowell

This is typical code for centering images. The <img> element is not a block element and is what gets aligned. <div> would work the same for the outer wrapper, but <figure> is more semantically informative. Using <p> would also work, but is semantically inferior and could introduce a skew to the centering because of indentation.

To be honest I never used the text-align for a <div> or a <figure> for semantic reason: in an ebook I prefer that texts are marked with <p> or other semantic tags for text. I see the <div> more as a divider for giving structure to a document and marking areas of the document where there are no valid semantic markers. So I never used the text-align CSS property for images, because, well, images are not text. I remember there was different problems using text-align for images, maybe the newer programs handle this aspect better.

[JSWolf]

Originally Posted by jhowell

This is typical code for centering images. The <img> element is not a block element and is what gets aligned. <div> would work the same for the outer wrapper, but <figure> is more semantically informative. Using <p> would also work, but is semantically inferior and could introduce a skew to the centering because of indentation.

But <figure> doesn't work with Mobi. So why is that better to use?

[jhowell]

Originally Posted by JSWolf

But <figure> doesn't work with Mobi. So why is that better to use?

It gets ignored which results in the image rendering correctly anyway.