Jorge Junior
10-17-2012, 07:23 PM
How do I get my CSS to do that?
— Where is God?
— Where is God?
|
|
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. |