[orgmode] improving output (nested footnotes)

[gour]

Hello,

I'm very happy after discovering that one can write ones post in Nikola by using org-mode markup. There are two possible methods:

1. using this org-mode plugin and
2. using org-mode's export/publishing mechanism along with ox-nikola package.

So far, I haven't done extensive testing, but just tried simple example showing 'nested footnotes' and, atm, I believe that the output produced by 2nd method is better...

So, here is the simple example...

When using Nikola's org-mode plugin, one would create document similar to this:

#+BEGIN_COMMENT
.. title: Orgmode plugin
.. slug: orgmode-plugin
.. date: 2016-10-19 11:08:40 UTC+02:00
.. tags: 
.. category: 
.. link: 
.. description: 
.. type: text
.. author: Gour
#+END_COMMENT

* Nested footnotes

This is a simple[fn:1] sentence.

* Footnotes

[fn:2] Second footnote.

[fn:1] First footnote and here is the second[fn:2] one.

Please note that the "front matter" is created by the plugin itself, while the org-mode automatically creates "Footnotes" section and creates footnotes in reverse order which is not the problem in the rendered HTML output, but the plugin renders "Footnote section" which is, imho, not neeeded.

See the screenshot:

Let's see now the 2nd method...

One would write something like this:

#+TITLE: Exported post
#+NIKOLA_SLUG: exported-post
#+AUTHOR: Gour
#+DATE: 2016-10-19 11:34 UTC+02:00
#+DESCRIPTION:
#+KEYWORDS:
#+NIKOLA_TYPE: text

* Nested footnotes

This is a simple[fn:1] sentence.

* Footnotes

[fn:2] Second footnote.

[fn:1] First footnote and here is the second[fn:2] one.

In this case one has to write the whole front-matter alone which is 'pro' feature of org-mode plugin.

That file when exported with ox-nikola package creates the following *.rst file:

.. title: Exported post
.. slug: exported-post
.. date: 2016-10-19 11:34 UTC+02:00
.. tags: 
.. link: 
.. description: 
.. type: text
.. author: Gour

1 Nested footnotes
------------------

This is a simple [1]_  sentence.

.. [1] First footnote and here is the second [2]_  one.

.. [2] Second footnote.

which renders as:

which is, imho, much prettier and/or closer to what one would expect if/when posting directly using rst markup.

What do you think?

[ralsina]

Now that I see the screenshots, that is clearly something that needs a CSS tweak. Can you post here the HTML of the footnotes in the org case?

[gour]

I believe you're interested for the output of org-mode plugin:

<h2 id="sec-1">Nested&nbsp;footnotes</h2>
<div class="outline-text-2" id="text-1">
<p>
This is a simple<sup><a id="fnr.1" name="fnr.1" class="footref" href="../orgmode-plugin%20%28version%20b%29/#fn.1">1</a></sup> sentence.
</p>
</div>
</div>
<div id="footnotes">
<h2 class="footnotes">Footnotes: </h2>
<div id="text-footnotes">

<div class="footdef">
<sup><a id="fn.1" name="fn.1" class="footnum" href="../orgmode-plugin%20%28version%20b%29/#fnr.1">1</a></sup><p class="footpara">
First footnote and here is the second<sup><a id="fnr.2" name="fnr.2" class="footref" href="../orgmode-plugin%20%28version%20b%29/#fn.2">2</a></sup> one.
</p>
</div>

<div class="footdef">
<sup><a id="fn.2" name="fn.2" class="footnum" href="../orgmode-plugin%20%28version%20b%29/#fnr.2">2</a></sup><p class="footpara">
Second&nbsp;footnote.
</p>
</div>

</div>
</div>
    </div>

[gour]

Here is HTML generated directly by org-mode:

<div>
<p>This is a simple<a class="footnote-reference" href="#id2" id="id1"><sup>1</sup></a>&nbsp;sentence.</p>
<table class="docutils footnote" frame="void" id="id2" rules="none">
<colgroup>
<col class="label">
<col>
</colgroup>
<tbody valign="top"><tr>
<td class="label"><a class="fn-backref" href="#id1">[1]</a></td>
<td>First footnote and here is the second<a class="footnote-reference" href="#id4" id="id3"><sup>2</sup></a>  one.</td>
</tr></tbody>
</table>
<table class="docutils footnote" frame="void" id="id4" rules="none">
<colgroup>
<col class="label">
<col>
</colgroup>
<tbody valign="top"><tr>
<td class="label"><a class="fn-backref" href="#id3">[2]</a></td>
<td>Second footnote.</td>
</tr></tbody>
</table>
</div>
    </div>

and here is the output generated by org-mode plugin:

<div class="outline-text-2" id="text-1">
<p>
This is a simple<sup><a id="fnr.1" name="fnr.1" class="footref" href="../orgmode-plugin%20%28version%20b%29/#fn.1">1</a></sup> sentence.
</p>
</div>
</div>
<div id="footnotes">
<h2 class="footnotes">Footnotes: </h2>
<div id="text-footnotes">

<div class="footdef">
<sup><a id="fn.1" name="fn.1" class="footnum" href="../orgmode-plugin%20%28version%20b%29/#fnr.1">1</a></sup><p class="footpara">
First footnote and here is the second<sup><a id="fnr.2" name="fnr.2" class="footref" href="../orgmode-plugin%20%28version%20b%29/#fn.2">2</a></sup> one.
</p>
</div>

<div class="footdef">
<sup><a id="fn.2" name="fn.2" class="footnum" href="../orgmode-plugin%20%28version%20b%29/#fnr.2">2</a></sup><p class="footpara">
Second&nbsp;footnote.
</p>
</div>

</div>
</div>
    </div>

[ralsina]

Looks to me like someone who knows HTML and CSS for real can fix this in 15 minutes by tweaking our CSS.