quinta-feira, 8 de março de 2012

Oficina do eBook: CSS

Aumentar Letra Diminuir Letra



Continuando nosso estudo sobre a criação de e-books hoje vamos observar um pouco o CSS.
CSS significa "Cascading Style Sheet" ou em português "Folha de Estilo em Cascata" o que significa basicamente um arquivo que define os estilos de formatação e configuração do conteúdo de um documento HTML.
Isto significa que o CSS nos permite trabalhar toda a configuração de um livro de maneira mais fácil. por exemplo:
Se eu quero que o meu texto use um alinhamento justificado.
Sem o CSS eu teria a opção de definir isso como padrão na página através da tag <body align=justify>, ou ir indivídualmente em cada parágrafo e adicionar <p align=justify>.
No primeiro caso apesar de mais simples isso me obrigara a colocar um comando em cada elemento em que eu queira um alinhamento diferente e no caso de um livro em epub teria que modificar todos os documentos xhtml, mas a situação fica ainda mais complicado quando eu adiciono outros elementos com formatações variadas, tais como <img> <div> <table>, todos esses elementos podem ter uma formatação diferente e o css permite que tudo isso seja feito em um só lugar.
No segundo caso o trabalho seria insano e nada produtivo, além disso o css nos permite fazer muito mais coisas como criar caixas flutuantes com imagem ou cor diferenciada no fundo, entetanto esses recursos tem de ser usados com párcimônia nos e-books, já que nem todos os leitores suportam estes comandos.
Os e-books em geral aceitam CSS 2 com alguns comandos CSS3 e alguns leitores suportam versões webkit de comandos css, o ibooks no ipad por exemplo, mas novamente é bom termos cuidado com o que usamos pois o uso avançado destes comandos podem fazer com que o livro nem sequer consiga ser aberto pela maioria dos leitores.
No caso do Kindle o suporte a estes comandos são muito mais limitados e no futuro faremos um estudo sobre quais comandos são aceitos no kindle bem como em outros leitores.

Mas vamos observar mais de perto como funciona a extrutura de um arquivo css:

O documento css é muito mais simples que um XHTM pois não precisa de nenhum cabeçalho ou mesmo tag que organize seu conteúdo, é basicamente uma lista com as definições e segue o seguinte esquema.

seletor {propriedade:valor;}

O seletor é a propriedade que você quer alter por exemplo p para parágrafos.
Propriedade é o ponto que você quer alter por exemplo text-align.
Valor é a especifícação da propriedade por exemplo justify.

Assim no exemplo dos parágrafos justificados bastaríamos usar a seguinte sintaxe.

p {text-align:justify;}

Uma coisa bacana é que você pode usar vários seletores para um mesmo grupo de especificações por exemplo:

p, h1, h2, h3, div {text-align:justify;}

Da mesma forma um seletor pode usar várias especifícações.



p {
text-align:justify;
text-indent:5%;
}


Entretanto nem sempre precisamos de valores gerais por vezes queremos aplicar um estilo à apenas um parágrafo, por exemplo no primeiro parágrafo de cada capítulo. Neste casso devemos usar a propriedade classe.



p.pp{
text-align:justify;
text-indent:5%;
margin-top:8%;
}


No exemplo acima chamamos a classe de pp pois ela está relacionada aos primeiros parágrafos, vejam que a sintaxe é praticamente a mesma com exeção do .pp entre o seletor e a chave. No caso usamos uma definição de margem superior o que nós daria uma distância entre o título e o parágrafo.

Uma coisa interessante é que uma classe não precisa de um seletor então você pode usar o elemento acima do seguinte modo



.pp{
text-align:justify;
text-indent:5%;
margin-top:8%;
}


Desta forma você pode atribuir à classe .pp para qualquer elemento em seu documento como por exemplo em uma imagem.

Mas não adianta criarmos uma página de css se ela não estiver associada ao arquivo HTML em que as mudanças devem ser aplicadas.
Para aplicar o CSS em uma página HTML temos 3 maneiras.
Associando uma página css externa. Que é o caso de usarmos um documento como styles.css com todas as atribuições, para isso precisamos declara a página dentro do ,<head> do arquivo HTML.



<head>
  <link href="../Styles/style.css" rel="stylesheet" type="text/css" />

  <title></title>
</head>


Basta adicionar a tag link em todo o documento html que todas as definições serão aplicadas, veja que a propriedade href indica o caminho do documento .css a rel diz que se trata de uma folha de estilo e o type indica que é um documento de texto com informações css.

A segunda maneira é declarar as informações css dentro do próprio documento css da seginte maneira.



<head>
  <title></title>
  <style type="text/css">

  /*<![CDATA[*/

  p.italico {font-style: italic;}
  /*]]>*/
  </style>
</head>


Veja que existe a tag style e dentro dela ficam todas as especificações css, no caso temos um classe para parágrafos em itálico.
Um ponto que ainda não falei é como atribuir a classe para o elemento desejado para isso temos que ir no ponto em que queremos a mudança e usar o comando class por exempo.



<p class="italico">Este parágrafo está em itálico</p>


Neste caso o parágrafo em questão usaria a especificação determinada pela classe itálico.
Tanto o primeiro modo de plicação css como o segundo exigem o uso do comando class para o uso de classes.

A terceira forma de aplicar css é diretamente no elemento.



<p style="font-style: italic; text-align: center;">Este parágrafo é centralizado e em itálico</p>


Neste caso o parágrafo receberá as específicações estipuladas pelo comando style, entretanto é bom evitar este tipo de uso pois o documento final acaba ficando sujo e pesado, sempre que possível utilize apenas uma definição para todos os lugares que utilizem as mesmas definições.

Veja, também, que só usei valores em % isso porque valores absolutos são altamente desaconselhados em e-book's já que não sabemos em qual tela o livro será lido, além da porcentagem podemos usar tam bém o valor em que basicamente significa o valor da fonte padrão ou seja.

p {font-size: 1em} tem o exato tamanho da fonte usada.
p {font-size: 2em} tem o dobro do tamanho da fonte usada.

Entretanto nem todos os leitores realmente usam esta regra o kindle aparentemente determina um tamanho padrão para ca em. Segundo Joshua Tallent em "Kindle Formatting: The Complet Guide" no kindle 1 cada em corresponde à 1/4 de polegada enquanto no kindle 2 cada em corresponde à 1/8 de polegada. Se alguem tiver os valores para o kindle 3 ou se isto está diferente nos novos aparelhos pór favor colabore nos comentários.

Você pode estar se perguntando qual o sentido de Cascata em "folhas de estilo em cascata" isso se deve a questão hierárquica dos comandos.

Se eu tenho definido como padrão para os parágrafos a seguinte formatação.



p {
text-align:justify;
text-indent:5%;
}


Se eu usar a seguinte classe.



p.centralizar {
text-align:center;
}


Meus parágrafos serão centralizados e terão o recúo de primeira linha de 5%, isto porque eu determinei este recuo no seletor p e como a classe não determina nenhum valor para text-indent ela herda esta característica da configuração de parágrafo padrão feita na definição de p.

Além disso a hierarquia de comando é sempre do mais próximo ao atributo, por exemplo.



<head>
  <title></title>
  <style type="text/css">

  /*<![CDATA[*/

  p {text-align:justify;}
  /*]]>*/
  </style>
</head>
<body>
<div style="text-align:center">
<p style="text-align:right">Qual o alinhamento final deste parágrafo?</p>
</div>
</body>


No caso acima o parágrafo acabaria com um alinhamento à direita já que é o comando mais próximo a ele.

Por fim cabe algumas considerações finais a respeito do CSS. Como já disse é bom ter cuidado ao usar comando avançados para que o seu livro possa ser aberto em muitos dispositivos, fora isso alguns leitores como o aldiko por padrão não respeitam as folhas de estilo, então é bom assegurar uma qualidade mínima de leitura mesmo sem o uso de css. E tenha cuidado com os limites que você impõem ao leitor, pois se focê define um tipo de fonte ou alinhamento específico, na maioria dos casos o leitor não poderá mudar esta opção em seu leitor, então se o sujeito em questão prefere um alinhamento à direita e você define em seu css que o alinhamento deve ser justificado, mesmo que o e-reader tenha a opção de alinhamento à direita ele provavelmente não irá funcionar.

Um comentário:

  1. Esse foi, na minha opinião o melhor post da série.

    CSS é bem interessante eu recomendo o site http://htmldog.com/ como referencia para os atributos do CSS.

    ResponderExcluir