lemonmade / bigfoot

A jQuery plugin for creating exceptional footnotes.
http://www.bigfootjs.com
MIT License
936 stars 69 forks source link

Wrong footnote backreference #50

Closed tmslnz closed 8 years ago

tmslnz commented 8 years ago

Input source:

<div class="inner-wrapper">
  <p>Ancient &amp; Modern was a gallery on Whitecross Street, the site of one of London&#x2019;s oldest street markets &#x2013; close to where the remains of William Blake are buried in Bunhill Fields Cemetery, and the site of William Caslon&#x2019;s type foundry<sup id="fnref:1301"><a href="#fn:1301" rel="footnote">1</a></sup>, which first opened in 1737. The gallery adopted a research-led curatorial approach to its exhibitions, and its directors were keen to closely connect the art they displayed with the local history of the surrounding area.</p>
  <p>In homage to its location, we used Caslon to form the gallery&#x2019;s logotype<sup id="fnref:1302"><a href="#fn:1302" rel="footnote">2</a></sup>, paired with a contemporary monospace typeface to emphasise the interplay of old and new. The invitations we designed for the gallery, over the course of several exhibitions, differ wildly in format and material, often making use of historic imagery relevant to the area, and juxtaposing this with a contemporary approach to type, layout and physicality.</p>
  <div class="footnotes">
    <hr>
    <ol>
      <li id="fn:1302">
        <p>Image of Caslon Type Foundry&#xA0;<a href="#fnref:1302" rev="footnote">&#x21A9;</a></p>
      </li>
      <li id="fn:1302">
        <p>Caslon was also one of the first typefaces used by the Church of England for its publication Hymns Ancient and Modern.&#xA0;<a href="#fnref:1302" rev="footnote">&#x21A9;</a></p>
      </li>
    </ol>
  </div>
</div>

Result:

<div class="inner-wrapper">
  <p>Ancient &amp; Modern was a gallery on Whitecross Street, the site of one of London’s oldest street markets – close to where the remains of William Blake are buried in Bunhill Fields Cemetery, and the site of William Caslon’s type foundry<sup id="fnref:1301" data-footnote-backlink-ref="fnref:1301" data-footnote-ref="#fn:1301"><a href="#fn:1301" rel="footnote">1</a></sup>, which first opened in 1737. The gallery adopted a research-led curatorial approach to its exhibitions, and its directors were keen to closely connect the art they displayed with the local history of the surrounding area.</p>
  <p>In homage to its location, we used Caslon to form the gallery’s logotype<div class="bigfoot-footnote__container"> <button class="bigfoot-footnote__button" id="fnref:1302" data-footnote-number="1" data-footnote-identifier="1" alt="See Footnote 1" rel="footnote" data-bigfoot-footnote="<p>Image of Caslon Type Foundry</p>"> <svg class="bigfoot-footnote__button__circle" viewBox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> <svg class="bigfoot-footnote__button__circle" viewBox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> <svg class="bigfoot-footnote__button__circle" viewBox="0 0 6 6" preserveAspectRatio="xMinYMin"><circle r="3" cx="3" cy="3" fill="white"></circle></svg> </button></div><sup id="fnref:1302" data-footnote-backlink-ref="fnref:1302" data-footnote-ref="#fn:1302" class="footnote-print-only"><a href="#fn:1302" rel="footnote">2</a></sup>, paired with a contemporary monospace typeface to emphasise the interplay of old and new. The invitations we designed for the gallery, over the course of several exhibitions, differ wildly in format and material, often making use of historic imagery relevant to the area, and juxtaposing this with a contemporary approach to type, layout and physicality.</p>
  <div class="footnotes">
    <hr>
    <ol>
      <li id="fn:1302" class="footnote-processed footnote-print-only">
        <p>Image of Caslon Type Foundry&nbsp;<a href="#fnref:1302" rev="footnote">↩</a></p>
      </li>
      <li id="fn:1302">
        <p>Caslon was also one of the first typefaces used by the Church of England for its publication Hymns Ancient and Modern.&nbsp;<a href="#fnref:1302" rev="footnote">↩</a></p>
      </li>
    </ol>
  </div>
</div>
tmslnz commented 8 years ago

Sorry… right after pasting the HTML snippets I realised it’s an issue on my end.