View Full Version : Can I capitalize a letter?


Jorge Junior
10-17-2012, 07:23 PM
How do I get my CSS to do that?

— Where is God?

theducks
10-17-2012, 08:00 PM
How do I get my CSS to do that?

— Where is God?

<span class='bigletter'>W</span>here is God?

in the CSS
.bigletter {font-size: 175%;}

DiapDealer
10-17-2012, 08:08 PM
You seriously need to check out some CSS/xhtml/ePub tutorials. This really isn't the right place for "How do I make the first letter big?" type questions.
Even though theducks graciously chose to answer the question. ;)

Jorge Junior
10-17-2012, 08:56 PM
Thanks, theducks.

theducks
10-17-2012, 09:11 PM
Thanks, theducks.

You are welcome. Diap's suggestion is :2thumbsup

mrmikel
10-18-2012, 07:39 AM
When you start doing this sort of changing of letter size, etc, be sure to keep an eye on how it will look in your target device. Some css can unexpectedly cause text to disappear by being shoved off the right side of screen.

You might take a look at Three Men in a Boat, which is available in the MR library. It is full of fancy formatting that works. Glance through it in Book View and when you see something that you like, switch to Code View and see how it is done.

dwig
10-18-2012, 09:58 AM
...
You might take a look at Three Men in a Boat, which is available in the MR library. It is full of fancy formatting that works. Glance through it in Book View and when you see something that you like, switch to Code View and see how it is done.

+1 ... looking at the code in other ePubs that display the type of formatting you're trying to emulate is always a good idea.

Also check out W3schools' CSS tutorials (http://www.w3schools.com/css/default.asp). While ePub doesn't support everything in CSS it does support a goodly portion of it.

BTW, you might find that you also need to add a font-weight attribute to the CSS suggested by theducks in order to get the effect you illustrate

.bigletter {font-size: 175%; font-weight: bold;}

theducks
10-18-2012, 10:24 AM
+1 ... looking at the code in other ePubs that display the type of formatting you're trying to emulate is always a good idea.

Also check out W3schools' CSS tutorials (http://www.w3schools.com/css/default.asp). While ePub doesn't support everything in CSS it does support a goodly portion of it.

BTW, you might find that you also need to add a font-weight attribute to the CSS suggested by theducks in order to get the effect you illustrate

.bigletter {font-size: 175%; font-weight: bold;}

:thumbsup:
I started a (Mostly Chapter heading, first paragraph coding) snippet sampler book of the things I like or just tried out :rolleyes: :eek: :thumbsup:. 1 page per thing ;) :bulb2: each page can have its own stylesheet
This way, you also get to try it on the target device

HarryT
10-18-2012, 11:32 AM
I would add to the above suggestions that it's more normal to use a drop-cap than a raised-cap for the first line of a chapter.

Jorge Junior
11-04-2012, 11:07 AM
How do I get my CSS to do that?

— Where is God?
OK... now I'm trying to do something a little bit different. I'm almost there, but I'm still missing something.
I want my first paragraph to look like this...

http://imageshack.us/a/img836/8108/texto1p.png

but it's like this...

http://imageshack.us/a/img29/5079/texto2y.png

The second letter is idented and I think the text is not justified. Here's the code.

<p class="p"><span class="firstletter">S</span>e parasse de correr, estaria morto. Meus pulmões ardiam, o coração bombeando ácido, cada músculo do meu corpo ameaçava explodir. Não conseguia mais sequer ver para onde ia, a visão enfraquecendo, enquanto meu corpo se preparava para desistir. Se a sirene não martelasse em meus tímpanos, teria conseguido escutar minha respiração, furiosa e desesperada, incapaz de aspirar ar suficiente para seguir adiante.</p>

<p>Apenas mais um lance de escada, mais um, e talvez conseguisse.</p>

And here's the class:

.firstletter{
font-family:"Adler";
font-size:4em;
float: left;
margin: -0.1em 0.1em -0.4em -0.2em;
text-ident:1em;
}

Jellby
11-04-2012, 12:28 PM
Did you remove indent from the first paragraph?

p.p { text-indent: 0; }

Jorge Junior
11-04-2012, 01:10 PM
Thank you, Jellby.

lrui
11-05-2012, 12:25 AM
How do I get my CSS to do that?

— Where is God?

http://john.nachtimwald.com/category/articles/formatting-tips/

Here is some EPUB formatting tips, it can help you to make epub visually appealing.:)

JSWolf
11-14-2012, 10:30 PM
http://john.nachtimwald.com/category/articles/formatting-tips/

Here is some EPUB formatting tips, it can help you to make epub visually appealing.:)

John's blog need someone to error check it. For example...

span.ri {
font-size: 4em;
font-weight: bold;
}

That's not correct. It leaves a larger space between the first line and the rest of the paragraph.

span.ri {
font-size: 4em;
font-weight: bold;
line-height: 0
}

Now that is correct.