HTML export / list issues

HTML export / list issues

[Jarmo Hurri]

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


Greetings.

Below is a (hopefully) self-explanatory org file of my problem and the
associated html export.

Jarmo

* Problem description
  The examples below illustrate three problems I have with lists and
  html export at the moment.
  1. lists alphabetized in org are enumerated in html
  2. code evaluation breaks list continuation
  3. centering of raw html does not work using begin center and
     end center
* Example
  I am making a hierarchical list with some code in it.
  1. level 1 first
     a) level 2 first; I was hoping this would be alphabetized in html
        like it is in org, but it is still enumerated
     b) the next item has some code in it; it has been evaluated with
        C-c C-c to obtain the result
     c) 
	#+BEGIN_SRC elisp :exports results
	(+ 1 2)
	#+END_SRC

 #+RESULTS:
 : 3

     d) and due to the way the results of the evaluation are inserted,
        the code interrupts enumeration in the exported list, and it
        even breaks the high-level list in the org mode itself
  2. here is another element with some code; I am trying to center the
     result of the evalution of this code in html
     #+NAME: code-example
     #+BEGIN_SRC elisp :exports results :results raw
     (- 9 14)
     #+END_SRC

     #+BEGIN_CENTER
     #+RESULTS: code-example
     -5
     #+END_CENTER
  3. but for some reason the result is not centered


[-- Attachment #2: export --]
[-- Type: text/html, Size: 7085 bytes --]

Re: HTML export / list issues

[Nicolas Goaziou]

Hello,

Jarmo Hurri <jarmo.hurri@iki.fi> writes:

> Below is a (hopefully) self-explanatory org file of my problem and the
> associated html export.
>
> Jarmo
>
> * Problem description
>   The examples below illustrate three problems I have with lists and
>   html export at the moment.
>   1. lists alphabetized in org are enumerated in html

Actually this is a wrong assumption. Org only distinguishes enumerated,
itemized and description lists. There are no sub-categories.

In the buffer, you may write an enumerated list item "1.", "1)", "a.",
"A.", "a)" or "A)", but they are all the same.

For this kind of thing, setting an appropriate CSS could be an option.

>   2. code evaluation breaks list continuation
>   3. centering of raw html does not work using begin center and
>      end center
> * Example
>   I am making a hierarchical list with some code in it.
>   1. level 1 first
>      a) level 2 first; I was hoping this would be alphabetized in html
>         like it is in org, but it is still enumerated
>      b) the next item has some code in it; it has been evaluated with
>         C-c C-c to obtain the result
>      c) 
> 	#+BEGIN_SRC elisp :exports results
> 	(+ 1 2)
> 	#+END_SRC
>
>  #+RESULTS:
>  : 3

This is because "a)" is not recognized as a list item in your buffer.

 Make sure you have a non-nil 'org-list-allow-alphabetical' and
`org-plain-list-ordered-item-terminator' is either t or ?). These
variables need to be set before Org is loaded. If you set them in
current session, make sure to reload Org.

>   2. here is another element with some code; I am trying to center the
>      result of the evalution of this code in html
>      #+NAME: code-example
>      #+BEGIN_SRC elisp :exports results :results raw
>      (- 9 14) #+END_SRC
>
>      #+BEGIN_CENTER
>      #+RESULTS: code-example
>      -5
>      #+END_CENTER
>   3. but for some reason the result is not centered

This generates

  <div class="center">
  <p>
  -5
  </p>
  </div>

perhaps someone more versed in HTML could tell what is wrong here.


Regards,

-- 
Nicolas Goaziou

Re: HTML export / list issues

[Rick Frankel]

On Fri, Aug 21, 2015 at 02:58:35PM +0200, Nicolas Goaziou wrote:
> Hello,
> 
> Jarmo Hurri <jarmo.hurri@iki.fi> writes:
> 
> > Below is a (hopefully) self-explanatory org file of my problem and the
> > associated html export.
> >
> > Jarmo
> >
> > * Problem description
> >   The examples below illustrate three problems I have with lists and
> >   html export at the moment.
> >   1. lists alphabetized in org are enumerated in html
> 
> Actually this is a wrong assumption. Org only distinguishes enumerated,
> itemized and description lists. There are no sub-categories.
> 
> In the buffer, you may write an enumerated list item "1.", "1)", "a.",
> "A.", "a)" or "A)", but they are all the same.
> 
> For this kind of thing, setting an appropriate CSS could be an option.

Correct. try ~list-style-type: lower-alpha;~ in your css to get lowercase
alphanumeric labels for an enumerated list (~<ol>~).

> >   2. code evaluation breaks list continuation
> >   3. centering of raw html does not work using begin center and
> >      end center
> > * Example
> >   I am making a hierarchical list with some code in it.
> >   1. level 1 first
> >      a) level 2 first; I was hoping this would be alphabetized in html
> >         like it is in org, but it is still enumerated
> >      b) the next item has some code in it; it has been evaluated with
> >         C-c C-c to obtain the result
> >      c) 
> > 	#+BEGIN_SRC elisp :exports results
> > 	(+ 1 2)
> > 	#+END_SRC
> >
> >  #+RESULTS:
> >  : 3
> 
> This is because "a)" is not recognized as a list item in your buffer.
> 
>  Make sure you have a non-nil `org-list-allow-alphabetical' and
> `org-plain-list-ordered-item-terminator' is either t or ?). These
> variables need to be set before Org is loaded. If you set them in
> current session, make sure to reload Org.
> 
> >   2. here is another element with some code; I am trying to center the
> >      result of the evalution of this code in html
> >      #+NAME: code-example
> >      #+BEGIN_SRC elisp :exports results :results raw
> >      (- 9 14) #+END_SRC
> >
> >      #+BEGIN_CENTER
> >      #+RESULTS: code-example
> >      -5
> >      #+END_CENTER
> >   3. but for some reason the result is not centered
> 
> This generates
> 
>   <div class="center">
>   <p>
>   -5
>   </p>
>   </div>
> 
> perhaps someone more versed in HTML could tell what is wrong here.

I would assume it's because there is no css for ~div.center~. Try (untested):

  div.center > p { text-align: center; }

Note that this will center each line, separately. To center the entire
paragraph as a block is more complex. This will do if if you specify the
paragraph width.

  div.center > p {
    margin-left: auto;
    margin-right: auto;
    width: {X}em;
  }

See http://www.w3.org/Style/Examples/007/center#viewport3 for a CSS3 (less
backward compatible) approach. that doesn't require setting the width of the
paragraph.
    
I usually just set a left margin or padding as opposed to trying to float
the block in the middle. (e.g. ~margin-left: 2em~.)

rick

Re: HTML export / list issues

[Jarmo Hurri]

Rick Frankel <rick@rickster.com> writes:

>> > * Problem description
>> >   The examples below illustrate three problems I have with lists and
>> >   html export at the moment.
>> >   1. lists alphabetized in org are enumerated in html
>> 
>> Actually this is a wrong assumption. Org only distinguishes enumerated,
>> itemized and description lists. There are no sub-categories.
>> 
>> In the buffer, you may write an enumerated list item "1.", "1)", "a.",
>> "A.", "a)" or "A)", but they are all the same.
>> 
>> For this kind of thing, setting an appropriate CSS could be an option.
>
> Correct. try ~list-style-type: lower-alpha;~ in your css to get
> lowercase alphanumeric labels for an enumerated list (~<ol>~).

Brilliant. Actually, even better, from here

http://stackoverflow.com/questions/12787342/nested-list-styling-how-to-separate-styles

I adopted the following, which produces alphanumeric labels only in the
second level:

ol li ol {
    list-style-type: lower-alpha;
}

>> >   2. here is another element with some code; I am trying to center the
>> >      result of the evalution of this code in html
>> >      #+NAME: code-example
>> >      #+BEGIN_SRC elisp :exports results :results raw
>> >      (- 9 14) #+END_SRC
>> >
>> >      #+BEGIN_CENTER
>> >      #+RESULTS: code-example
>> >      -5
>> >      #+END_CENTER
>> >   3. but for some reason the result is not centered
>> 
>> This generates
>> 
>>   <div class="center">
>>   <p>
>>   -5
>>   </p>
>>   </div>
>> 
>> perhaps someone more versed in HTML could tell what is wrong here.
>
> I would assume it's because there is no css for ~div.center~. Try (untested):
>
>   div.center > p { text-align: center; }
>
> Note that this will center each line, separately. ...

My centered elements are actually canvases (the example here was
simplified), but with a bit of digging the following CSS worked for me
(I just dropped the centerings from the org code and centered all
canvases):

canvas
{
    display: block;
    margin: 0 auto;
}


Thanks!

Jarmo

Re: HTML export / list issues

[Jarmo Hurri]

Greetings Nicolas and thank you for your prompt response.

Nicolas Goaziou <mail@nicolasgoaziou.fr> writes:

>> * Example
>>   I am making a hierarchical list with some code in it.
>>   1. level 1 first
>>      a) level 2 first; I was hoping this would be alphabetized in html
>>         like it is in org, but it is still enumerated
>>      b) the next item has some code in it; it has been evaluated with
>>         C-c C-c to obtain the result
>>      c) 
>> 	#+BEGIN_SRC elisp :exports results
>> 	(+ 1 2)
>> 	#+END_SRC
>>
>>  #+RESULTS:
>>  : 3
>
> This is because "a)" is not recognized as a list item in your buffer.
>
>  Make sure you have a non-nil 'org-list-allow-alphabetical' and
> `org-plain-list-ordered-item-terminator' is either t or ?). These
> variables need to be set before Org is loaded. If you set them in
> current session, make sure to reload Org.

For some reason I can not reproduce your solution. I already had (setq
org-list-allow-alphabetical t), and now I added (setq
org-plain-list-ordered-item-terminator t), and still the following
happens (and the list is broken in html export):

======================================================================
  1. level 1 first
     a) level 2 first; I was hoping this would be alphabetized in html
        like it is in org, but it is still enumerated
     b) the next item has some code in it; it has been evaluated with
        C-c C-c to obtain the result
     c) 
	#+BEGIN_SRC elisp :exports results
          (print (list org-plain-list-ordered-item-terminator
                       org-list-allow-alphabetical
                       (+ 1 2)))
	#+END_SRC

 #+RESULTS:
 | t | t | 3 |

     d) and due to the way the results of the evaluation are inserted,
        the code interrupts enumeration in the exported list, and it
        even breaks the high-level list in the org mode itself
======================================================================

>>   The examples below illustrate three problems I have with lists and
>>   html export at the moment.  1. lists alphabetized in org are
>>   enumerated in html
>
> Actually this is a wrong assumption. Org only distinguishes
> enumerated, itemized and description lists. There are no
> sub-categories.  ... For this kind of thing, setting an appropriate
> CSS could be an option.

Ok; I already noticed that someone suggested a specific solution.

>>   2. here is another element with some code; I am trying to center the
>>      result of the evalution of this code in html
>>      #+NAME: code-example
>>      #+BEGIN_SRC elisp :exports results :results raw
>>      (- 9 14) #+END_SRC
>>
>>      #+BEGIN_CENTER
>>      #+RESULTS: code-example
>>      -5
>>      #+END_CENTER
>>   3. but for some reason the result is not centered
>
> This generates
>
>   <div class="center">
>   <p>
>   -5
>   </p>
>   </div>
>
> perhaps someone more versed in HTML could tell what is wrong here.

Also, for this, someone gave detailed pointers above.

Thanks!

Jarmo

Re: HTML export / list issues

[Nicolas Goaziou]

Jarmo Hurri <jarmo.hurri@iki.fi> writes:

> For some reason I can not reproduce your solution. I already had (setq
> org-list-allow-alphabetical t), and now I added (setq
> org-plain-list-ordered-item-terminator t), and still the following
> happens (and the list is broken in html export):
>
> ======================================================================
>   1. level 1 first
>      a) level 2 first; I was hoping this would be alphabetized in html
>         like it is in org, but it is still enumerated
>      b) the next item has some code in it; it has been evaluated with
>         C-c C-c to obtain the result
>      c) 
> 	#+BEGIN_SRC elisp :exports results
>           (print (list org-plain-list-ordered-item-terminator
>                        org-list-allow-alphabetical
>                        (+ 1 2)))
> 	#+END_SRC
>
>  #+RESULTS:
>  | t | t | 3 |
>
>      d) and due to the way the results of the evaluation are inserted,
>         the code interrupts enumeration in the exported list, and it
>         even breaks the high-level list in the org mode itself
> ======================================================================

I realize this is because you are indenting with TABs. I overlooked it
in your first report. The issue is now fixed. Thank you.

Regards,

Re: HTML export / list issues

[Jarmo Hurri]

Nicolas Goaziou <mail@nicolasgoaziou.fr> writes:

>> ======================================================================
>>   1. level 1 first
>>      a) level 2 first; I was hoping this would be alphabetized in html
>>         like it is in org, but it is still enumerated
>>      b) the next item has some code in it; it has been evaluated with
>>         C-c C-c to obtain the result
>>      c) 
>> 	#+BEGIN_SRC elisp :exports results
>>           (print (list org-plain-list-ordered-item-terminator
>>                        org-list-allow-alphabetical
>>                        (+ 1 2)))
>> 	#+END_SRC
>>
>>  #+RESULTS:
>>  | t | t | 3 |
>>
>>      d) and due to the way the results of the evaluation are inserted,
>>         the code interrupts enumeration in the exported list, and it
>>         even breaks the high-level list in the org mode itself
>> ======================================================================
>
> I realize this is because you are indenting with TABs. I overlooked it
> in your first report. The issue is now fixed. Thank you.

Your fix corrected both this example and the more complicated one I am
working on at the moment. Thank you very much.

Jarmo