Bert
Bos, Coordenador das atividades das
CSSCopyright © 1994–2021 W3C® Privacy policy
Criado em 27 de março de 2011;
Atualizado qua 06 jan 2021 05:40:49 UTC
Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva
Ver index para todas as dicas.
Em tipografia denomina-se “leaders de pontos” a uma sequência de pontos em linha, destinada a servir de guia para conexão de colunas de uma tabela, tal como mostrado a seguir:
Pontos são os símbolos mais comuns para criar leaders, mas pode-se usar outros símbolos, tais como, traços ou mesmo uma linha sólida com uma seta na extremidade. Leaders são usados para melhorar visualmente a conexão de itens separados por um espaçamento de largura variável.
Em breve as CSS incorporarão uma funcionalidade capaz de criar leaders reais gerados depois ou antes de um elemento e conectados ao próximo elemento. Mas, vejamos como simular leaders com uso das CSS nível 2.
O método mostrado a seguir não foi o primeiro e nem o único inventado para criar leaders. Tantek Çelik foi o primeiro a propor um método para criar leaders. O exemplo que ele criou denominado Bella Mia menu foi concebido durante um jantar no restaurante Bella Mia no distante ano de 2000. Micah Sittig e Brett Merkey também sugeriram métodos para criar leaders.
O menu do restaurante, no exemplo anterior, foi marcado com elementos para listas, conforme mostrado a seguir:
<ul class=leaders> <li><span>Ravioli de salmão</span> <span>R$48,00</span> <li><span>Lulas fritas</span> <span>R$37,50</span> <li><span>Cocktail de camarão com amêndoas</span> <span>R$48,00</span> <li><span>Bruschetta</span> <span>R$19,90</span> <li><span>Pizza Margherita</span> <span>R$29,40</span> </ul>
Não há nada de especial na marcação. Escolhemos os elementos de listas porque um menu de restaurante é semanticamente uma lista. As duas colunas do menu (descrição e preço) devem ser marcadas com uso de elementos distintos. No nosso caso usamos elementos SPANs.
Usamos o pseudoelemento ‘:before’ para criar os leaders de pontos dentro dos elementos LI. O pseudoelemento que contém os pontos ocupa toda a largura do item de lista LI com os elementos SPANs sendo renderizados à sua frente. Uma cor de fundo branca nos elementos SPANs esconde os pontos renderizados atrás deles e a declaração ‘overflow: hidden’ para o elemento UL assegura que os pontos não se estendam para além da lista, tudo conforme mostrado a seguir:
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white}
Usamos uma quantidade arbitrária de 80 pontos o que é suficiente para preencher uma largura máxima de 38em para a lista. Para o pseudoelemento ‘:before’ foi declarada uma largura igual a zero para garantir que ele não ocupe espaço horizontal extra e os pontos alinhem com os conteúdos dos SPANs.
As declarações ‘padding: 0’ e ‘list-style: none’ zeram os valores default da propriedade para listas. Escolhemos marcar o menu como lista, mas não queremos bullets visíveis antes dos itens.
Uma das vantangens de se marcar os pontos dentro do itens da lista LI e não dentro dos SPANs é a de se obter um alinhamento vertical perfeito. E, é esse alinhamento que se deseja quando se têm diversas linhas com leaders de pontos.
A seguir mostramos variações do mesmo efeito com uso de leaders constituídos de outros símbolos. O primeiro deles consiste no deslocamento dos pontos para uma posição vertical mais acima, ou seja, os pontos serão posicionados no meio vertical dos textos. As regras de estilo para obter esse efeito são as mesmas do exemplo anterior exceto o conteúdo gerado que deverá ser “·” em vez de “.”:
Essa outra variação mostra o mesmo efeito com os pontos maiores:
A variação seguinte usa dois pontos:
Na variação mostrada a seguir o leader é constituído de sinais mais coloridos e com um espaço entre os sinais:
A última variação a ser mostrada é um pouco diferente. O leader é constituído de uma seta alongada e o desafio nessa variação não é alinhá-lo verticalmente mas acrescentar a ponta da seta. Para solucionar esse desafio alteramos o local do leader passando-o do item da lista LI para o SPAN que contém o preço. Consulte o código fonte dessa página para examinar como esse efeito foi obtido.
O que acontecerá se o texto antes dos leaders for longo o suficiente para fazer com que ele (texto) passe para a linha (ou linhas) seguinte? Nesses casos a linha de pontos terá que ser menor e posicionada não depois da primeira linha do texto mas depois da última. Sem recorrer às funcionalidades das CSS nível 3 não é possível resolver esse caso satisfatoriamente, mas podemos criar uma solução aceitável em casos mais simples.
Nos exemplos mostrados anteriormente considerou-se que o texto depois do leader é curto o bastante para evitar que ele (texto) não "pule" para a linha seguinte. Na presente variação, que trata dos casos de textos longos, devemos inserir o leader de pontos não no início do texto (':before') mas no final (':after') de modo a que ele seja renderizado atrás da última linha de texto em lugar da primeira. Observe a seguir essa variação:
Nesses casos as regras CSS são as mesmas dos exemplos anteriores, exceto que agora devemos usar o seletor 'ul.leaders li:after' em vez do seletor 'ul.leaders li:before'.
Aqui há ainda um detalhe extra: uma vez que os pontos foram posicionados depois do último texto eles (pontos) serão renderizados sobre o texto e não atrás deles. Assim, precisamos forçar a renderização do texto sobre o leader de pontos de modo a que os pontos não sejam visíveis na largura ocupada pelo texto. A propriedade CSS 'z-index' será usada para isso. Essa propriedade só funciona para elementos posicionados e então precisamos acrescentar mais duas declarações CSS conforme mostrado a seguir:
ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none}
ul.leaders li:after {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
padding-right: 0.33em;
background: white}
ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white;
position: relative;
z-index: 1}
A funcionalidade para leaders nas CSS nível 3 of CSS encontra-se na fase de desenvolvimento (março de 2011) e é certo que elas fornecerão uma sintaxe bem mais simples para obter os efeitos mostrados nessa página.
O primeiro exemplo será simplificado, conforme mostrado a seguir:
ul.leaders {
padding: 0;
list-style: none}
ul.leaders span:first-child:after {
content: leader(dotted)}
O segundo SPAN será automaticamente deslocado para o fim da linha, dispensando assim a necessidade da declaração 'float'.
‘Dotted’ é uma palavra-chave pré-definida na especificação. Mas, você poderá usar qualquer símbolo, tais como, ‘leader("· ")’ para pontos posicionados na vertical e no meio ou sinal mais e espaço ‘leader("+ ")’. Observe o mesmo exemplo anterior usando as funcionalidades das CSS nível 3. Ele ainda não funcionará. (Em novembro de 2014, somente Prince e PDFReactor oferecem suporte experimental.)
O leader constituído de uma seta alongada é obtido com uso de uma “linha horizontal alongada”, caractere (\23AF) e uma seta, caractere (\2192). Eles (caracteres) não alinham verticalmente de forma perfeita em todas as fontes, mas com a fonte Symbol o alinhamento é perfeito. Contudo, em qualquer caso, haverá um espaço antes da seta porque o atual Rascunho da especificação ainda não definiu o mecanismo para alinhar o leader à direita. (No exemplo mostrado nós usamos um "hack": um valor negativo para 'letter-spacing' com a finalidade de eliminar aquele espaço, mas isso poderá não ser suficiente.)
Bert
Bos, Coordenador das atividades das
CSSCriado em 27 de março de 2011;
Atualizado qua 06 jan 2021 05:40:49 UTC