View Single Post
Old 05-12-2024, 01:12 PM   #10
repilo
Connoisseur
repilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmosrepilo has become one with the cosmos
 
Posts: 97
Karma: 21870
Join Date: Apr 2021
Location: Spain
Device: Kobo Libra 2
Quote:
Originally Posted by Turtle91 View Post
For horizontal centering, the techniques are the same as any other text. You need to make sure you have nothing else adjusting the letters to the right… such as text-indent or maybe a margin/padding.
[...]
Another culprit to check is if the Kobo Libra is adding a text-indent because of user settings in the Kobo itself??
I can't figure out what my Kobo reader is doing in the background. You can see below in my full code that I don't do anything other than what you suggest.

Quote:
Originally Posted by theducks View Post
Centering works fin on a Libra2.
In general it does, but in this particular case you can see that it doesn't.

In summary, everything seems to work in Sigil's viewer and in Calibre's epub viewer. The problem is that on the Kobo Libra 2 this vertical alignment does not work at all in epub format (the text is stuck to the top edge of the screen), although it does work partially in kepub format: the vertical alignment is correct, but the horizontal alignment is somewhat shifted to the right.
This is the complete code I used. In Sigil it looks fine, but not in Kobo Libra 2 (converted to kepub with Calibre):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
div.v-ctr { display:table; height:100%; width:100%; position:fixed; 
	padding:0; margin:0; text-indent:0 !important; }

div.v-ctr div { display:table-cell; vertical-align:middle; 
	padding:0; margin:0; text-indent:0 !important; }

.ctr { text-align:center !important; }
</style>
</head>

<body>
  <div class="v-ctr">
    <div>
      <p>VERTICALLY CENTERED</p>

      <p class="ctr">HORIZONTALLY CENTERED</p>
    </div>
  </div>
</body>
</html>
Notice in the attached screenshot that the “VERTICALLY CENTERED” paragraph does not start at zero.
Attached Thumbnails
Click image for larger version

Name:	screen_001.png
Views:	350
Size:	29.8 KB
ID:	208224  
Attached Files
File Type: epub testV.epub (84.4 KB, 293 views)
repilo is offline   Reply With Quote