Léete algo sobre CSS2.
12.4 Contadores y numeración automática
La numeración automática en CSS2 es controlada con dos propiedades,
'counter-increment' y
'counter-reset'. Los contadores definidos por estas propiedades son
utilizados con las funciones
counter() y counters() de la propiedad 'content'.
'counter-reset'
Valor: [ <identificador> <entero>? ]+ | none | inherit
inicial: none
Se aplica a: Todos los elementos
Se hereda: no
Porcentaje: N/A
Medio: todos
Valor computado:Como el especificado
'counter-increment'
Valor: [ <identificador> <entero>? ]+ | none | inherit
Inicial: none
Se aplica a: Todos los elementos
Se hereda: no
Porcentajes: N/A
Medios: todos
Valor computado:Como el especificado
La propiedad 'counter-increment' acepta uno o mas nombres de contadores
(identificadores),
cada uno seguido opcionalmente por un entero. El entero indica en cuanto se
incrementa el
contador con cada aparición del elemento. El incremento por defecto es 1.
Los enteros cero y
negativo son admitidos.
La propiedad 'counter-reset' también contiene una lista de uno o más nombres
de contadores,
cada uno seguido opcionalmente por un entero. El entero da el valor que en
el contador es
colocado con cada aparición del elemento. El valor por defecto es 0.
Si 'counter-increment' se refiere a un contador que no está en el área de
alcance (ver abajo) de
algún 'counter-reset', se asume que el contador ha sido reseteado a cero por
el elemento raíz.
Este ejemplo muestra una forma de numerar capítulos y secciones con
"Capítulo 1", "1.1", "1.2",
etc.
H1:before {
content: "Capítulo " counter(capítulo) ". ";
counter-increment: capítulo; /* Añade 1 a capítulo */
counter-reset: Sección; /* Pone la sección a 0 */
}
H2:before {
content: counter(capítulo) "." counter(Sección) " ";
counter-increment: Sección;
}
Si un elemento incrementa/resetea un contador y también lo usa (en la
propiedad 'content' de
su pseudo elemento :before o :after), el contador se utiliza después de ser
incrementado/reseteado.
Si un elemento resetea e incrementa un contador, el contador es reseteado
primero y luego
incrementado.
La propiedad 'counter-reset' sigue las reglas de cascada. De modo que,
debido a la cascada, la
siguiente hoja de estilo:
H1 { counter-reset: Sección -1 }
H1 { counter-reset: imagenum 99 }
Solamente reseteará 'imagenum'. Para resetear ambos contadores, estos tienen
que ser
especificados a la vez:
H1 { counter-reset: Sección -1 imagenum 99 }
12.4.1 Contadores anidados y área de alcance
Los contadores son "autoanidados", en el sentido de que la re-utilización de
un contador en un
elemento hijo automáticamente crea una nueva instancia del contador. Esto es
importante en
situaciones como las listas den HTML, donde los elementos pueden ser
anidados dentro de si
mismo hasta una profundidad arbitraria. Resultaría imposible definir los
contadores con un
nombre único para cada nivel.
Así, lo siguiente es suficiente para numerar los elementos (ítems) de una
lista anidada. El
resultado es muy similar al de poner 'display:list-item' y 'list-style:
inside' en el elemento LI:
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }
El autoanidamiento se basa en el principio de que cada elemento que tiene
'counter-reset' para
un contador X, crea un nuevo contador X, el área de alcance del cual es el
elemento, sus
hermanos siguientes y todos los descendentes del elemento y sus siguientes
hermanos.
En el ejemplo de arriba, un OL creará un contador, y todos los hijos de OL
se referirán a ese
contador.
Si señalamos con item[n] la nº instancia del contador "item" y con"(" y ")"
el principio y final del
área de alcance, entonces el siguiente fragmento de HTML utilizará los
contadores indicados.
(Asumimos una hoja de estilo como la proporcionada en el ejemplo de arriba).
<OL> <!-- (pone item[0] a 0 -->
<LI>item <!-- incrementa item[0] (= 1) -->
<LI>item <!-- incrementa item[0] (= 2) -->
<OL> <!-- (pone item[1] a 0 -->
<LI>item <!-- incrementa item[1] (= 1) -->
<LI>item <!-- incrementa item[1] (= 2) -->
<LI>item <!-- incrementa item[1] (= 3) -->
<OL> <!-- (pone item[2] a 0 -->
<LI>item <!-- incrementa item[2] (= 1) -->
</OL> <!-- ) -->
<OL> <!-- (pone item[3] a 0 -->
<LI> <!-- incrementa item[3] (= 1) -->
</OL> <!-- ) -->
<LI>item <!-- incrementa item[1] (= 4) -->
</OL> <!-- ) -->
<LI>item <!-- incrementa item[0] (= 3) -->
<LI>item <!-- incrementa item[0] (= 4) -->
</OL> <!-- ) -->
<OL> <!-- (resetea item[4] a 0 -->
<LI>item <!-- incrementa item[4] (= 1) -->
<LI>item <!-- incrementa item[4] (= 2) -->
</OL> <!-- ) -->
La función 'counters()' genera una cadena compuesta por los valores de todos
los contadores
con el mismo nombre, esperados por una cadena dada.
La siguiente hoja de estilos numera los elementos (ítems) de una lista como
"1", "1.1", "1.1.1",
etc.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
12.4.2 Estilos de contadores
Por defecto, los contadores son procesados con números decimales, pero todos
los estilos
disponibles para la propiedad 'list-style-type' están también disponibles
para los contadores. La
sintaxis es:
counter(nombre)
para el estilo por defecto, o :
counter(nombre, 'list-style-type')
Todos los estilos están permitidos, incluyendo 'disc', 'circle', 'square', y
'none'.
H1:before { content: counter(chno, upper-latin) ". " }
H2:before { content: counter(Sección, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before { content: counter(notecntr, disc) " " }
P:before { content: counter(p, none) }
12.4.3 Contadores en elementos con 'display: none'
Un elemento que no es mostrado ('display' fijado a 'none') no puede
incrementar o resetear un
contador.
Por ejemplo, con la siguiente hoja de estilo, los H2 de la clase (class)
"secreto" no incrementan
a 'count2'.
H2.secreto {counter-increment: count2; display: none}
Los elementos con 'visibility' puesto a 'hidden', por otro lado, si
incrementan los contadores.
----- Original Message -----
From: "Javi Más" <[EMAIL PROTECTED]>
To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
Sent: Tuesday, August 29, 2006 3:29 PM
Subject: Re: [Ovillo] Cómo maquetar el índice de un libro
No es que sea un libro para la web, es un libro normal y corriente editado
en papel, pero el guacho quiere poner el índice en su web, tal cual
(incluyendo los números de página).
En Tue, 29 Aug 2006 20:15:52 +0200, Fernando Gutierrez
<[EMAIL PROTECTED]> escribió:
> Si se trata de un libro "para la web" ¿qué sentido tienen los números de
> página?
>
> 2006/8/29, Javi Más <[EMAIL PROTECTED]>:
>>
>> Buenas, he buscado en los archivos y no he encontrado ningún tema
>> referente a mi duda, que es la siguiente: ¿Cómo maquetaríais vosotros el
>> índice de un libro? (para la web, se sobreentiende). Es el típico:
>>
>> Prólogo ........................................ XIX
>> Introducción ................................... XXI
>> Prefacio ....................................... XXIII
>>
>> PARTE I ........................................ 1
>> Capítulo 1 .................................... 5
>> Capítulo 2 .................................... 35
>>
>> [...]
>>
>> La primera idea que me viene es hacerlo mediante una lista de
>> definición:
>>
>> <dl>
>> <dt>Prólogo</dt>
>> <dd>XIX</dd>
>>
>> <dt>Introducción</dt>
>> <dd>XXI</dd>
>>
>> <dt>Prefacio</dt>
>> <dd>XXIII</dd>
>>
>> <dt>PARTE I</dt>
>> <dd>
>> 1
>> <dl>
>> <dt>Capítulo 1</dt>
>> <dd>5</dd>
>>
>> <dt>Capítulo 2</dt>
>> <dd>35</dd>
>> </dl>
>> </dd>
>> </dl>
>>
>> <dl>
>>
>> pero no me parece muy correcto. No sé, por si alguno tiene algún
>> comentario ;)
>> _______________________________________________
>> Lista de distribución Ovillo
>> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>> http://ovillo.org/mailman/listinfo/ovillo
>>
>
>
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
