PopUpFootNotes.xsl - Revision history

Joewiz at 15:21, 1 March 2010

2010-03-01T15:21:06Z

Piotr Banski: oops, wrong comment marker

2008-04-11T08:41:24Z

oops, wrong comment marker

Piotr Banski: + categories, slight e-mail addr obfuscation

2008-04-11T08:40:20Z

+ categories, slight e-mail addr obfuscation

James: slight modification

2008-04-10T22:40:16Z

slight modification

Lou: New page: From: Joe Wicentowski This footnote implementation (using CSS and XSL) gives you "pop-up" text for footnotes when you hover over them in the text, and places a copy of ...

2008-04-10T21:28:47Z

New page: From: Joe Wicentowski <joewiz@GMAIL.COM> This footnote implementation (using CSS and XSL) gives you "pop-up" text for footnotes when you hover over them in the text, and places a copy of ...

New page

From: Joe Wicentowski <joewiz@GMAIL.COM>

This footnote implementation (using CSS and XSL) gives you "pop-up"
text for footnotes when you hover over them in the text, and places a
copy of the footnote text below the text. Though not all browsers
support the CSS, this implementation degrades gracefully in my
testing; you can click on footnote numbers and go back and forth
between the text and the footnote text. (Note: This implementation
assumes you provide the footnote number in the form <note n="1">, but
it's fairly simple to have the XSL generate footnote numbers for you.)

Source text:
<p>TEI is an interesting markup language.<note n="1">See tei-c.org.</note></p>

XSLT:

<xsl:template name="document">
<html:div class="document">
<xsl:apply-templates/>
<xsl:if test="count(//tei:note) > 0">
<html:hr/>
<html:div class="footnotes">
<xsl:apply-templates select="//tei:note" mode="endlist"/>
</html:div>
</xsl:if>
</html:div>
</xsl:template>


<xsl:template match="tei:note">
<xsl:variable name="inc">
<xsl:number level="any" count="tei:note"/>
</xsl:variable>
<html:a href="#fn{$inc}" name="fnref{$inc}">
<html:sup>
<xsl:value-of select="@n"/>
</html:sup>
<html:span class="footnoteinline"><xsl:value-of
select="@n"/>. <xsl:value-of
select="."/></html:span>
</html:a>
</xsl:template>


<xsl:template match="tei:note" mode="endlist">
<xsl:variable name="incr">
<xsl:number level="any" count="tei:note"/>
</xsl:variable>
<html:p><html:a href="#fnref{$incr}" name="fn{$incr}"
title="Return to text">
<html:sup>
<xsl:value-of select="@n"/>
</html:sup>
</html:a> <xsl:value-of select="."/><xsl:text/></html:p>
</xsl:template>
<pre><nowiki>
CSS:
/* sup is used for footnote reference numbers */
sup {
vertical-align: super;
font-size: smaller;
line-height: 0em;
background-color:#F0F2EC;
border: solid 1px #CCCCCC;
padding: 1px 3px 1px 3px;
}

/* sets up line height for document paragraphs so the footnote
superscript fits */
div.document p {
line-height: 1.7em;
margin-top: 1.5em;
}

/* controls the rendering of text in the footnote div */
div.footnotes, div.footnotes p {
font-weight: normal;
font-size: .973em;
}

/* suppresses display of inline footnote text, setting up the pop-up on hover */
a span.footnoteinline {
display: n o n e;
}

/* turns on inline footnote text on hover, producing the pop-up */
a:hover span.footnoteinline {
display: block;
position: relative;
margin: 5px;
padding: 7px;
font-size: .825em;
line-height: 1.75em;
text-transform: none;
font-weight: normal;
background-color:#F0F2EC;
outline-style:solid;
outline-width:1px;
outline-color:#CCCCCC;
}
</nowiki></pre>

← Older revision		Revision as of 08:41, 11 April 2008
Line 1:		Line 1:
−	From: Joe Wicentowski (user: joewiz, domain: GMAIL.COM)/* what if Joe doesn't like spam ;-) */	+	From: Joe Wicentowski (user: joewiz, domain: GMAIL.COM) <!-- what if Joe doesn't like spam ;-) -->

	This footnote implementation (using CSS and XSL) gives you "pop-up"		This footnote implementation (using CSS and XSL) gives you "pop-up"

@@ Line 11: / Line 11: @@
 Source text:
-<p>TEI is an interesting markup language.<note n="1">See tei-c.org.</note></p>
+<pre><nowiki><p>TEI is an interesting markup language.<note n="1">See tei-c.org.</note></p></nowiki></pre>
 XSLT:
@@ Line 63: / Line 63: @@
      </xsl:template>
 </nowiki></pre>
 <pre><nowiki>
    /* sup is used for footnote reference numbers */
    sup {

@@ Line 1: / Line 1: @@
-From: Joe Wicentowski <joewiz@GMAIL.COM>
+From: Joe Wicentowski (user: joewiz, domain: GMAIL.COM)/* what if Joe doesn't like spam ;-) */
 This footnote implementation (using CSS and XSL) gives you "pop-up"
@@ Line 109: / Line 109: @@
+	}
 </nowiki></pre>

@@ Line 14: / Line 14: @@
 XSLT:
      <!-- The 'document' template. Sets up an HTML div tag to surround the
      resulting document.  Inside goes the document, and if the document
@@ Line 61: / Line 62: @@
              </html:a>&#160;<xsl:value-of select="."/><xsl:text/></html:p>
      </xsl:template>
 <pre><nowiki>
 CSS:
@@ Line 88: / Line 90: @@
    /* suppresses display of inline footnote text, setting up the pop-up on hover */
       a span.footnoteinline {
-	display: n o n e;
+ display:&nbsp;none;
+    }