Html export suggestion (use of <div>)

Html export suggestion (use of <div>)

[Mike Newman]

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

I had wondered if there was any value in wrapping the html export in
<div> </div> sections to match the structure of the org file.

For example, rather than:

<h2><a name="sec-1">1 Heading</a></h2>
<p>Text
</p>
<h3><a name="sec-2">1.1 Subheading</a></h3>
<p>More text
</p>
<h3><a name="sec-3">1.2 Further subheading</a></h3>
<p>Still more text
</p>

export:

<div><h2><a name="sec-1">1 Heading</a></h2>
<p>Text
</p>
<div><h3><a name="sec-2">1.1 Subheading</a></h3>
<p>More text
</p></div>
<div><h3><a name="sec-3">1.2 Further subheading</a></h3>
<p>Still more text
</p>
</div>
</div>

Aside from the minor drawback of making the file a bit bigger, it
should have no negative effects, but it would have at least two
benefits:

1) It would be very easy (via CSS) to apply styles to match the
structure of the file e.g. indenting lower level sections.  See
attachment for example.

2) It should make it easier, with xslt to manipulate the exported files
e.g. to extract specific sections
-- 
Mike

[-- Attachment #2: Example.html --]
[-- Type: text/html, Size: 1626 bytes --]

[-- Attachment #3: Type: text/plain, Size: 204 bytes --]

_______________________________________________
Emacs-orgmode mailing list
Remember: use `Reply All' to send replies to the list.
Emacs-orgmode@gnu.org
http://lists.gnu.org/mailman/listinfo/emacs-orgmode

Re: Html export suggestion (use of <div>)

[cezar]

Mike Newman <mike@newmanfamily.me.uk> writes:

> I had wondered if there was any value in wrapping the html export in
> <div> </div> sections to match the structure of the org file.
>
> For example, rather than:
>
> <h2><a name="sec-1">1 Heading</a></h2>
> <p>Text
> </p>
> <h3><a name="sec-2">1.1 Subheading</a></h3>
> <p>More text
> </p>
> <h3><a name="sec-3">1.2 Further subheading</a></h3>
> <p>Still more text
> </p>
>

I have not yet used this feature, but I am working with html/css all
day, so here is my opinion:

1. You shouldn't use more divs than you need to, and you don't need
them.

2. You shouldn't use divs for presentation's sake. Why not make each
subsection a different class or sumthin.

3. I think the way it's handled right now is better than your example.

Cheers,
Cezar

Re: Re: Html export suggestion (use of <div>)

[Mike Newman]

On Sat, 06 Oct 2007 11:25:00 +0300
cezar@mixandgo.ro wrote:

> I have not yet used this feature, but I am working with html/css all
> day, so here is my opinion:
> 
> 1. You shouldn't use more divs than you need to, and you don't need
> them.
> 
Why (I'm sure there's a good reason)?

> 2. You shouldn't use divs for presentation's sake. Why not make each
> subsection a different class or sumthin.
> 
Why?

> 3. I think the way it's handled right now is better than your example.
> 
> Cheers,
> Cezar
> 
> 
> 
> _______________________________________________
> Emacs-orgmode mailing list
> Remember: use `Reply All' to send replies to the list.
> Emacs-orgmode@gnu.org
> http://lists.gnu.org/mailman/listinfo/emacs-orgmode
> 


-- 
Mike

Re: Html export suggestion (use of <div>)

[cezar]

Mike Newman <mike@newmanfamily.me.uk> writes:

> On Sat, 06 Oct 2007 11:25:00 +0300
> cezar@mixandgo.ro wrote:
>
>> I have not yet used this feature, but I am working with html/css all
>> day, so here is my opinion:
>> 
>> 1. You shouldn't use more divs than you need to, and you don't need
>> them.
>> 
> Why (I'm sure there's a good reason)?

What are you trying to achieve ? I am pretty sure you can do it without
adding divs.

>
>> 2. You shouldn't use divs for presentation's sake. Why not make each
>> subsection a different class or sumthin.
>> 
> Why?
>

Because by adding classes you keep the same structure. And you can style
everything based on those classes.

Cheers,
Cezar

Re: Re: Html export suggestion (use of <div>)

[William Henney]

On 10/6/07, cezar@mixandgo.ro <cezar@mixandgo.ro> wrote:
> Mike Newman <mike@newmanfamily.me.uk> writes:
>
> > I had wondered if there was any value in wrapping the html export in
> > <div> </div> sections to match the structure of the org file.
> >

[ snip ]

> I have not yet used this feature, but I am working with html/css all
> day, so here is my opinion:
>
> 1. You shouldn't use more divs than you need to, and you don't need
> them.
>

The trouble is, it is currently not possible to wrap a section in a
<div> when you _do_ need it. At least, I tried to do this with @<div>
... @</div> and it produces incorrectly nested tags for the case when
an org heading is mapped onto an html list item (e.g., <div
class="foo"><li>Contents of org section</div></li>). This is because
the closing </div> is interpreted as being inside the section, rather
than outside it.

> 2. You shouldn't use divs for presentation's sake. Why not make each
> subsection a different class or sumthin.
>

How would that work without divs? The problem is (I think) that
sometimes an org section is represented in html as a header plus
following text:

<h3>HEADER TEXT</h3>
<p>BODY TEXT</p>
<p>MORE BODY TEXT</p>

whereas sometimes it is represented as a list item:

<li>HEADER TEXT<br>BODY TEXT</li>.

So, in the first case one cannot apply a class to the whole section,
since there is no enclosing HTML element. In the second place, you
don't have that problem, but now it is impossible to apply a class to
just the header.

What would be nice would be if there was an option for (some) tags to
be applied as classes in the exported html.

Cheers

Will

-- 

  Dr William Henney, Centro de Radioastronomía y Astrofísica,
  Universidad Nacional Autónoma de México, Campus Morelia

Re: Html export suggestion (use of <div>)

[cezar]

"William Henney" <whenney@gmail.com> writes:

>
> The trouble is, it is currently not possible to wrap a section in a
> <div> when you _do_ need it. At least, I tried to do this with @<div>
> ... @</div> and it produces incorrectly nested tags for the case when
> an org heading is mapped onto an html list item (e.g., <div
> class="foo"><li>Contents of org section</div></li>). This is because
> the closing </div> is interpreted as being inside the section, rather
> than outside it.

I agree that this should be an option. Adding divs tou your html.
Why would you need a <div class="foo"><ul> ... </ul></div> when you can
have <ul class="foo"> ... </ul>.

>
>> 2. You shouldn't use divs for presentation's sake. Why not make each
>> subsection a different class or sumthin.
>>
>
> How would that work without divs? The problem is (I think) that
> sometimes an org section is represented in html as a header plus
> following text:
>
> <h3>HEADER TEXT</h3>
> <p>BODY TEXT</p>
> <p>MORE BODY TEXT</p>

This looks ok.

>
> whereas sometimes it is represented as a list item:
>
> <li>HEADER TEXT<br>BODY TEXT</li>.

This is bad.

>
> So, in the first case one cannot apply a class to the whole section,
> since there is no enclosing HTML element. In the second place, you
> don't have that problem, but now it is impossible to apply a class to
> just the header.

I don't agree. You can apply whatever styling you like to the whole
section. Of course you cannot have different styles for different
sections unless you use classes.

>
> What would be nice would be if there was an option for (some) tags to
> be applied as classes in the exported html.

True.


Cheers,
Cezar

Re: Html export suggestion (use of <div>)

[Dmitri Minaev]

On 10/6/07, Mike Newman <mike@newmanfamily.me.uk> wrote:
> I had wondered if there was any value in wrapping the html export in
> <div> </div> sections to match the structure of the org file.

Classes, classes! :)

-- 
With best regards,
Dmitri Minaev

Russian history blog: http://minaev.blogspot.com

Re: Html export suggestion (use of <div>)

[Mike Newman]

Here is a more refined suggestion, with links to examples

Mike

                              <Div> in HTML Export
                              ====================


Table of Contents
=================
1 Proposal
2 Implementation
3 Motivation
    3.1 Applying styles via CSS
    3.2 Applying transformations via XSLT
4 Drawbacks
5 Additional suggestion
6 Options
7 Examples
8 Acknowledgements

1 Proposal
~~~~~~~~~~
I propose that on html export, sections of the document should be
wrapped in <div> </div> markers, to reflect the outline structure
given by org mode.

2 Implementation
~~~~~~~~~~~~~~~~
I think this should be quite simple to implement.  Prior to each
heading, open </div> elements would be closed (if the heading level
was higher than the previous heading level), and a new <div> element
would be opened.

3 Motivation
~~~~~~~~~~~~
There are at least two reasons why this might be useful:

3.1 Applying styles via CSS
===========================
This allows, for example:

  - Styles to be applied in a way that makes it clear how the sections
    are nested, e.g. by indentation, drawing a border or setting a
    background

  - Styles could be used to display content in a way that is not
    possible without them.  Links to examples are given below.

I imagine that in time, a variety of style sheets for displaying the
resulting html could be shared, saving users the trouble of developing
their own.

3.2 Applying transformations via XSLT
=====================================
Selecting  sections or subsections of a file should be much easier if
they correspond to a single XML element.

4 Drawbacks
~~~~~~~~~~~
- Increased file size (but only very slightly)
- Possibly increased time for browser to render page?  I am not aware
  of a problem

5 Additional suggestion
~~~~~~~~~~~~~~~~~~~~~~~
It would also be useful to wrap the Table of Contents  and the final
part of the HTML file (Author's name and date) in their own <div>.

6 Options
~~~~~~~~~
Attributes can be added to a <div>, most importantly "class" and
"id".  Adding the class attribute (as suggested by Cezar) would allow
different sections of the file to be formatted in different ways.

As a first step, I would suggest adding the <div> without a class or
id.

It was suggested that adding <div> to exported HTML should be
controlled by an option.  I would see it as fairly harmless, even to
those who would not use the feature, so in my opinion the option would
be an unnecessary complication.

7 Examples
~~~~~~~~~~
I have added <div> elements as proposed here to an HTML file.  This
can be viewed, rendered with different style sheets at:
 - [http://www.newmanfamily.me.uk/orgmode/Example-defaultstyle.html]
 - [http://www.newmanfamily.me.uk/orgmode/Example-sectioned.html]
 - [http://www.newmanfamily.me.uk/orgmode/Example-floated.html]

It should be interesting to see how they behave as the width of the
browser window changes - particularly with the last example. (Only
tested in Firefox).

8 Acknowledgements
~~~~~~~~~~~~~~~~~~
I would like to thank Cezar and William Henney for their suggestions.
(And Carsten, of course).

Re: Html export suggestion (use of <div>)

[Carsten Dominik]

On Oct 16, 2007, at 0:08, Mike Newman wrote:

> Here is a more refined suggestion, with links to examples
>
> Mike
>
>                               <Div> in HTML Export
>                               ====================

Hi Mike, thanks for this excellent writeup, exactly what I needed.
And thanks to the other who helped writing this.

I now see why it can be useful to preserve the outline
structure in the HTML export, and if Bastien remains the
only voice against it, I will put these <div>s in.

- Carsten

Re: Html export suggestion (use of <div>)

[Bastien]

Hi Carsten,

Carsten Dominik <dominik@science.uva.nl> writes:

> I now see why it can be useful to preserve the outline
> structure in the HTML export, and if Bastien remains the
> only voice against it, I will put these <div>s in.

I didn't pronounced myself "against" it at all.  I really like the idea
of having <div>s in Org :)

I only raised concerns about the fact that having <div>s will perhaps
lead to a full templating system for the HTML output, and should be
thought carefully (what structure? what classes? what ids?)

Just for the record, here are the relevant parts of the (private) email
I sent on this topic:

,----
| i don't want to jump into the « Dive-in-<div>-or-die » discussion, but
| just to give you my very first impression on this: having <div> is nice
| but you will surely end up trying to implement "templates" for the HTML
| exporter.
| 
| The choice for good class/id defaults might also be tricky: should a
| <div> for a section have a class attribute like class="section" or an id
| attribute like id="section1"?  Org will of course chose the class=""
| option, for the sake of both simplicity and genericity.  But I can bet
| you will soon be under pressure for more and more options...
`----

Again: I'm not against <div>s, I'm just curious on how it could develop!

-- 
Bastien

Re: Html export suggestion (use of <div>)

[cezar]

Hello,

  Sorry I wasn't around, but I think the <div>'s might be ok if we also
  had a class for them or id to be able to style each one differently.

Cheers,
Cezar

Re: Re: Html export suggestion (use of <div>)

[cezar]

Carsten Dominik <dominik@science.uva.nl> writes:

> I have no opinion and no knowledge to decide this question - please
> work it out among yourselves and tell me what needs to be done.
>
> Thanks.
>
>>> How would that work without divs? The problem is (I think) that
>>> sometimes an org section is represented in html as a header plus
>>> following text:
>>>
>>> <h3>HEADER TEXT</h3>
>>> <p>BODY TEXT</p>
>>> <p>MORE BODY TEXT</p>

I thing this ^^^ is good but should have the category name as a class
like this:

<h3 class="work">
  Header here
</h3>
<p class="work">
  normal text
</p>
<p class="work">
  some more text
</p>

<h3 class="school">
  Header here
</h3>
<p class="school">
  normal text
</p>
<p class="school">
  some more text
</p>

Also a div should be optional for those who need it, so the whole
category can be wraped in a <div class="category"></div> like this:


<div class="work">
  <h3 class="work">
    Header here
  </h3>
  <p class="work">
    normal text
  </p>
  <p class="work">
    some more text
  </p>
</div>

<div class="school">  
  <h3 class="school">
    Header here
  </h3>
  <p class="school">
    normal text
  </p>
  <p class="school">
    some more text
  </p>
</div>

Maybe by using a tag or something !


Cheers,
Cezar

Re: Html export suggestion (use of <div>)

[cezar]

cezar@mixandgo.ro writes:

> Also a div should be optional for those who need it, so the whole
> category can be wraped in a <div class="category"></div> like this:
>
>
> <div class="work">
>   <h3 class="work">
>     Header here
>   </h3>
>   <p class="work">
>     normal text
>   </p>
>   <p class="work">
>     some more text
>   </p>
> </div>
>
> <div class="school">  
>   <h3 class="school">
>     Header here
>   </h3>
>   <p class="school">
>     normal text
>   </p>
>   <p class="school">
>     some more text
>   </p>
> </div>
>
> Maybe by using a tag or something !
>

Actually in this case, we don't need the class on each element, just the
div:

<div class="school">  
  <h3>
    Header here
  </h3>
  <p>
    normal text
  </p>
  <p>
    some more text
  </p>
</div>