possible to have text arranged like this?

u238110 · 02-23-2015, 10:09 AM

This can be described as both text items as approaching the center....

Toxaris · 02-23-2015, 12:54 PM

Real vertical alignment that works on all devices is not really possible, only approximations. In some devices it can be achieved in some way.

u238110 · 02-23-2015, 01:56 PM

I'm not concerned about device compatibility. I'm just concerned about good code. I'm a purist. If there's a problem and it's the device's fault, well hopefully one day devices will be more sophisticated.

I have this "dead center" code which is close.. I'm basically looking for the split up version of this "dead center" code. It's almost as if I want an invisible entity in the dead center and the two text items are gravitating towards it.

Code:

<p style="float:none;margin:50vh auto 0;text-align:center;-webkit-transform: translateY(-50%);transform: translateY(-50%)">test</p>

...

RbnJrg · 02-23-2015, 02:30 PM

Quote:

Originally Posted by u238110

I'm not concerned about device compatibility. ...

In that case is perfectly possible. Use the following code:

1. In your .css stylesheet write:

Code:

html, body {
   height: 100%;
}

#container {
   display: table;
   height: 100%;
   width: 100%;
   border: 5px solid;
}

.row {
   display: table-row;
   height: 33%;
}

.cell {
   display: table-cell;
   height: 33%%;
   vertical-align: bottom;
   text-align: center;
}

2. And in your .xhtml file write:

Code:

<body>
<div id="container">
   <div class="row">
       <p class="cell">text</p>
   </div>
   <div class="row">
       <p class="cell">text</p>
   </div>
   <div class="row">
       <p class="cell">&nbsp;</p>
   </div>
</div>
</body>

This is how it looks in Sigil:

Click image for larger version

Name: Image1.png
Views: 215
Size: 78.0 KB
ID: 135215

As you can see, I use a model of three rows and a "vertical-align: bottom". You can bring the text to the center of the screen all you want by changing the height of the rows (for example with the first and third rows with a height of 40% and the middle row with a height of 20% the text will be nearer the center). Of course, take in count that in order to use this code on ADE, you must convert the .epub I attach as epub3 and to use ADE 4 (or higher).

Regards
Rubén

u238110 · 02-23-2015, 02:54 PM

Thanks a lot for your help, however it doesn't seem to work. The raw code appears in the preview window. I even found an option called Link Stylesheets... and that didn't fix it...

Toxaris · 02-23-2015, 03:59 PM

Quote:

Originally Posted by u238110

Thanks a lot for your help, however it doesn't seem to work. The raw code appears in the preview window. I even found an option called Link Stylesheets... and that didn't fix it...

Of course you need to paste the code in Codeview, not Bookview...

RbnJrg · 02-23-2015, 04:04 PM

Quote:

Originally Posted by u238110

Thanks a lot for your help, however it doesn't seem to work. The raw code appears in the preview window. I even found an option called Link Stylesheets... and that didn't fix it...

Sorry, I don't understand you

What thing doesn't work? The code I wrote, does work on Sigil; you can see the screenshot of my previous post. Also in that post, you can check the respective .epub. Open that .epub in Sigil and you'll see the code is working (also it works on Kindle -new models of Kindle, those that support .kf8- and iPad; regarding ADE read what I wrote in my previous post).

02-23-2015, 10:09 AM	#1
u238110 Connoisseur Posts: 91 Karma: 10 Join Date: Feb 2014 Location: Long Island, NY Device: Aura, N514KUBKKEP, 4.7.10.413	possible to have text arranged like this? This can be described as both text items as approaching the center.... Attached Thumbnails Last edited by u238110; 02-23-2015 at 10:32 AM.

02-23-2015, 01:56 PM	#3
u238110 Connoisseur Posts: 91 Karma: 10 Join Date: Feb 2014 Location: Long Island, NY Device: Aura, N514KUBKKEP, 4.7.10.413	I'm not concerned about device compatibility. I'm just concerned about good code. I'm a purist. If there's a problem and it's the device's fault, well hopefully one day devices will be more sophisticated. I have this "dead center" code which is close.. I'm basically looking for the split up version of this "dead center" code. It's almost as if I want an invisible entity in the dead center and the two text items are gravitating towards it. Code: <p style="float:none;margin:50vh auto 0;text-align:center;-webkit-transform: translateY(-50%);transform: translateY(-50%)">test</p> ... Last edited by u238110; 02-23-2015 at 02:06 PM.

02-23-2015, 02:54 PM	#5
u238110 Connoisseur Posts: 91 Karma: 10 Join Date: Feb 2014 Location: Long Island, NY Device: Aura, N514KUBKKEP, 4.7.10.413	Thanks a lot for your help, however it doesn't seem to work. The raw code appears in the preview window. I even found an option called Link Stylesheets... and that didn't fix it... Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to Copy & Paste text from Chinese text PDF?	E-Books	PDF	4	08-09-2014 09:22 AM
Text formatting issues when creating IDs/hyperlinking text	rnuss	Sigil	2	09-28-2013 06:49 AM
Need help w/very simple task: page of Word text > Kindle text I can share w/friends	kearnine	Conversion	1	10-17-2012 08:25 PM
How to make Amazon Kindle Text to Speech skip over some text	xsaero00	Kindle Developer's Corner	3	06-18-2011 07:09 PM
Spiritual Various: KJV Psalms and Proverbs arranged for daily reading.	Rootman	ePub Books	2	02-05-2010 08:50 PM

02-23-2015, 12:54 PM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Real vertical alignment that works on all devices is not really possible, only approximations. In some devices it can be achieved in some way.