Centre images in .docx

MartinM · 04-15-2018, 12:12 PM

I'm preparing my first ebook for distribution using Calibre.
On the title page (between cover and TOC) I want the book title, author, and copyright details and a simple B/W image. I would like all these elements to be centred on the page. When I view the produced ePub file in most ebook readers this page looks OK but in others the B/W image is aligned left and the centred text in Word is all over the page.
What are the cast iron settings in Word or to use in Calibre to get everything on this page centred? (I'm not fully acquainted with html).
Thanks

DNSB · 04-15-2018, 01:14 PM

Quote:

Originally Posted by MartinM

What are the cast iron settings in Word or to use in Calibre to get everything on this page centred? (I'm not fully acquainted with html).

There are no cast iron settings for creating an epub that will display as expected on all devices. Quite a few renderers use their internal css rather than the css supplied by the publisher while others implement a minimal subset of the epub specifiction. My personal choice is that if it looks good in an ADE/RMSDK based renderer and in a Readium based renderer, any additional coding is going to be a cost item.

deback · 04-15-2018, 02:13 PM

Here's the code I use in the Calibre editor. The ePub files I edit and/or create look fine using Adobe Digital Editions.

The following is in the html file where you want the image to be placed:

<p class="image1">

<img src="img.jpg" class="image2"/>

</p>

The following are the CSS codes in the stylesheet.css file:

.image1 {
display: block;
text-align: center;
margin: 0 0;
}

.image2 {
height: 100%;
width: 100%;
}

.image3 {
height: auto;
width: auto;
}

Image2 is for full-page images.

Image3 is for smaller images.

I don't use Word to edit ebooks, since I learned how to use CSS and the Calibre editor, which I find to be much easier and quicker than trying to use Word or any other text editor to create an ePub file.

DNSB · 04-15-2018, 11:42 PM

Quote:

Originally Posted by deback

Here's the code I use in the Calibre editor. The ePub files I edit and/or create look fine using Adobe Digital Editions.

Spoiler:

I don't use Word to edit ebooks, since I learned how to use CSS and the Calibre editor, which I find to be much easier and quicker than trying to use Word or any other text editor to create an ePub file.

The problem with your code is that there are renderers that do not follow the epub spec -- any flavour of the epub spec. The "text-align: center" is disregarded as are most other style directives. Early versions of RMSDK also had issues with centering and I used the following to work around it:

Spoiler:

For your second item, it would work in most cases but can also cause horrible distortion since it totally disregards the original image aspect ratio.

My preference is to use an SVG wrapper which maintains the aspect ratio and automatically scales to the page size.

Spoiler:

The obvious disadvantage of your third example is that it depends on the context and the context of the element. Width:auto will use 100% of the containing block width while height:auto will use the full height of the child element. This also leads to an issue where your image looks fine on an old 600x800 ereader but looks like a thumbnail on a 1404x1872 ereader screen. My personal preference here to use a width: xx% and height:auto where the xx% is derived from the width of the image in pixels divided by the 600 pixel width of the older ereader screens. So a image that was 200 pixel wide would get "width: 33.3%; height: auto".

You might also want to use "alt=" otherwise epubcheck gets unhappy. You don't need to supply an alternative text for the image, a simple alt="" works.

I.e. <img alt="" class="glyphw24" src="../Images/STLogo.jpeg"/> is good, <img class="glyphw24" src="../Images/STLogo.jpeg"/> will throw an error. Epubcheck gives a "Col: 53: ERROR(RSC-005): Error while parsing file 'element "img" missing required attribute "alt"'." message.

I suspect any further discussion should be moved to a different forum before I start wandering into typography and other fun topics.

deback · 04-17-2018, 02:49 AM

As I said, David, my codes work fine with ADE. I have no desire to learn all the codes that might be required for all the different e-reader devices.

As far as the "alt" stuff, I only gave a quick example showing the classes I use. My response was NOT intended to be a complete tutorial on how to code images and how to use CSS for displaying images on all e-reader devices.

I do know that using height: 100% and width: auto will work the same as when using 100% for both--(for ADE). I don't know how images will appear on all the different devices when using all the various ways to code image sizes, and I don't care.

DNSB · 04-17-2018, 10:38 AM

Quote:

Originally Posted by deback

As I said, David, my codes work fine with ADE. I have no desire to learn all the codes that might be required for all the different e-reader devices.

As far as the "alt" stuff, I only gave a quick example showing the classes I use. My response was NOT intended to be a complete tutorial on how to code images and how to use CSS for displaying images on all e-reader devices.

I do know that using height: 100% and width: auto will work the same as when using 100% for both--(for ADE). I don't know how images will appear on all the different devices when using all the various ways to code image sizes, and I don't care.

Whereas the OP was asking about settings that would allow his ebook to display correctly on multiple devices (his cast iron settings).

For me, ADE/RMSDK, Readium and Netfront as renderers for epub and the effect that the various screen resolutions have on images are items that I run into on a regular basis. I also try to pay attention to issues in an epub that trigger epubcheck errors given that quite a few publishers will reject a book if it gives such errors regardless of what the error is.

MartinM · 04-20-2018, 08:13 AM

Thank you for the replies.
So, without getting into CSS and HTML coding, which I have no experience with, if my epub and mobi files look OK in ADE, Kindle, Kindle Previewer, Ice Cream, Readium, Edge, Kobo, UB Reader then I should not worry about a picture not being centred in Nook, Prestigia, Aldiko or Bookviser?

DNSB · 04-20-2018, 07:14 PM

Quote:

Originally Posted by MartinM

Thank you for the replies.
So, without getting into CSS and HTML coding, which I have no experience with, if my epub and mobi files look OK in ADE, Kindle, Kindle Previewer, Ice Cream, Readium, Edge, Kobo, UB Reader then I should not worry about a picture not being centred in Nook, Prestigia, Aldiko or Bookviser?

Pretty much yes. Quite a few ereader apps take a very haphazard approach to implementing the epub standard or simply use their own internal CSS. Not much you can do about those. For me ADE/RMSDK (it's embedded cousin), Readium and ACESS Netfront (Kobo licenses this for rendering epub3 files) are the ones I worry about. Generally, an epub that looks good on ADE will look pretty decent when converted to a Kindle AZW3.

MartinM · 04-21-2018, 12:39 AM

Thank you David - I wasn't aware that ereaders use different ways of reading epub files.

04-15-2018, 12:12 PM	#1
MartinM Junior Member Posts: 5 Karma: 10 Join Date: Mar 2018 Device: kindle previewer	Centre images in .docx I'm preparing my first ebook for distribution using Calibre. On the title page (between cover and TOC) I want the book title, author, and copyright details and a simple B/W image. I would like all these elements to be centred on the page. When I view the produced ePub file in most ebook readers this page looks OK but in others the B/W image is aligned left and the centred text in Word is all over the page. What are the cast iron settings in Word or to use in Calibre to get everything on this page centred? (I'm not fully acquainted with html). Thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Images in a a docx file	The Old Man	Calibre	3	09-23-2017 07:35 AM
images not imported after conversion from epub to docx using Calibre 3.6(64bit)	csridharbasis	Conversion	9	08-27-2017 10:21 PM
DOCX conversion of images to EPUB/Mobi: preserve aspect ratio?	tbrosz	Conversion	3	03-31-2014 01:56 PM
Images missing after converion from docx to epub/mobi	ahoy	Conversion	1	11-08-2013 11:40 AM
UK's Printed Electronics Technology Centre (PETEC) and the Flexible Display Centre (	Dulin's Books	News	0	02-18-2010 02:30 PM

04-15-2018, 02:13 PM	#3
deback Book E d i t o r Posts: 432 Karma: 288184 Join Date: May 2015 Device: Laptop	Here's the code I use in the Calibre editor. The ePub files I edit and/or create look fine using Adobe Digital Editions. The following is in the html file where you want the image to be placed: <p class="image1"> <img src="img.jpg" class="image2"/> </p> The following are the CSS codes in the stylesheet.css file: .image1 { display: block; text-align: center; margin: 0 0; } .image2 { height: 100%; width: 100%; } .image3 { height: auto; width: auto; } Image2 is for full-page images. Image3 is for smaller images. I don't use Word to edit ebooks, since I learned how to use CSS and the Calibre editor, which I find to be much easier and quicker than trying to use Word or any other text editor to create an ePub file.

04-17-2018, 02:49 AM	#5
deback Book E d i t o r Posts: 432 Karma: 288184 Join Date: May 2015 Device: Laptop	As I said, David, my codes work fine with ADE. I have no desire to learn all the codes that might be required for all the different e-reader devices. As far as the "alt" stuff, I only gave a quick example showing the classes I use. My response was NOT intended to be a complete tutorial on how to code images and how to use CSS for displaying images on all e-reader devices. I do know that using height: 100% and width: auto will work the same as when using 100% for both--(for ADE). I don't know how images will appear on all the different devices when using all the various ways to code image sizes, and I don't care.

04-20-2018, 08:13 AM	#7
MartinM Junior Member Posts: 5 Karma: 10 Join Date: Mar 2018 Device: kindle previewer	Thank you for the replies. So, without getting into CSS and HTML coding, which I have no experience with, if my epub and mobi files look OK in ADE, Kindle, Kindle Previewer, Ice Cream, Readium, Edge, Kobo, UB Reader then I should not worry about a picture not being centred in Nook, Prestigia, Aldiko or Bookviser?

04-21-2018, 12:39 AM	#9
MartinM Junior Member Posts: 5 Karma: 10 Join Date: Mar 2018 Device: kindle previewer	Thank you David - I wasn't aware that ereaders use different ways of reading epub files.