![]() |
#16 | |
Member
![]() Posts: 11
Karma: 10
Join Date: May 2024
Device: none
|
Quote:
This is what I have currently in Sigil. Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <title>The_Me_I_Didn't_See_-_FoundHer_Series_V1_copy-2</title> <link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" /> </head> <body id="The_Me_I_Didn-t_See_-_FoundHer_Series_V1_copy-2" lang="en-GB" xml:lang="en-GB"> <div class="_idGenObjectStyleOverride-1"> <p class="Dedication">For all the women who looked in the mirror one day </p> <p class="ParaOverride-2"><span class="CharOverride-4">and didn’t recognize the woman looking back... </span></p> <p class="ParaOverride-2"><span class="CharOverride-4">We see you.</span></p> </div> </body> </html> Im not sure how/where to add the code to keep the previous styles. Many thanks in advance...This newbie really appreciates the help!! |
|
![]() |
![]() |
![]() |
#17 |
Member
![]() Posts: 11
Karma: 10
Join Date: May 2024
Device: none
|
This is what I have in the style sheet for that section.
Code:
p.Dedication { color:#000000; font-family:"EB Garamond", serif; font-size:1em; font-style:italic; font-variant:normal; font-weight:normal; line-height:1.25; margin-bottom:0; margin-left:0; margin-right:0; margin-top:0; orphans:1; page-break-after:auto; page-break-before:always; text-align:center; text-decoration:none; text-indent:0; text-transform:none; widows:1; text-align:center; } |
![]() |
![]() |
Advert | |
|
![]() |
#18 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Wellllll...that's a right mess! InDesign is definitely NOT known for concise css...
There are a couple classes in your example that you haven't shown us the css for: _idGenObjectStyleOverride-1 CharOverride-4 Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <title>The_Me_I_Didn't_See_-_FoundHer_Series_V1_copy-2</title> <link href="css/idGeneratedStyles.css" rel="stylesheet" type="text/css" /> </head> <body id="The_Me_I_Didn-t_See_-_FoundHer_Series_V1_copy-2" lang="en-GB" xml:lang="en-GB"> <div class="_idGenObjectStyleOverride-1"> <p class="Dedication">For all the women who looked in the mirror one day </p> <p class="ParaOverride-2"><span class="CharOverride-4">and didn’t recognize the woman looking back... </span></p> <p class="ParaOverride-2"><span class="CharOverride-4">We see you.</span></p> </div> </body> </html> Without those other classes, I couldn't guarantee the exact same styling. However, InDesign IS known for repetitive, unnecessary, css... so we would be pretty safe to use the following: Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <title>The_Me_I_Didn't_See_-_FoundHer_Series_V1_copy-2</title> <style> * {text-indent:0 !important; margin:0 !important; padding:0 !important} .ded {font-family:"EB Garamond", serif; font-style:italic; font-size:1em; text-align:center} div.v-ctr {height:100%; width:100%; display:table; position:fixed} div.v-ctr div {display:table-cell; vertical-align:middle} </style> </head> <body id="The_Me_I_Didn-t_See_-_FoundHer_Series_V1_copy-2"> <div class="v-ctr"> <div> <p class="ded">For all the women who looked in the mirror one day<br/> and didn’t recognize the woman looking back...<br/> We see you.</p> </div> </div> </body> </html> If the last 2 lines in the dedication are different styling, as described by CharOverride-4, then you could put a <span> around those two lines like this: Code:
<p class="ded">For all the women who looked in the mirror one day<br/> <span class="CharOverride-4">and didn’t recognize the woman looking back...<br/> We see you.</span></p> maybe <span class="ded2"> ![]() Of course, you would need to add the span class to the <style> section in the header. Code:
<style>
* {text-indent:0 !important; margin:0 !important; padding:0 !important}
.ded {font-family:"EB Garamond", serif; font-style:italic;
font-size:1em; text-align:center}
.ded2 {whatever styling differences from CharOverride-4, if any}
div.v-ctr {height:100%; width:100%; display:table; position:fixed}
div.v-ctr div {display:table-cell; vertical-align:middle}
</style>
Last edited by Turtle91; 05-14-2024 at 06:22 AM. |
![]() |
![]() |
![]() |
#19 |
Member
![]() Posts: 11
Karma: 10
Join Date: May 2024
Device: none
|
Ahh this is great, thank you so much!
It seems to work perfectly on Sigil, but when I load it in the kindle previewer to check it doesn't work, do you have any idea why that would be? |
![]() |
![]() |
![]() |
#20 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,160
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Kindle preview is a little quirky, plus there is an actual conversion process from ePub to the proprietary kindle format (not ePub). I'd recommend loading it onto the kindle itself for checking.
MY guess...based on old information... is that the kindle previewer may be hanging up on the position:fixed. IIRC the older kindles didn't support that but now do. Kindle previewer may have not been updated??? If you see the same problem on an actual kindle then you can try using this instead: Code:
div.v-ctr {height:100vh; width:100vw; display:table} |
![]() |
![]() |
Advert | |
|
![]() |
#21 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
html, body { height:100% } Of course, with those values, only it will be showed the first page of the xhtml file, so only should be employed for a title page or similar. To avoid this issue the best is to employ -as you indicate it- height: 100vh (avoiding so html, body {100%}) but the problem now is that vh very probably won't be honored by epub2 ereaders. In some cases, when a table can't be employed, the best under epub2 is to use a svg wrapper. We have to set the height in px (for example 600 x 800), and the property preserveaspectratio="XMidYMid meet" will do all the hard work. To write the text (one can do it by hand, of course) the easiest way is to use Inkscape (all the code for the svg can be generated with Inkscape, also the size of the svg). Last edited by RbnJrg; 05-14-2024 at 02:09 PM. |
|
![]() |
![]() |
![]() |
#22 |
Sigil Developer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 8,018
Karma: 5449552
Join Date: Nov 2009
Device: many
|
All of this should probably be move to MR's epub forum so everyone benefits, not just Sigil users.
|
![]() |
![]() |
![]() |
#23 |
Member
![]() Posts: 11
Karma: 10
Join Date: May 2024
Device: none
|
Thanks so much this as really helpful... though unfortunatly I couldn't get it to work.
So in the end I just did a top margin of 50% and centred the text, which seems to work ok, not perfect, but better than it was. |
![]() |
![]() |
![]() |
#24 | ||
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,582
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
1. On epub2: a) By using a table b) By using a svg wrapper 2. On epub3 a) By using the property display: flex If your epub is a epub2 and the table method is not working for you (I can't understand why, because the answer by Turtle91 should work fine) then employ a svg wrapper: it can't fail if the device supports svg (Kindle supports it). Quote:
|
||
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Centred and scaled image not centred or scaled | AlanHK | Kindle Formats | 12 | 08-05-2020 12:35 PM |
correct interpretation of <br> with centred text | cybmole | Sigil | 23 | 08-16-2014 10:55 AM |
Authors vertically | jfbok | Library Management | 4 | 05-30-2012 12:31 PM |
Can you center vertically? | bfollowell | ePub | 10 | 07-07-2011 03:19 AM |
last line in each paragraph centred | scgf | Calibre | 9 | 09-10-2008 02:23 PM |