New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

footnotes should use semantic markup #30

Open
anarcat opened this Issue May 4, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@anarcat

anarcat commented May 4, 2016

It seems that multimarkdown does not use standard semantic markup for footnote references. e.g. this piece of code:

#!/usr/bin/perl -w

use Text::Markdown::Discount;
use Text::MultiMarkdown;
my $text = <<EOF;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.[^f]

[^f]: this is a footnote

EOF
my $html = Text::MultiMarkdown::markdown($text);
print $html;
$html = Text::Markdown::Discount::markdown($text, Text::Markdown::Discount::MKD_EXTRA_FOOTNOTE());
print $html;

outputs this:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.<a href="#fn:f" id="fnref:f" class="footnote">1</a></p>

<div class="footnotes">
<hr />
<ol>

<li id="fn:f"><p>this is a footnote<a href="#fnref:f" class="reversefootnote">&#160;&#8617;</a></p></li>

</ol>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>
<div class="footnotes">
<hr/>
<ol>
<li id="fn:1">
<p>this is a footnote<a href="#fnref:1" rev="footnote">&#8617;</a></p></li>
</ol>
</div>

Notice how Discount (correctly, IMHO) outputs the footnote reference within a <sup> tag to make sure the footnote is smaller and "in exponent".

Without a <sup> tag, I have to add custom elements to my stylesheet otherwise footnotes appear

a.footnote { vertical-align: super; font-size: xx-small; }

This is without the style:

image

And this is with the style:

image

If MMD would just output a supplementary <sup> here, things would look much better without any custom style. Out of the box, the footnotes don't really look nice at all, and in fact, confuse both regular and screen readers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment