Letra capitular no Kindle

Modelo 1:

No arquivo CSS:

p.captexto {

font-weight : normal;
font-style : normal;
font-size : 0.96em;
text-decoration : none;
font-variant : normal;
line-height : 1.2;
text-align : justify;
color : inherit;
text-indent : 0px;
margin : 0px 6px;

}

span.capitular {
font-size : 2.812em;
float : left;
line-height : 0;
margin-top : 0.05em;
margin-right : 0.05em;

}

No parágrafo do arquivo HTML:

<p class="captexto"><span class="capitular">Q</span><span class="Regular">ue me conste, ainda ninguém relatou o seu próprio delírio; faço-o eu, e a ciência mo agradecerá. Se o leitor não é dado à contemplação destes fenômenos mentais, pode saltar o capítulo; vá direito à narração. Mas, por menos curioso que seja, sempre lhe digo que é interessante saber o que se passou na minha cabeça durante uns vinte a trinta minutos.</span></p>

Modelo 2:

No arquivo CSS:

p.captexto {

font-weight:normal;
font-style:normal;
font-size:0.96em;
text-decoration:none;
font-variant:normal;
line-height:1.32;
text-align:justify;
color : inherit;
text-indent:0px;
margin:0px 6px;
}

span.capitular {
font-size:2.687em;
float:left;
line-height:1;
margin-top:0.000em;
margin-right:0.05em;
margin-bottom:-0.179em;

font-weight:normal;
font-style:normal;
color:#7d7d7d;

}

No parágrafo do arquivo HTML:

<p class="captexto"><span class="capitular">Q</span><span class="Regular">ue me conste, ainda ninguém relatou o seu próprio delírio; faço-o eu, e a ciência mo agradecerá. Se o leitor não é dado à contemplação destes fenômenos mentais, pode saltar o capítulo; vá direito à narração. Mas, por menos curioso que seja, sempre lhe digo que é interessante saber o que se passou na minha cabeça durante uns vinte a trinta minutos.</span></p>

Modelo 3:

No CSS:
p.captexto  {
font-family: "Times New Roman", Times, serif;
font-size: 1em;
color: # 000000;
margin: 1.5em 1.2em 0em 8em;
text-align: left;
}

span.dropcap {
float: left;
font-size: 2.7em;
line-height: 0.8em;
margin-bottom: -0.1em;
}

No parágrafo do arquivo HTML:

<p class="captexto"><span class="dropcap">Q</span><span class="Regular">ue me conste, ainda ninguém relatou o seu próprio delírio; faço-o eu, e a ciência mo agradecerá. Se o leitor não é dado à contemplação destes fenômenos mentais, pode saltar o capítulo; vá direito à narração. Mas, por menos curioso que seja, sempre lhe digo que é interessante saber o que se passou na minha cabeça durante uns vinte a trinta minutos.</span></p>

No CSS:






p.captexto  {
font-family: "Times New Roman", Times, serif;font-size: 1em;color: # 000000;margin: 1.5em 1.2em 0em 8em;text-align: left;}


span.dropcap {
float: left;
font-size: 4.7em;
line-height: 0.8em;
margin-right: 3pt;
margin-bottom: -0.1em;
}




No parágrafo do arquivo HTML:




<p class="captexto"><span class="dropcap">Q</span><span class="Regular">ue me conste, ainda ninguém relatou o seu próprio delírio; faço-o eu, e a ciência mo agradecerá. Se o leitor não é dado à contemplação destes fenômenos mentais, pode saltar o capítulo; vá direito à narração. Mas, por menos curioso que seja, sempre lhe digo que é interessante saber o que se passou na minha cabeça durante uns vinte a trinta minutos.</span></p>

Modelo com texto e imagem adaptável:

No arquivo CSS:

p {
    text-align: justify;
    text-indent: 0;
}

p + p {
    text-indent: 1.2em;
}

span.dropcap {
    margin-top: 0.2em;
    margin-right: 0.38em;
}

span.dropcap img {
    width: 100%;
}

span.drop {
    display: none;
}
 
span.drop1 {
    float: left;
    width: 6em;
    max-width: 23%;
}

@media amzn-mobi {
span.dropcap {
    display: none;
}

span.dropcap img {
    display: none;
}

span.drop {
    display: inline !important;
    font-size: 1.8em;
    font-weight: bold;
}

span.drop1 {
    display: none;
}
}

No arquivo HTML:

<p><span class="dropcap drop1"><img alt="M" src="../Images/init-m.gif" /></span><span class="drop">M</span>ORBI dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui.</p>

Explicações de alguns termos utilizados:

margin-bottom: -0.3em; - Este comando tem por objetivo alinhar a letra com o resto do texto, nos exemplos aqui apresentados ele não aparece porque o blog não aceita o comando, mas no seu livro vai funcionar, o valor varia de acordo com o tamanho da fonte usada.

float: left; - Este comando é um dos mais bacanas pois permite que o texto seja "flutuante" é isso que permite que o texto fique em volta dele, também é possível usar em imagens.

line-height: 1.0em; - Aqui temos a altura das linhas, não ultrapasse nunca o valor 1 senão as linhas vão ficar muito distantes entre si e o capitular não ficará bom.

width: .8em;- Aqui temos a largura da letra, é usado para aproximar o texto da letra, sem ela teríamos uma borda ao redor da letra. e não ficaria bom.

font-weight:bold;- Isto deixa a fonte em negrito, seu uso é opcional.
Créditos:
Sigil
RbnJrg
Ebookbr