Lista numerada

[Giihh 6]

Olá,

 

No microsoft word temos o recurso de índice., estou tentando fazer algo similar com php para que fique assim:

1 Titulo (h2)
    1.1 Subtitulo (h3)
    1.2 Subtitulo (h3)
2 Titulo (h2)     
    2.1 Subtitulo (h3)
    2.2 Subtitulo (h3)
    2.3 Subtitulo (h3)
          2.1.1 Subtitulo (h4)
3 Titulo (h2)  

Acontece que com preg_match_all consigo buscar todos os títulos e subtítulos, e com o str_replace e preg_replace trocar as tags de titulo por tag <li> e organizar uma lista ordenada, porem fica listagem tradicional, pegando o mesmo exemplo acima:

1 Titulo (h2)
2 Subtitulo (h3)
3 Subtitulo (h3)
4 Titulo (h2)     
5 Subtitulo (h3)
6 Subtitulo (h3)
7 Subtitulo (h3)
8 Subtitulo (h4)
9 Titulo (h2)  

A tag ordenada (numerada) do html é limitada em numeração de um nivel somente.

 

Alguma ideia de como posso fazer?

 

Agradeço ajuda

[(RNU) Ruan Silva 61]

tentou criar ul's dentro das li's que possuem nós?

[Gabriel Heming 766]

Primeiro você deve criar os níveis, a sua lista não os possui:

<ol>
    <li>linha 1</li>
    <li>linha 2</li>
    <li>linha 3
        <ol>
	    <li>linha 3.1</li>
            <li>linha 3.2</li>
            <li>linha 3.3</li>
        </ol>
    </li>
</ol>

Saída:

1 linha 1

2 linha 2

3 linha 3

1 linha 1

2 linha 2

3 linha 3

Depois com CSS (nos navegadores muito antigos) não irá funcionar:

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

Saída:

1 linha 1

2 linha 2

3 linha 3

3.1 linha 1

3.2 linha 2

3.3 linha 3

Isso tudo é CSS 2

 

Referências:

http://www.w3.org/TR/CSS2/syndata.html#counter

http://www.w3.org/TR/CSS2/generate.html#scope

[Giihh 6]

Obrigada pelas respostas,

 

Gabriel Heming, super dica essa, mas copiei no arquivo css e o trecho abaixo no html para testar:

<ol>
    <li>linha 1</li>
    <li>linha 2</li>
    <li>linha 3
        <ol>
	    <li>linha 3.1</li>
            <li>linha 3.2</li>
            <li>linha 3.3</li>
        </ol>
    </li>
</ol>

a saida continuou

1 linha 1
2 linha 2
3 linha 3
       1 linha 1
       2 linha 2
       3 linha 3

navegador: Chrome Versão 46.0.2490.86 m

[Gabriel Heming 766]

Tem que colocar o CSS que está no post acima e aqui abaixo.

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

[Gabriel Heming 766]

Movido PHP -> CSS / XML / XHTML / HTML

[Giihh 6]

Coloquei os dois trechos nos respectivos arquivos mesmo assim não funcionou.

 

Não sei se apenas css vai resolver.

 

Como o indice é dinamico, provavelmente o php vai ser necessario, por isso coloquei no forum php.

 

Pois um documento pode ter sequencia de titulos assim

h2
h2
   h3
   h3
h2
h2

outro

h2
  h3
h2
h2
h2
  h3 

nisso o php tera de identificar onde colocar um novo <ol> e onde fechar o </ol>

[Giihh 6]

Essa dica do css me ajudou muito.