Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 11-02-2018, 03:20 PM   #1
Rapunzel
Junior Member
Rapunzel began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Nov 2018
Device: PocketBook Touch Lux 3
Searching for a Grand Unified Field Theory of centering block-level elements

I realize that this question has been discussed at length over many years, but I’m still searching for a way to successfully center a block of left-aligned text with an unknown width in an epub. It’s not critically important, but I like it when the ebooks in my personal library look nice.

I have tried the following things:

Margin: auto

According to the epub standard, devices are free to interpret auto as 0. I haven’t actually found one that doesn’t do this.

Outer wrapper div with text-align: center, inner wrapper div with display: inline-block and text-align-left

This one is so close to working. It centers the text beautifully on my PocketBook ereader, but the inline part of inline-block prevents page breaks. This is all right for very short fragments of poetry, even if it sometimes leads to premature page breaks, but a longer poem just cuts off at the bottom of the page. Not cool.

Same as above, except using display: inline-table, table-row, and table-cell

Same behavior and problems as above. Centers the blocks just fine, but can’t paginate.

Floating divs with +/- 50% positioning

<div style="float: left; left: 50%; position: relative;"><div style="float: left; left: -50%; position: relative;">

The problem with this one might just be my device. The divs’ contents get squashed up against the left side of the page (or right, if I used float: right and right positioning).

Transform: translateX

<div style="position: relative;"><div style="left: 50%; transform: translateX(-50%); position: absolute;">

As with any absolutely positioned element, it overlaps the content that comes after it. Also not cool.

Flex

Flex is some powerful magic in web design, but to the best of my knowledge it’s not part of the EPUB standard.

Viewport units

I’ve lost the code I used to attempt this, mostly because when I loaded a test epub onto my device and opened it up to see what happened, the reading app crashed.

At this point, I have exhausted my knowledge of CSS and Google searching. If anyone else a fresh idea, or can confirm that the Grand Unified Field Theory of centered blocks of text is out of reach, I would be grateful.
Rapunzel is offline   Reply With Quote
Old 11-02-2018, 07:08 PM   #2
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: 1,679
Karma: 11766398
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
FWIW, here is the code I use to center a block and then left-align the text. I usually use it for quotes, epigraphs, etc. I haven't had any issues with it, but I also haven't tested it on other devices/apps.

Code:
/* Centered & Left-aligned text */
div.quote       {margin:2em 0; 
                 float:left; 
                 position:relative; 
                 left:50%; 
                 clear:both}

div.quote p     {display:block; 
                 text-indent:0; 
                 font-size:.85em; 
                 text-align:left; 
                 position:relative; 
                 left:-50%; 
                 padding:0 2em; 
                 margin:0}

div.quote p.sig {margin:1em 0 0; text-align:right} /* For signature line */



<div class="quote">
<p>This is a paragraph of some sort. It can be of any length. The div will be centered on the page with the text left aligned within the div.</p>
<p>You can adjust the padding to give more/less space on either side.</p>
<p class="sig">From the <em>Memoirs of Dion</em></p>
</div>
Cheers,
Turtle91 is offline   Reply With Quote
Old 11-03-2018, 01:30 PM   #3
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 893
Karma: 3273787
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Rapunzel View Post
...I’m still searching for a way to successfully center a block of left-aligned text with an unknown width in an epub.
According to the example you posted about the method you're currently using, actually you are using a width of 100% and with padding, you are adding some space on left and right margins. So, instead of using "padding" you can use the property "width" (i.e. 90%) and margins (left and right) of 5%.

Code:
/* Centered & Left-aligned text */
div.quote {
    margin: 2em 5%;
    width: 90%;
}

div.quote p {
    text-indent: 0;
    font-size: .85em;
    text-align: left;
    margin: 0;
}

div.quote p.sig {
    margin: 1em 0 0;
    text-align: right;
} /* For signature line */

Code:
  <div class="quote">
    <p>This is a paragraph of some sort. It can be of any length. The div will be centered on the page with the text left aligned within the div.</p>

    <p>You can adjust the width of the block (and margins) to give more/less space on either side.</p>

    <p class="sig">From the <em>Memoirs of Dion</em></p>
  </div>
Click image for larger version

Name:	Image1.png
Views:	29
Size:	116.8 KB
ID:	167419

Of course, the width of the text block plus left and right margins must be 100%

Regards
Rubén
RbnJrg is offline   Reply With Quote
Old 11-04-2018, 04:59 AM   #4
Klecks
Enthusiast
Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.
 
Klecks's Avatar
 
Posts: 33
Karma: 59154
Join Date: May 2010
Location: Stuttgart, Germany
Device: Kobo H2O, PocketBook Touch HD, Tolino Vision 4
The method "floating divs" works with the calibre editor and sigil, but not for ADE. (I tried ADE 2.0.1)
The text in ADE gets squashed against the left side of the page. (see first example)
The method "Outer wrapper div with text-align: center, inner wrapper div with display: inline-block and text-align-left" works for me (see second example), but only for short text fragments. Long text is running off page.
Sorry, I have no solution for this problem.

Regards
Klecks.
Attached Thumbnails
Click image for larger version

Name:	floating_divs.JPG
Views:	23
Size:	256.3 KB
ID:	167427   Click image for larger version

Name:	wrapper_divs.JPG
Views:	22
Size:	261.1 KB
ID:	167428  
Klecks is offline   Reply With Quote
Old 11-04-2018, 05:46 AM   #5
Klecks
Enthusiast
Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.Klecks never is beset by a damp, drizzly November in his or her soul.
 
Klecks's Avatar
 
Posts: 33
Karma: 59154
Join Date: May 2010
Location: Stuttgart, Germany
Device: Kobo H2O, PocketBook Touch HD, Tolino Vision 4
update:

I just tried the "floating divs" method on my eBook readers (ADE, up-to-date firmware).
Tolino has the text squashed against the left side of the page.
The Pocketbook has the text running off the page (see screenshot).

Klecks.
Attached Thumbnails
Click image for larger version

Name:	Pocketbook.jpg
Views:	22
Size:	224.4 KB
ID:	167430  
Klecks is offline   Reply With Quote
Old 11-05-2018, 06:12 PM   #6
Rapunzel
Junior Member
Rapunzel began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Nov 2018
Device: PocketBook Touch Lux 3
Sorry I haven't been responding: work got super busy with a client deadline.

The specific use case I have is poetry that I want to center on the page. So solutions like RbnJrg's aren't exactly what I'm looking for. I don't want to put a width on the text because it'll either be too narrow (forcing line breaks even though there appears to be plenty of available whitespace left on the page) or too wide (text is off-center). I've used the margin + width + margin method successfully on quoted blocks of prose text. It's just the poems, with short unpredictable line lengths that I'm stuck on.

@Klecks: I know :/ I had high hopes for the floating divs method. I mocked it up in an HTML file that Chrome displayed perfectly, and the CSS is simple enough that I hoped my PocketBook would support it. Sadly, no. And like you said, inline-block only works for shorter pieces of text.

At this point I'm about ready to conclude that there is no nice, pretty, reliable way to center poetry on the page. Phooey.
Rapunzel is offline   Reply With Quote
Old 11-05-2018, 09:01 PM   #7
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 893
Karma: 3273787
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Rapunzel View Post
At this point I'm about ready to conclude that there is no nice, pretty, reliable way to center poetry on the page. Phooey.
Maybe there could be something. Please, post an example of the poetry you want to center.
RbnJrg is offline   Reply With Quote
Old 11-07-2018, 11:37 AM   #8
Rapunzel
Junior Member
Rapunzel began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Nov 2018
Device: PocketBook Touch Lux 3
Here's a snippet of "The Queen of Air and Darkness" by Poul Anderson. My ereader's font settings are usually but not always Bookerly at 25pt. The poem cuts off near the end of the fifth stanza.

Code:
<html>
<head>
	<title>Poem test</title>
	
	<style type="text/css">
		p {
		  margin: 0;
		  padding-bottom: 10pt;
		  text-indent: 15pt;
		}
		
		p.hang {
		  padding: 0;
		  margin-left: 15pt;
		  text-indent: -15pt;
		}
		
		div.blockwrapper {
		  text-align: center;
		}
		
		div.blockcontent {
		  display: inline-block;
		  text-align: left;
		}
	</style>
<head>

<body>
	<div class="blockwrapper">
		<div class="blockcontent">
			<p class="hang">“It was the ranger Arvid rode</p>
			<p class="hang">homeward through the hills</p>
			<p class="hang">among the shadowy shiverleafs,</p>
			<p class="hang">along the chiming rills.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“The night wind whispered around him</p>
			<p class="hang">with scent of brok and rue.</p>
			<p class="hang">Both moons rose high above him</p>
			<p class="hang">and hills aflash with dew.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“And dreaming of that woman</p>
			<p class="hang">who waited in the sun,</p>
			<p class="hang">he stopped, amazed by starlight,</p>
			<p class="hang">and so he was undone.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“For there beneath a barrow</p>
			<p class="hang">that bulked athwart a moon,</p>
			<p class="hang">the Outling folk were dancing</p>
			<p class="hang">in glass and golden shoon.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“The Outling folk were dancing</p>
			<p class="hang">like water, wind and fire</p>
			<p class="hang">to frosty-ringing harpstrings,</p>
			<p class="hang">and never did they tire.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“To Arvid came she striding</p>
			<p class="hang">from where she watched the dance,</p>
			<p class="hang">the Queen of Air and Darkness,</p>
			<p class="hang">with starlight in her glance.</p>
			<p><i>The dance weaves under the firethorn.</i></p>

			<p class="hang">“With starlight, love and terror</p>
			<p class="hang">in her immortal eye,</p>
			<p class="hang">the Queen of Air and Darkness—”</p>
		</div>
	</div>
</body>
</html>
Rapunzel is offline   Reply With Quote
Old 11-10-2018, 12:22 PM   #9
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: 1,679
Karma: 11766398
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
Just an aside about class names...

I find it much easier to NOT give a class name to the predominate tag (eg <p>) and only give a class to those items that are the exception (eg <p class="last">). That avoids clutter/bloat and makes it much easier for a human editor to determine when there is something special happening.

For example:

Code:
<html>
<head>
	<title>Poem test</title>
	
	<style type="text/css">
		p.last {
		  margin: 0;
		  padding-bottom: 10pt;
		  text-indent: 15pt;
		}
		
		p {
		  padding: 0;
		  margin-left: 15pt;
		  text-indent: -15pt;
		}
		
		div.blockwrapper {
		  text-align: center;
		}
		
		div.blockcontent {
		  display: inline-block;
		  text-align: left;
		}
	</style>
<head>

<body>
	<div class="blockwrapper">
		<div class="blockcontent">
			<p>“It was the ranger Arvid rode</p>
			<p>homeward through the hills</p>
			<p>among the shadowy shiverleafs,</p>
			<p>along the chiming rills.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“The night wind whispered around him</p>
			<p>with scent of brok and rue.</p>
			<p>Both moons rose high above him</p>
			<p>and hills aflash with dew.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“And dreaming of that woman</p>
			<p>who waited in the sun,</p>
			<p>he stopped, amazed by starlight,</p>
			<p>and so he was undone.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“For there beneath a barrow</p>
			<p>that bulked athwart a moon,</p>
			<p>the Outling folk were dancing</p>
			<p>in glass and golden shoon.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“The Outling folk were dancing</p>
			<p>like water, wind and fire</p>
			<p>to frosty-ringing harpstrings,</p>
			<p>and never did they tire.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“To Arvid came she striding</p>
			<p>from where she watched the dance,</p>
			<p>the Queen of Air and Darkness,</p>
			<p>with starlight in her glance.</p>
			<p class="last"><i>The dance weaves under the firethorn.</i></p>

			<p>“With starlight, love and terror</p>
			<p>in her immortal eye,</p>
			<p>the Queen of Air and Darkness—”</p>
		</div>
	</div>
</body>
</html>
FWIW...

Cheers,
Turtle91 is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Searching a yes/no field ficbot Calibre 19 11-26-2015 01:44 AM
HTML input -<b> and <i> being converted to block elements? fluxcore Conversion 2 02-18-2011 10:36 PM
Searching in binary field Manichean Calibre 2 06-14-2010 07:29 AM
Searching on Ratings Field nynaevelan Calibre 3 05-29-2010 06:44 PM
Centering and adjusting the width of a block Jellby ePub 3 04-09-2009 01:38 PM


All times are GMT -4. The time now is 10:00 AM.


MobileRead.com is a privately owned, operated and funded community.