View Full Version : How to make specific words change color when using embedded fonts?


FunkeXMix
12-28-2012, 07:38 PM
Hi all!

This is for Kindle KF8 and iBooks. I tried it in the following way but the problem is that the embedded fonts do not want to apply to the span tags. Do you know any solution? (FYI <div class="titleboxcolor"> makes the text background black.)

HTML

<div class="titleboxcolor">
<h2 id="toc_marker-2-1" class="title">White text</h2>

<h2 class="title"><span>Red text</span></h2>
<h2 class="title">White text</h2>

</div>

CSS

h2 {font-family:"Myriad Pro Black", sans-serif;
font-size:4.167em;
font-weight:900;
line-height:1.2 ;
margin-top:0px;
text-transform:uppercase;
}

h2.title span {
color:#c0081f;

}

h2.title {
color:#FFFFFF;

}

Jellby
12-29-2012, 04:02 AM
Do you have the problem only with embedded fonts? I'd say it's more likely that the reader is trying to be smart by setting all text colours to black...

Other comments probably unrelated to your issue:

-I believe your markup is wrong, you have three titles, where you probably simply want one title with three components, why not use something like (I think it's more semantic):

<h2>
<span class="top">White text</span>
<span class="middle">Red text</span>
<span class="bottom">White text</span>
</h2>

h2 { background-color: #000000; color: #FFFFFF; }
h2 span { display: block; }
h2 span.middle { color: #C0081F; }


- The "text-transform" property is not supported by ePub. There's no harm in using it, it might work in some readers, but do not rely on it.

FunkeXMix
12-29-2012, 07:12 AM
Thanks for the tip about the semantics, I really appreciate it. The span tags work for KF8 and iBooks, they become red like I want them. It's just that the embedded font "Myriad Pro Black" does not apply to them, but applies to the rest.

Jellby
12-29-2012, 08:26 AM
So, you have something like:

<h2>This <span>that</span></h2>

and "This" appears with the embedded font but "that" doesn't? That sounds like a known silly behaviour of iBooks... but I can't help much more, I don't have a Kindle or an iPad, and the code is perfectly valid.

dgatwood
12-29-2012, 09:33 AM
Probably a cascade bug. Try adding:

h2 span {font-family:"Myriad Pro Black", sans-serif;
font-size:4.167em;
font-weight:900;
line-height:1.2 ;
margin-top:0px;
text-transform:uppercase;
}

And if you can create a small, reproducible test case, please file a bug at https://bugreport.apple.com/.

JSWolf
01-07-2013, 03:09 PM
FunkeXMix are you doing all of this work for a paid job you've been given to do? If so, look for help elsewhere. most at MR do not like being taken advantage of by being asked all kinds of questions from someone who is getting paid (and not telling us so from the start) and having us do the work for them.

If you are not getting paid to do this work, then feel free to keep asking for help.

FunkeXMix
01-09-2013, 09:09 AM
My goal is to create a discussion about topics that have not been covered here before, adding to the knowledge base, as well as learning more about SVGs in regards to what works on Kindle and iPad.

It is an exiting way to create interesting layouts without the need for fixed layout, and from what I can Google there is not much coverage of it in regards to what works in eBooks. Me and dgatwood had interesting discussions on the topic of SVG balling our ideas back and forth. Except for this one thread title, I even paid attention to making easy to find titles for the threads so people can find them easily here and on Google.

I am here to give and receive, I already gave some input on another persons SVG thread, then dgatwood gave his input as well. I will most certainly use my attained knowledge to earn money by making better looking eBooks, and so can anybody who reads my threads. I think we are doing good things here. And while I get better I will be able to offer more help.

That's why people even share their information, what comes around goes around.

FunkeXMix
01-09-2013, 09:18 AM
Sorry double post. Can be deleted.