outline formatting in html

outline formatting in html

[Skip Collins]

I thought this would be easy. But I cannot find a way to get html
formatted the way I want. I would like to view org content in
"traditional" outline format, with indentation, Roman numerals for
the top level heading, etc:

 I. This is a top level heading
II. Here is another level-1 heading
    A. Here is a level 2 heading
        1. This is a level-3 heading
        2. Another level-3
            a. Level-4
            b. Another level-4
                (1) Level-5
                    (a) Level-6
    B. Another level 2

When I customize org-export-section-number-format, I do not get
exactly what I want in html output. All heading numbers include
higher level numbers, e.g. II.A.2.b. I am looking for a less cluttered
output in which a heading only includes the single counter for its level.

Re: outline formatting in html

[Christian Moe]

[-- Attachment #1: Type: text/plain, Size: 1249 bytes --]

Hi,

That would be a good feature to have. While waiting for someone to 
patch it in, a workaround for HTML output would be to turn off section 
numbering and then fake it with CSS. I enclose a four-level example I 
happen to have lying around. You can extend if needed (note that the 
title becomes h1, so the top-level heading is h2).

Yours,
Christian



On 5/6/11 5:59 AM, Skip Collins wrote:
> I thought this would be easy. But I cannot find a way to get html
> formatted the way I want. I would like to view org content in
> "traditional" outline format, with indentation, Roman numerals for
> the top level heading, etc:
>
>   I. This is a top level heading
> II. Here is another level-1 heading
>      A. Here is a level 2 heading
>          1. This is a level-3 heading
>          2. Another level-3
>              a. Level-4
>              b. Another level-4
>                  (1) Level-5
>                      (a) Level-6
>      B. Another level 2
>
> When I customize org-export-section-number-format, I do not get
> exactly what I want in html output. All heading numbers include
> higher level numbers, e.g. II.A.2.b. I am looking for a less cluttered
> output in which a heading only includes the single counter for its level.
>
>


[-- Warning: decoded text below may be mangled, UTF-8 assumed --]
[-- Attachment #2: css-simple-outline.css --]
[-- Type: text/css; name="css-simple-outline.css", Size: 507 bytes --]


body {
 counter-reset: head1 head2 head3 head4;
}
.outline-2 h2:before {
 counter-increment: head1;
 content: counter(head1, upper-roman) ". ";
}
h2 {
 counter-reset: head2 head3 head4;
}
h3:before {
 counter-increment: head2;
 content: counter(head2, upper-latin) ". ";
} 
h3 {
 counter-reset: head3 head4;
}
h4:before {
 counter-increment: head3;
 content: counter(head3, decimal) ". ";
}
h4 {
 counter-reset: head4;
}

h5:before {
 counter-increment: head4;
 content: counter(head4, lower-latin) ". ";
}

[-- Attachment #3: css-simple-outline.org --]
[-- Type: text/plain, Size: 370 bytes --]

#+TITLE:     css-simple-outline.org
#+OPTIONS:   H:4 num:nil toc:nil
#+STYLE: <link href="css-simple-outline.css" type="text/css" rel="stylesheet" />


* Top heading, Level 1 (I)
** Level 2 subhead (A)
*** Level 3 subhead (1)
**** Level 4 subhead (a)
**** Level 4 subhead (b)
*** Level 3 subhead (2)
**** Level 4 subhead (a)
***** Level 5 subhead (no formatting)
      

Re: outline formatting in html

[Skip Collins]

Thanks, this is nice. It is fairly easy to add indentation using the
padding-left css property.

The interaction between org OPTIONS, html export, and css styles has
the virtue of allowing a lot of flexibility. On the other hand, it
sure can be confusing. It is not entirely clear what the "right"
approach is for someone like myself who only knows enough css to be
dangerous.

The file simple-outline.css might make a good addition to worg.

On Fri, May 6, 2011 at 5:32 AM, Christian Moe <mail@christianmoe.com> wrote:
> Hi,
>
> That would be a good feature to have. While waiting for someone to patch it
> in, a workaround for HTML output would be to turn off section numbering and
> then fake it with CSS. I enclose a four-level example I happen to have lying
> around. You can extend if needed (note that the title becomes h1, so the
> top-level heading is h2).
>
> Yours,
> Christian
>
>
>
> On 5/6/11 5:59 AM, Skip Collins wrote:
>>
>> I thought this would be easy. But I cannot find a way to get html
>> formatted the way I want. I would like to view org content in
>> "traditional" outline format, with indentation, Roman numerals for
>> the top level heading, etc:
>>
>>  I. This is a top level heading
>> II. Here is another level-1 heading
>>     A. Here is a level 2 heading
>>         1. This is a level-3 heading
>>         2. Another level-3
>>             a. Level-4
>>             b. Another level-4
>>                 (1) Level-5
>>                     (a) Level-6
>>     B. Another level 2
>>
>> When I customize org-export-section-number-format, I do not get
>> exactly what I want in html output. All heading numbers include
>> higher level numbers, e.g. II.A.2.b. I am looking for a less cluttered
>> output in which a heading only includes the single counter for its level.