Rendering quoted HTML outside the last headline's HTML.

Rendering quoted HTML outside the last headline's HTML.

[Emanuele Santoro]

Hi there!

I render the org-mode project of my website using HTML export
functions.

I created a three-columns layout by using the Bootstrap
(http://getbootstrap.com/) and by wrapping the first three columns
within a div element of class "row". 

I do this by prepending and appending some static html via the #+HTML
directive, as in:

    #+HTML: <div class="row">

and 

    #+HTML: </div>

Also, I set the HTML_CONTAINER variable to use proper css classes:

    #+HTML_CONTAINER: div class="col-md-4"


Now the problems arise:

1) I have noticed that when closing the headline tag, org will generate
a syntactically wrong </div class="col-md-4"> tag. Most browser will
ignore such mistakes but it's still annoying.

2) Everything works okay if there are three or less columns. When
adding another column, I close the "row" container and open another
one, by adding

    #+HTML: </div>
    #+HTML: <div class="row">

But this code is rendered within the HTML code of the previous
headline.
In general, it is not clear "where" a piece of HTML will be rendered.
Is there a way to specify that? Is there a way to say, like: "this piece
of HTML is not part of the current headline and should be rendered after
the last headline has been rendered" ?

Thanks in advance,
-- 
Emanuele Santoro

Re: Rendering quoted HTML outside the last headline's HTML.

[Rasmus]

Hi,

Emanuele Santoro <manu@santoro.tk> writes:

> Hi there!
>
> I render the org-mode project of my website using HTML export
> functions.
>
> I created a three-columns layout by using the Bootstrap
> (http://getbootstrap.com/) and by wrapping the first three columns
> within a div element of class "row". 
>
> I do this by prepending and appending some static html via the #+HTML
> directive, as in:
>
>     #+HTML: <div class="row">
>
> and 
>
>     #+HTML: </div>
>
> Also, I set the HTML_CONTAINER variable to use proper css classes:
>
>     #+HTML_CONTAINER: div class="col-md-4"

Does this do what you want?

    * h
    :PROPERTIES:
    :HTML_CONTAINER_CLASS: col-md-4
    :END:
    p


> Now the problems arise:
>
> 1) I have noticed that when closing the headline tag, org will generate
> a syntactically wrong </div class="col-md-4"> tag. Most browser will
> ignore such mistakes but it's still annoying.
>
> 2) Everything works okay if there are three or less columns. When
> adding another column, I close the "row" container and open another
> one, by adding
>
>     #+HTML: </div>
>     #+HTML: <div class="row">
>
> But this code is rendered within the HTML code of the previous
> headline.
> In general, it is not clear "where" a piece of HTML will be rendered.
> Is there a way to specify that? Is there a way to say, like: "this piece
> of HTML is not part of the current headline and should be rendered after
> the last headline has been rendered" ?

I guess you could use a filter.  Perhaps the cleanest way would be to do
something like the following and use a filter to clean up row.  Perhaps
you could use a function similar to org-export-ignore-headlines in
ox-extra in contrib.

     * row
     :PROPERTIES:
     :HTML_CONTAINER_CLASS: row
     :END:
     ** h
         :PROPERTIES:
         :HTML_CONTAINER_CLASS: col-md-4
         :END:
         p
     ** h
         :PROPERTIES:
         :HTML_CONTAINER_CLASS: col-md-4
         :END:
         p

     ** h
         :PROPERTIES:
         :HTML_CONTAINER_CLASS: col-md-4
         :END:
         p

Hope it helps,
Rasmus

-- 
May contains speling mistake