View Full Version : My texts remain black in "night" mode


hk009
06-18-2013, 09:33 AM
Hello,

I created an ebook in InDesign and exported it into an ePub file so that I can fix layout problems with Sigil (such as wrong fonts, extra spaces, etc.).

I managed to save (in Sigil) my ebook in ePub format, trying to keep up the layout clean as it was in inDesign (which is not that easy with the html used in Sigil).

Now, the problem is that: When my ebook (ePub format) is read on tablets and it goes into "night" mode (= inversion of colors, black background and white text), my text remains completely black and as you can imagine ... black on black, you can not see anything!

I'd like to know if someone has a trick or some tips to help me to find out how to fix this ... I do not know where the error is coming from ... the InDesign conversion? CSS used in Sygil? ePub format?

Thanks for your attention and your help!

Toxaris
06-18-2013, 10:35 AM
InDesign creates a stylesheet in the ePUB with a lot of settings. A lot of those settings can (and should) be deleted. While I haven't seen the stylesheet in you book, I can almost garantuee that there is a text color defined in it.
That is one of those settings that can (and should) be deleted. Let the reader determine the main color of the text. That is probably blocking the color in night mode.

hk009
06-18-2013, 11:11 AM
Thank you for your help!:thumbsup: May I ask u to take a look to my stylesheet? I'm not sure about the right lines to delete (maybe the "color:#000000?). I'm not really good with html and I worked so hard with my ePub that i'm scared to mess everything up lol


@font-face {
font-family:"Adobe Garamond Pro Bold";
font-style:normal;
font-weight:bold;
src : url("../Fonts/AGaramondPro-Bold.otf");
}
@font-face {
font-family:"Adobe Garamond Pro Bold";
font-style:italic;
font-weight:bold;
src : url("../Fonts/AGaramondPro-BoldItalic.otf");
}
@font-face {
font-family:"Adobe Garamond Pro Bold";
font-style:oblique;
font-weight:bold;
src : url("../Fonts/AGaramondPro-BoldItalic.otf");
}
@font-face {
font-family:"Adobe Garamond Pro";
font-style:italic;
font-weight:normal;
src : url("../Fonts/AGaramondPro-Italic.otf");
}
@font-face {
font-family:"Adobe Garamond Pro";
font-style:oblique;
font-weight:normal;
src : url("../Fonts/AGaramondPro-Italic.otf");
}
@font-face {
font-family:"Adobe Garamond Pro";
font-style:normal;
font-weight:normal;
src : url("../Fonts/AGaramondPro-Regular.otf");
}
@font-face {
font-family:"Futura Std Book";
font-style:normal;
font-weight:normal;
src : url("../Fonts/FuturaStd-Book.otf");
}
@font-face {
font-family:"Futura Std Condensed Light";
font-style:normal;
font-weight:300;
font-stretch:condensed;
src : url("../Fonts/FuturaStd-CondensedLight.otf");
}
@font-face {
font-family:"Futura Std Medium";
font-style:normal;
font-weight:650;
src : url("../Fonts/FuturaStd-Heavy.otf");
}
@font-face {
font-family:"Futura Std Medium";
font-style:italic;
font-weight:650;
src : url("../Fonts/FuturaStd-HeavyOblique.otf");
}
@font-face {
font-family:"Futura Std Medium";
font-style:oblique;
font-weight:650;
src : url("../Fonts/FuturaStd-HeavyOblique.otf");
}
@font-face {
font-family:"Futura Std Medium";
font-style:normal;
font-weight:500;
src : url("../Fonts/FuturaStd-Medium.otf");
}
@font-face {
font-family:"Minion Pro";
font-style:normal;
font-weight:normal;
src : url("../Fonts/MinionPro-Regular.otf");
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
td, th {
border-style:solid;
border-width:0px;
}
table {
text-align:center;
}
li {
display:block;
}
body {
-epub-hyphens:auto;
-webkit-hyphens:auto;
}
@page {
margin : 30px 30px 30px 30px;
}
table.Tableau-simple {
border-color:#000000;
border-width:0px;
text-align:center;
margin-bottom:20px;
}
p.Auteur {
-epub-ruby-position:over;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:1.7em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1;
margin-bottom:200px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
p.Titre-livre {
-epub-ruby-position:over;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:3em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
p.Sos-Titre-Livre {
-epub-ruby-position:over;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:2.5em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1;
margin-bottom:200px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
p.Editions {
-epub-ruby-position:over;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1;
margin-bottom:50px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
h1.Chapitre {
-epub-ruby-position:over;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:1.333em;
font-style:normal;
font-weight:bold;
line-height:1;
margin-bottom:100px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
text-transform:uppercase;
}
h2.Sous-chapitre {
-epub-ruby-position:over;
color:#000000;
font-family:"Adobe Garamond Pro Bold", serif;
font-size:1.5em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1.143;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
h3.Annexe {
-epub-ruby-position:over;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:1.167em;
font-style:normal;
font-variant:normal;
font-weight:650;
line-height:1.143;
margin-bottom:57px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
p.Petit-titre {
-epub-ruby-position:over;
color:#000000;
font-family:"Adobe Garamond Pro Bold", serif;
font-size:1.2em;
font-style:italic;
font-variant:normal;
font-weight:bold;
line-height:1.2;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
text-align:right;
text-decoration:none;
text-indent:0px;
}
p.texte-principal-lettrine {
-epub-hyphens:none;
-epub-ruby-position:over;
-webkit-hyphens:none;
color:#000000;
font-family:"Adobe Garamond Pro", serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.333;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
text-align:justify;
text-decoration:none;
text-indent:0px;
}
p.Normal {
-epub-hyphens:none;
-epub-ruby-position:over;
-webkit-hyphens:none;
color:#000000;
font-family:"Adobe Garamond Pro", serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.333;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
text-align:justify;
text-decoration:none;
text-indent:18px;
}
p.Paragraphe-standard {
-epub-ruby-position:over;
color:#000000;
font-family:"Adobe Garamond Pro", serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.2;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
p.Titre {
-epub-hyphens:none;
-epub-ruby-position:over;
-webkit-hyphens:none;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1.333;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:left;
text-decoration:none;
text-indent:0px;
}
p.Titre-2 {
-epub-hyphens:none;
-epub-ruby-position:over;
-webkit-hyphens:none;
color:#000000;
font-family:"Futura Std Medium", sans-serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1.333;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
p.Texte-principal {
-epub-ruby-position:over;
color:#000000;
font-family:"Adobe Garamond Pro", serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.333;
margin-bottom:25px;
margin-left:0px;
margin-right:0px;
text-align:justify;
text-decoration:none;
text-indent:0px;
}
p.Texte-center {
-epub-ruby-position:over;
color:#000000;
font-family:"Adobe Garamond Pro", serif;
font-size:1em;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.333;
margin-bottom:25px;
margin-left:0px;
margin-right:0px;
text-align:center;
text-decoration:none;
text-indent:0px;
}
p.signature {
-epub-hyphens:none;
-epub-ruby-position:over;
-webkit-hyphens:none;
color:#000000;
font-family:"Adobe Garamond Pro", serif;
font-size:1em;
font-style:italic;
font-variant:normal;
font-weight:normal;
line-height:1.333;
margin-bottom:10px;
margin-left:0px;
margin-right:20px;
text-align:right;
text-decoration:none;
text-indent:18px;
}
span.lettrine {
font-size:5.022em;
float:left;
line-height:1;
margin-top:-0.059em;
margin-right:0.05em;
-adobe-float-keep:column;
margin-bottom:-0.275em;
font-family:"Adobe Garamond Pro Bold", serif;
font-weight:bold;
font-style:normal;
}
span.eme {
font-family:"Adobe Garamond Pro";
font-size:0.60em;
font-style:normal;
font-weight:normal;
vertical-align:super;
}
div.frame-1 {
text-align:center;
vertical-align:bottom;
width:100%;
}


:thanks:

Toxaris
06-18-2013, 02:36 PM
I think the stylesheet can be reduced 60-80%. Indeed the color:#000000; iscausing this particulair issue.

Turtle91
06-18-2013, 10:42 PM
I think the stylesheet can be reduced 60-80%. Indeed the color:#000000; iscausing this particulair issue.
:2thumbsup

Definitely 60-80% reduction in this one...lots of duplicated/unnecessary code...

The good news is that it is only 1 file and only adds a few K to the file size...it just gets monotonous reading it... lol

hk009
06-19-2013, 05:35 AM
Yay thanks a lot!:2thumbsup

Could u perhaps tell me your advice to reduce my stylesheet to 60-80% of its content?

Because I'm not really good with html, i made this with tutorials and some automatic "converters" :o :p

Thanks again for your help guys, i've tried a lot of things by myself and I felt really stuck before coming here :thumbsup: :thanks:

mrmikel
06-19-2013, 07:19 AM
One thing is calling for all those specific fonts. Unless they are on the device, the device will substitute its own best guess. Embedding them may be illegal or costly. This is an Adobe article on embedding:

http://www.adobe.com/type/embedding.html

It is not critical to clean up with stylesheet and the document so long as it works. As you get more familiar with epubs, you can see what things are necessary and what are really not. All the repeated normal or none lines are probably not necessary. It is just fine tuning to make the code prettier and easier to understand.

You can learn more about CSS at:
http://www.w3schools.com/css/

Use the try it now button to see how things work and then vary it and press the button again. That way you can try variations without blowing up a real document.

William Ockham
06-19-2013, 09:12 AM
The quickest solution to your current problem is to delete every line in the CSS file that says this:

color:#000000;

hk009
06-19-2013, 12:07 PM
The quickest solution to your current problem is to delete every line in the CSS file that says this:

color:#000000;

I tried deleting all the COLOR lines but it seems like it doesn't look better in night mode :(

any clue? :blink: :chinscratch:

DaleDe
06-20-2013, 12:27 PM
Remove the CSS from the document entirely and see if that clears up the night mode. Note I am not suggesting you release without a CSS, this is a troubleshooting step, nothing more.

If this does not clear up the night mode problem then you have some CSS style statements in the html files themselves. You will need to find and remove these color statements.

If it does clear up the problem then you didn't find and remove all of the color statements.

Dale

mrmikel
06-20-2013, 02:19 PM
Maybe do a search for 000000 or "black" or color in the whole document.

hk009
06-21-2013, 05:42 AM
thanks a lot guys!!! :) I'll apply your advices today and let you know ;)