Sourcecode Listing of

http://purl.oclc.org/NEUMES/ref/glyphs_manifest.xsl





Color Key :   [•] XML code      [•] HTML      [•] symbol substitution      [•] XML comment   

Line
0001 <?xml version='1.0' encoding="UTF-8"?>
0002 <!--
0003 *   XML Transformation (XSLT) generated on 18 June 2006.
0004 *   Filename: http://www.scribeserver.com/NEUMES/xml/glyphs_manifest.xsl
0005 *   Version: 1.1.d
0006 *   Owner: The NEUMES Project
0007 *    (Neumed and Ecphonetic Universal Manuscript Encoding Standard)
0008 *    for details see, http://purl.oclc.org/SCRIBE/NEUMES/
0009 *   Authors: Louis W. G. Barton and Barry Ng.
0010 *   Type: XML XSLT
0011 -->
0012 
0013 <!--   Glyphs Manifest visualization XSLT
0014    Output: HTML visualization of a glyph image set for NeumesXML.
0015    Reference: JavaScript array for cross-window reading of glyph data.
0016 
0017    Protected by law under one or more of the following copyrights:
0018    Copyright 2005-2006, The University of Oxford.
0019    Copyright 2003-2005, Louis W. G. Barton.
0020    Copyright 2002-2003, The President and Fellows of Harvard College;</span>
0021     contains software or other intellectual property licensed from
0022     Louis W. G. Barton, copyright 1995-2001 by Louis W. G. Barton.
0023 
0024    The copyright holders grant royalty-free license to transmit, display,
0025    perform and/or distribute without modification the Glyphs Manifest XSLT
0026    version 1 Script and its accompanying documentation for non-commercial
0027    educational, cultural, and charitable uses, provided that the above
0028    copyright notice and this paragraph appear in all copies. The copyright
0029    holders make no representation about the suitability of the Script and
0030    its accompanying documentation for any purpose. It is provided "as is"
0031    without expressed or implied warranty.
0032 -->
0033 
0034 <!-- Programmer's remarks:
0035 - To do: For red glyphs, check whether separate manifest and glyphs_directory.xsl are needed.
0036 - To do: Make 'http://www.scribeserver.com/NEUMES/xml/images/', <span class="SymbolColor">&copy;</span> and <span class="SymbolColor">&nbsp;</span> as Entities.
0037 - So that developers of glyph image sets can work on a manifest XML file locally, this XSLT
0038   detects whether it should retrieve glyph images from the client-side or the server-side.
0039   (If client-side, it retrieves the glyph images from the same local directory as this file;</span>
0040   some other images and .js files are still retrieved from the server, and so an Internet
0041   connection is preferred during client-side operation but it is not necessary.) The presence
0042   of the file 'glyphs_directory.xsl' in the same local directory serves as a 'flag' signalling
0043   client-side operation.
0044 - JavaScript defines an array of glyph objects for cross-window reading of glyph data by
0045   NeumesXML visualization XSLT. The manifest data are loaded into a JavaScript array instead
0046   of being handled by XSLT, because the NeumesXML visualization XSLT allows the user to
0047   redraw the visualization using a different glyph image set. The information is carried
0048   in the URL parameters of the visualization call, and it is not accessible from XSLT.
0049 -->
0050 
0051 <xsl:stylesheet version="1.0"
0052    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
0053    xmlns:gm="http://www.scribeserver.com/NEUMES/xml/glyphs_manifest">
0054 
0055 <xsl:output method="html"/>
0056 
0057 <xsl:template match="gm:glyphs_manifest">
0058 
0059 <!--   **************************
0060    ***  START, HTML CODE  ***
0061    **************************
0062 -->
0063 <head>
0064 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
0065 <title>NEUMES Project: Glyphs Manifest for
0066    <xsl:value-of select="//gm:notation/@family"/>
0067    <xsl:if test="//gm:notation/@species != ''">,
0068       <xsl:value-of select="//gm:notation/@species"/>
0069    </xsl:if>
0070 </title>
0071 <meta Name="Notice" content="Copyright 2005-2006 The University of Oxford;
0072   contains software or other intellectual property
0073   copyright 1995-2005 Louis W. G. Barton" />
0074 <meta Name="creator" Content="Barry Ng and Louis W. G. Barton" />
0075 <meta HTTP-EQUIV="imagetoolbar" CONTENT="no" />
0076 <link HRef="http://www.scribeserver.com/favicon.ico" Rel="SHORTCUT ICON" />
0077 <!--   Glyphs Manifest XSLT for JavaScript
0078    Author: Louis W.G. Barton, for the NEUMES Project
0079    Version: 12 May 2006
0080    Copyright 2006, The University of Oxford
0081 
0082    Abstract: This XSLT assigns Glyphs Manifest data to JavaScript variables and an array,
0083    for use of these data for calculating image offsets in the visualization XSLT.
0084 
0085    Dependency: This JavaScript is not stand-alone: it depends on execution of XSLT.
0086 
0087    Programmers Remarks: Comments are written in XSL style (not JavaScript style) for
0088    their early elimination by the XSLT.
0089 -->
0090 
0091 <style type="text/css">
0092 BODY {
0093    color: rgb(0,51,102);
0094    background-color: rgb(204,204,153);
0095    margin-top: 0px;
0096    margin-left: 0px;
0097    margin-bottom:6px;
0098    margin-right:0px;
0099 }
0100 .titlesfont {
0101    font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
0102    font-size:15px;
0103    font-weight=bold; 
0104    color:#800000;
0105 }
0106 .glyphbox {
0107    border-top: 1px solid maroon;
0108    border-left: 1px solid blue;
0109    border-bottom: 1px solid maroon;
0110    border-right: 1px solid blue;
0111 }
0112 .description {
0113    font: normal 12px Times,serif;
0114    color: black;
0115    display: none;
0116 }
0117 caption {
0118     border: 1px solid rgb(144,144,0);
0119    border-collapse: collapse;
0120    background-color: rgb(207,207,207);
0121    padding-top: 6px;
0122    padding-left: 8px;
0123    padding-bottom: 5px;
0124    padding-right: 7px;
0125    text-align: left;
0126    font: normal 13px Arial,Helvetica,sans-serif;
0127    color: rgb(28,0,0);
0128 }
0129 th {
0130    /* used in thead, column headings */
0131    border: 1px solid rgb(128,128,128);
0132    border-collapse: collapse;
0133    color: rgb(0,51,102);
0134    font: bold 16px Times,serif;
0135 }
0136 TABLE.neume {
0137    display: inline;
0138    vertical-align: baseline;
0139    border-collapse: collapse;
0140    border-spacing: 0pt 0pt;
0141    padding: 0px;
0142    margin-top: 0px;
0143    margin-bottom: 3px;  /* differs from NeumesXML_xsl.css */
0144    page-break-inside: avoid;
0145 }
0146 </style>
0147 
0148 <!--   ***************************
0149    ***  START, JAVASCRIPT  ***
0150    ***************************
0151 -->
0152 <script type="text/javascript"
0153   src="http://www.scribeserver.com/NEUMES/scripts/imageprotect.js"></script>
0154 <!-- Hide from non-JS browsers in case of viewing manifest only: -->
0155 <script type="text/javascript"><xsl:text disable-output-escaping="yes">&lt;!&#045;-</xsl:text>
0156 
0157 
0158 <!--   **************************
0159    ***  GLOBAL VARIABLES  ***
0160    **************************
0161 -->
0162    // XSLT dependencies:
0163    var description='<xsl:value-of select="//gm:notation/@description"/>';
0164    var discipline='<xsl:value-of select="//gm:notation/@discipline"/>';
0165    var family='<xsl:value-of select="//gm:notation/@family"/>';
0166    var species=
0167       <xsl:choose>
0168          <xsl:when test="//gm:notation/@species=''">'';</xsl:when>
0169          <xsl:otherwise>'<xsl:value-of
0170            select="//gm:notation/@species"/>';</xsl:otherwise>
0171       </xsl:choose>
0172    var heighted='<xsl:value-of select="//gm:notation/@heighted"/>';
0173    var pitched='<xsl:value-of select="//gm:notation/@pitched"/>';
0174 
0175    var virtual_path='<xsl:value-of select="//gm:glyphSetProperties/@virtual_path"/>';
0176    var physical_basepath='<xsl:value-of
0177      select="//gm:glyphSetProperties/@physical_basepath"/>';
0178    var physical_localpath='<xsl:value-of
0179      select="//gm:glyphSetProperties/@physical_localpath"/>';
0180    var widestGlyph='<xsl:value-of select="//gm:glyphSetProperties/@widestGlyph"/>';
0181    var tallestGlyph='<xsl:value-of select="//gm:glyphSetProperties/@tallestGlyph"/>';
0182    //[end, XSLT dependencies]
0183 
0184    var objectArrayIndex=0;  <!-- index into the array of glyphObjects; first elt is 0 -->
0185    var glyphObjectArray=new Array();  <!-- array of glyphObjects -->
0186    var countGlyphsCalc=0;  <!-- calculated, number of images in image set -->
0187    var widestGlyphCalc=0;  <!-- calculated, widest image in image set -->
0188    var tallestGlyphCalc=0;  <!-- calculated, tallest image in image set -->
0189    var greatestDescender=0;  <!-- calculated=greatest baseline number in image set -->
0190 
0191 
0192 <!--   *******************
0193    ***  FUNCTIONS  ***
0194    *******************
0195 -->
0196    <!-- Constructor for glyphObject: -->
0197    function glyphObject(description, tones, mnemonic_code, substitute_style, filename,
0198      imgWidth, imgHeight, baseline) {
0199       this.description=description;
0200       this.tones=tones;
0201       this.mnemonic_code=mnemonic_code;
0202       this.substitute_style=substitute_style;
0203       this.filename=filename;
0204       this.imgWidth=imgWidth;
0205       this.imgHeight=imgHeight;
0206       this.baseline=baseline;
0207    }  <!--[end, glyphObject constructor]-->
0208 
0209    <!-- Add a new glyphObject to the array: -->
0210    function setObject(description, tones, mnemonic_code, substitute_style, filename,
0211      imgWidth, imgHeight, baseline) {
0212       glyphObjectArray[objectArrayIndex]=
0213       new glyphObject(description, tones, mnemonic_code, substitute_style, filename,
0214       imgWidth, imgHeight, baseline);
0215       objectArrayIndex=objectArrayIndex + 1;  // bump index
0216    }  <!--end, setObject()-->
0217 
0218 
0219 <!--   *********************
0220    ***  INLINE CODE  ***
0221    *********************
0222 -->
0223 /* Preload Images for Project Title: */
0224 if (document.images) {
0225    var img1=new Image();
0226    var img2=new Image();
0227    var img3=new Image();
0228    var img4=new Image();
0229    img1.src='http://www.scribeserver.com/NEUMES/images/blueshade_bg.gif';
0230    img2.src='http://www.scribeserver.com/NEUMES/images/neumes_logo.gif';
0231    img3.src='http://www.scribeserver.com/NEUMES/images/neumes_title.gif';
0232    img4.src='http://www.scribeserver.com/NEUMES/images/spacer1.gif';
0233 } //end, preload images
0234 
0235 // XSLT dependencies:
0236 <!-- Add glyph to JavaScript array:
0237  Template EscApos adds '\' [JavaScript escape] before each single quote in Description
0238  [single-quotes are allowed in attribute values of Manifest XML files].
0239  -->
0240 <!-- For each glyph: -->
0241 <xsl:for-each select="gm:glyph">
0242    setObject('<xsl:call-template name="EscApos">
0243             <xsl:with-param name="passString" select="@description"/>
0244          </xsl:call-template>',
0245       '<xsl:value-of select="@tones"/>',
0246       '<xsl:value-of select="@mnemonic_code"/>',
0247       '<xsl:value-of select="@substitute_style"/>',
0248       '<xsl:value-of select="@filename"/>',
0249       '<xsl:value-of select="@width"/>',
0250       '<xsl:value-of select="@height"/>',
0251       '<xsl:value-of select="@baseline"/>');
0252 </xsl:for-each>
0253 //[end, XSLT dependencies]
0254 
0255 <!--[end, hiding:]-->
0256 <xsl:text disable-output-escaping="yes">//&#045;-></xsl:text>
0257 </script>
0258 
0259 
0260 <!-- Hide from non-JS browsers in case of viewing manifest only: -->
0261 <script type="text/javascript"><xsl:text disable-output-escaping="yes">&lt;!&#045;-</xsl:text>
0262 var plus_img='http://www.scribeserver.com/NEUMES/xml/images/plus_sm.gif';
0263 var minus_img='http://www.scribeserver.com/NEUMES/xml/images/minus_sm.gif';
0264 var descriptionsState='hidden';  // current state: hide or show
0265 
0266 /*   FN: PULLDOWN for Symbol Descriptions
0267  *
0268  * Toggle show/hide
0269  * Pass in String of CSS class name of Table Row
0270  */
0271 function pulldown(cssClass) {
0272    var arrElements=document.getElementsByTagName('tr'); // array of all Table Row elements
0273    var imgID=cssClass + 'Control';  // anchored IMG ID must be 'cssClassControl'
0274    var imgObj;  // temp handle, plus/minus control IMG
0275 
0276    if(document.getElementById) {  // Level 1 DOM
0277       imgObj=document.getElementById(imgID);
0278    } else if(document.all) {  // IE4 model
0279       imgObj=document.all[imgID];
0280    } else if(document.layers) {  // NS4 model
0281       imgObj=document.layers[imgID];
0282    }  //end, if/else browser model
0283    if ('hidden' == descriptionsState) {  // current state
0284       for (var i=0; i &lt; arrElements.length; i++ ) {
0285          // just the Table Rows with className:
0286          if(arrElements[i].className.indexOf(cssClass) != -1) {
0287             arrElements[i].style.display='block';  // show
0288          }
0289       }
0290       descriptionsState='showing';  // change state
0291       imgObj.src=minus_img;  // change icon
0292    } else {  // default
0293       for (var i=0; i &lt; arrElements.length; i++ ) {
0294          // just the Table Rows with className:
0295          if(arrElements[i].className.indexOf(cssClass) != -1) {
0296             arrElements[i].style.display='none';  // hide
0297          }
0298       }
0299       descriptionsState='hidden';  // change state
0300       imgObj.src=plus_img;  // change icon
0301    }
0302    return true;
0303 }  //end, pulldown()
0304 <!--[end, hiding:]-->
0305 <xsl:text disable-output-escaping="yes">//&#045;-></xsl:text>
0306 </script>
0307 <!--[end, Glyphs Manifest XSLT for JavaScript]-->
0308 
0309 <!--   *************************
0310    ***  END, JAVASCRIPT  ***
0311    *************************
0312 -->
0313 
0314 <!-- <base href="http://www.scribeserver.com/NEUMES/xml/"/> -->
0315 </head>
0316 
0317 <body>
0318 
0319 <!-- Project Title: -->
0320 <table width="100%" cellspacing="0" cellpadding="0">
0321 <colgroup><col width="58" /><col width="532" /><col width="*" /></colgroup>
0322 <tbody><tr valign="top"
0323  style="background-image:url(http://www.scribeserver.com/NEUMES/images/blueshade_bg.gif);
0324  background-color:rgb(21,67,155); color:inherit;">
0325 <td><a href="http://purl.oclc.org/SCRIBE/NEUMES/" target="_top"><img width="52" height="40"
0326  hspace="3" vspace="2"
0327  src="http://www.scribeserver.com/NEUMES/images/neumes_logo.gif" border="0"
0328  alt="goto: The NEUMES Project homepage" /></a></td>
0329 <td><img width="530" height="46" src="http://www.scribeserver.com/NEUMES/images/neumes_title.gif"
0330  hspace="1" vspace="0" alt="Neumed and Ekphonetic Universal Manuscript Encoding
0331  Standard" /></td>
0332 <td><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text></td></tr></tbody></table>
0333 <!--[end, Project Title]-->
0334 
0335 <!-- Notation Family and Description: -->
0336 <TABLE style="margin-top:18px; margin-bottom:1px;" width="600" cellspacing="0"
0337  cellpadding="0" border="0" align="left">
0338 <tbody>
0339 <TR valign="top">
0340 <TD width="265"><img
0341  SRC="http://www.scribeserver.com/NEUMES/xml/images/glyphs-manifest.gif" alt="" /></TD>
0342 <TD style="padding-left:8px; padding-top:1px;"><span class="titlesfont">Discipline:
0343  <font color="black"><xsl:value-of select="//gm:notation/@discipline"/></font><br />
0344 Notation Family:
0345  <font color="black"><xsl:value-of select="//gm:notation/@family"/></font><br/>
0346 Species: <font color="black">
0347    <xsl:choose>
0348       <xsl:when test="//gm:notation/@species=''">(none)</xsl:when>
0349       <xsl:otherwise><xsl:value-of select="//gm:notation/@species"/></xsl:otherwise>
0350    </xsl:choose>
0351 </font><br/>
0352 Name:
0353  <font color="black"><xsl:value-of select="//gm:notation/@description"/></font></TD>
0354 </TR>
0355 </tbody>
0356 </TABLE><br clear="left" />
0357 
0358 <!-- Roster of Glyphs: -->
0359 <TABLE style="width:593px !important; background-color:rgb(255,253,174);" border="1"
0360  borderColor="#C5D0B2" cellspacing="0" cellpadding="3" align="left">
0361 <colgroup>
0362   <col style="FONT-SIZE:14px;" />
0363   <col style="text-align:center;" />
0364   <col />
0365   <col />
0366   <col style="text-align:center;" />
0367   <col style="padding-left:3px; background-color:rgb(250,235,199);" />
0368   <col style="padding-left:3px; background-color:rgb(163,177,204);" />
0369   <col style="background-color:rgb(255,255,0); text-align:center;" />
0370 </colgroup>
0371 <tbody>
0372 <caption align="left">In alphabetical order by
0373  <span style="font: bold 15px Times,serif;">Image Filename
0374  <img width="30" height="0" src="http://www.scribeserver.com/NEUMES/images/spacer1.gif"
0375  alt="" />
0376  Widest image: <xsl:value-of select="//gm:glyphSetProperties/@widestGlyph"/>px
0377  <img width="16" height="0" src="http://www.scribeserver.com/NEUMES/images/spacer1.gif"
0378  alt="" />
0379  Tallest image: <xsl:value-of select="//gm:glyphSetProperties/@tallestGlyph"/>px
0380  <div style="font-size:10px; font-family:Verdana,Geneva,Arial,sans-serif;
0381   color:rgb(128,0,0); padding-top:10px; padding-bottom:0px;">
0382  <script type="text/javascript"><xsl:text disable-output-escaping="yes">&lt;!&#045;-</xsl:text>
0383   document.writeln('Toggle display of &lt;b>Symbol Descriptions&lt;/b>'+
0384   '&lt;a style="" href="#" ' +
0385   'onClick="javascript:noop=pulldown(\'description\'); if(blur) this.blur(); return false;">'+
0386   '&lt;IMG id="descriptionControl" width="14" height="14" '+
0387   'style="vertical-align:middle; margin-left:3px; margin-right:42px;" '+
0388   'src="http:\/\/www.scribeserver.com\/NEUMES\/xml\/images\/plus_sm.gif" '+
0389   'border="0" alt="show\/hide"\/>&lt;\/a>');
0390   var definitionGlyph = 'The word \\\'glyph\\\' does not mean \\\'neume\\\': glyphs just '+
0391    'are components of graphical presentation. A glyph can correspond to a neume, part '+
0392    'of a neume, or a non-neumatic symbol. In naming our glyphs, we have borrowed '+
0393    'from the names of neumes, but a crucial distinction must be made between concrete '+
0394    'visualization and abstract representation: for purposes of the NEUMES Project, '+
0395    'glyphs are \\\'concrete\\\', but neumes are \\\'abstract\\\'. '+
0396    '[See the Data Representation section of the NEUMES website for our taxonomy '+
0397    'of neumes as logical entities in transcriptions.]';
0398   document.writeln('Definition of a \'&lt;b>Glyph&lt;/b>\' '+
0399    '&lt;a href=\"javascript:var y=confirm(\'' + definitionGlyph + '\'); ' +
0400    'if(blur) this.blur();\">'+
0401    '&lt;IMG id="definitionGlyph" width="12" height="12" '+
0402    'style="vertical-align:middle; margin-left:3px; margin-right:0px;" '+
0403    'src="http:\/\/www.scribeserver.com\/NEUMES\/xml\/images\/question-mark.gif" '+
0404    'border="0" alt="Definition of Glyph">&lt;\/a>');
0405  <xsl:text disable-output-escaping="yes">//&#045;-></xsl:text>
0406  </script>
0407  </div>
0408 </caption>
0409 
0410 <thead>
0411    <th>Mnemonic Code</th>
0412    <th style="font: normal 13px Arial,Helvetica,sans-serif;">Substitute Style<br/><IMG
0413     style="MARGIN-TOP:4px; VERTICAL-ALIGN:middle; BORDER: rgb(212,158,168) 1px solid;"
0414     width="16" height="16" alt=""
0415     src="http://www.scribeserver.com/NEUMES/xml/images/substitute_style.gif" /></th>
0416    <th>Image</th>
0417    <th>Image Filename</th>
0418    <th style="font: normal 13px Arial,Helvetica,sans-serif;">Number<br/>of Tones<br/><IMG
0419     style="MARGIN-TOP:2px; VERTICAL-ALIGN:middle; BORDER: rgb(128,128,128) 1px solid;"
0420     width="16" height="16" alt="" 
0421     src="http://www.scribeserver.com/NEUMES/xml/images/tones_sm.gif" /></th>
0422    <th style="font: normal 13px Arial,Helvetica,sans-serif;">Image Width<br/>
0423     <IMG style="vertical-align:middle; margin-top:2px;" width="16" height="16"
0424     src="http://www.scribeserver.com/NEUMES/xml/images/width_sm.gif" border="1" alt="" />
0425     pixels</th>
0426    <th style="font: normal 13px Arial,Helvetica,sans-serif;">Image Height<br />
0427     <IMG style="vertical-align:middle; margin-top:2px;" width="16" height="16"
0428     src="http://www.scribeserver.com/NEUMES/xml/images/height_sm.gif" border="1" alt="" />
0429     pixels</th>
0430    <th style="font: normal 13px Arial,Helvetica,sans-serif;">Baseline<br/>(up)<br/>
0431     <IMG style="vertical-align:middle; margin-top:2px;" width="16" height="16" border="1"
0432     src="http://www.scribeserver.com/NEUMES/xml/images/baseline_sm.gif" alt="" />
0433     pixels</th>
0434 </thead>
0435 
0436 <!-- +20 gives 10px padding, top and bottom: -->
0437 <xsl:variable name="glyph_cell_height" select="//gm:glyphSetProperties/@tallestGlyph + 20"/>
0438 
0439 <!-- Determine whether session is Servlet transformation or client-side transformation.
0440    In case client-side, then '.' is the directory containing the glyphs-manifest XML file.
0441    Pre-condition: file 'glyphs_directory.xsl' must exist in client's glyph-set directory.
0442    Post-condition: the variable $client-side is _true_ if client-side transformation,
0443       else it is _false_.
0444    Remarks: <xsl:value-of select="current()"/> is the same as <xsl:value-of select="."/>
0445       '/' This selects the document root node.
0446 -->
0447 <xsl:variable name="client-side" select="boolean(document('glyphs_directory.xsl', .))" />
0448 
0449 <!-- DEBUG, only:
0450 <xsl:choose>
0451    <xsl:when test="not($client-side)"><H1>server-side</H1></xsl:when>
0452    <xsl:otherwise><H1>client-side</H1></xsl:otherwise>
0453 </xsl:choose>
0454 -->
0455 
0456 <!--   *************************
0457    ***  FOR EACH GLYPH:  ***
0458    *************************
0459 -->
0460 <xsl:for-each select="gm:glyph">
0461    <TR>
0462 <!--   <TD><xsl:call-template name="ReplaceAmp">
0463       <xsl:with-param name="passString" select="@mnemonic_code"/>
0464    </xsl:call-template></TD> -->
0465    <TD><xsl:value-of select="@mnemonic_code" /></TD>
0466    <TD><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>
0467    <xsl:if test="@substitute_style > 1">
0468       <xsl:text>substitute style </xsl:text>
0469       <xsl:value-of select="@substitute_style"/>
0470    </xsl:if>
0471    </TD>
0472 
0473    <!-- Image cell: -->
0474    <TD>
0475       <!-- inner Table to enforce Cell height, for placement of Background image
0476          Calculations:
0477          1/ Glyph displays vertically centered in the block,
0478             display:block;</span> top:($glyph_cell_height - @height)div 2.
0479          2/ BG IMG [background counted down from top of the block]:
0480             top of the image is down ($glyph_cell_height - @height) div 2
0481             [i.e., half of the padding];</span> go down from there the part of the
0482             image that is above the baseline, @height - @baseline.
0483       -->
0484       <table cellpadding="0" cellspacing="0">
0485       <tr style="background-color:rgb(219,228,207); color:inherit;">
0486       <xsl:element name="td">
0487       <xsl:attribute name="style">
0488          <xsl:text>display:block; background-color:rgb(219,228,207); color:inherit;
0489           background-image:
0490           url('http://www.scribeserver.com/NEUMES/xml/images/redline.gif');
0491           background-repeat:repeat-x; background-position-y: </xsl:text>
0492          <xsl:value-of select="(($glyph_cell_height - @height) div 2) +
0493             @height - @baseline"/>
0494          <xsl:text>px !important; width:60px; height: </xsl:text>
0495          <xsl:value-of select="$glyph_cell_height"/>
0496          <xsl:text>px !important; text-align:center;</xsl:text>
0497       </xsl:attribute>
0498       <xsl:element name="div">
0499       <xsl:attribute name="style">
0500          <xsl:text>display:block; top:</xsl:text>
0501          <!-- Adjustment for image (Reduce white space): -->
0502          <xsl:value-of select='($glyph_cell_height - @height) div 2'/>
0503          <xsl:text>px !important; left:</xsl:text>
0504          <xsl:value-of select="(60 - @width) div 2"/>
0505          <xsl:text>px; z-index:2;</xsl:text>
0506       </xsl:attribute>
0507 
0508       <!--
0509       *******************************
0510       ***  RETRIEVE GLYPH IMAGE:  ***
0511       *******************************
0512       -->
0513       <xsl:element name="img">
0514       <xsl:attribute name="src">
0515          <xsl:if test="not($client-side)">
0516             <xsl:value-of select="//gm:glyphSetProperties/@virtual_path"/>
0517          </xsl:if>
0518          <!-- If client-side, then pull image from current directory: -->
0519          <xsl:value-of select="@filename"/>
0520       </xsl:attribute>
0521       <xsl:attribute name="class">glyphbox</xsl:attribute>
0522       </xsl:element>  <!--[end, img]-->
0523       </xsl:element>  <!--[end, div]-->
0524       </xsl:element>  <!--[end, td]-->
0525       </tr></table>
0526    </TD>
0527    <!--[end, Image cell]-->
0528 
0529    <TD><xsl:value-of select="@filename"/></TD>
0530    <TD><xsl:value-of select="@tones"/></TD>
0531    <TD><xsl:value-of select="@width"/></TD>
0532    <TD><xsl:value-of select="@height"/></TD>
0533    <TD><xsl:value-of select="@baseline"/></TD>
0534    </TR>
0535 
0536    <!-- Separate line for Description (optional pulldown): -->
0537    <tr class="description">
0538    <TD ColSpan="8"><b>Symbol Description: </b><xsl:value-of select="@description"/></TD>
0539    </tr>
0540 </xsl:for-each>
0541 </tbody>
0542 </TABLE>
0543 <br clear="left" />
0544 
0545 <!-- Calculate maxima of image set: -->
0546 <script type="text/javascript"><xsl:text disable-output-escaping="yes">&lt;!&#045;-</xsl:text>
0547 countGlyphsCalc=0;
0548 widestGlyphCalc=0;
0549 tallestGlyphCalc=0;
0550 greatestDescender=0;
0551 for (var i=0; i &lt; glyphObjectArray.length; i++) {
0552    countGlyphsCalc++;
0553    if (parseInt(glyphObjectArray[i].imgWidth) > widestGlyphCalc) {
0554       widestGlyphCalc=parseInt(glyphObjectArray[i].imgWidth);
0555    }
0556    if (parseInt(glyphObjectArray[i].imgHeight) > tallestGlyphCalc) {
0557       tallestGlyphCalc=parseInt(glyphObjectArray[i].imgHeight);
0558    }
0559    if (parseInt(glyphObjectArray[i].baseline) > greatestDescender) {
0560       greatestDescender=parseInt(glyphObjectArray[i].baseline);
0561    }
0562 }  //end, for i
0563 <!--[end, hiding:]-->
0564 <xsl:text disable-output-escaping="yes">//&#045;-></xsl:text>
0565 </script>
0566 
0567 
0568 <!--   *****************
0569    ***  MOCKUP:  ***
0570    *****************
0571 xxxS/R: .baseline = .imgBaseline
0572 
0573 NOTE:
0574 In HTML, vertical positions must be set from the top of box (position:relative;</span> top).
0575 [Baseline numbers in the Glyphs Manifest, however, are counted up from the bottom.]
0576 
0577 
0578 glyphRowHeight calculation:
0579                        ______ _ _ _ _ top of Table box
0580                        |    |
0581 tallest img ........./ |    |
0582                      \ |    V
0583                        |____| _ _ _ _ baselineDescent
0584 greatest descender ../ |    |
0585                      \ |____|
0586 
0587 img:
0588           ______ _ _ _ _ top
0589           |    |
0590           |____| _ _ _ _ baseline [counted up from bottom]
0591           |    ^
0592           |____|
0593 
0594 -->
0595 
0596 <table style="background-color:#E6E3A0; color:#000000;
0597   background-image:url(http://www.scribeserver.com/NEUMES/xml/images/parch3.jpg);
0598   padding-top:2px; padding-left:5px; padding-bottom:0px; padding-right:8px;
0599   margin-top:5px; margin-bottom: 0px;"
0600   cellspacing="0" border="0">
0601 <tbody>
0602 
0603 <script type="text/javascript"><xsl:text disable-output-escaping="yes">&lt;!&#045;-</xsl:text>
0604 
0605 var glyphRowHeight=parseInt(tallestGlyph) + greatestDescender;  // estimated maximum height
0606 var baselineDescent=parseInt(tallestGlyph);  // constant: vertical point-of-origin for display
0607 var imgDescent=0;  // variable: vertical descent to top of current image
0608 
0609 document.writeln('&lt;tr style=\"display:table-row; height:' + glyphRowHeight +
0610    'px !important; padding-top:0px; padding-bottom:0px;\" valign="top">');
0611 document.write('&lt;td style=\"display:table-cell; vertical-align:top; text-align:left; '+
0612    'font-size:8pt; font-weight:bold; font-family:\'Monotype Corsiva\',Times,serif; '+
0613    'white-space:nowrap;\">&lt;img width="9" height="0" alt="" '+
0614    'src="http:\/\/www.scribeserver.com\/NEUMES\/images\/spacer1.gif">');  // inset
0615 for (var i=0; i &lt; glyphObjectArray.length; i++) {
0616    // class "neume" has a margin-bottom.
0617    document.writeln('&lt;table class="neume" BORDER="0" '+
0618       'style=\"height:' + glyphRowHeight + 'px !important;\">');
0619    document.writeln('&lt;tbody>');
0620    document.write('&lt;tr valign="top">&lt;td>');
0621    imgDescent=baselineDescent - parseInt(glyphObjectArray[i].imgHeight) +
0622       parseInt(glyphObjectArray[i].baseline);
0623    document.write('&lt;img width=\"' + glyphObjectArray[i].imgWidth + '\" '+
0624       'height=\"' + glyphObjectArray[i].imgHeight + '\" alt="" hspace="6" '+
0625       'src=\"<xsl:value-of select="//gm:glyphSetProperties/@virtual_path"/>'+
0626       glyphObjectArray[i].filename + '\"  style=\"position:relative; top:' +
0627       imgDescent + 'px !important;\">&lt;/td>'+
0628       '&lt;/tr>&lt;/tbody>&lt;/table>');
0629 }  //end, for i
0630 document.writeln('&lt;/td>&lt;/tr>');
0631 <!--[end, hiding:]-->
0632 <xsl:text disable-output-escaping="yes">//&#045;-></xsl:text>
0633 </script>
0634 <!--  style="overflow:hidden;" doesn't work -->
0635 <tr>
0636 <td style="display:table-cell; vertical-align:baseline; text-align:left; overflow-x:hidden;
0637    text-overflow:clip;
0638    font-size:16pt; font-weight:bold; font-family:'Monotype Corsiva',Times,serif;
0639    white-space:nowrap; padding-top:0px; padding-bottom:12px;">Lorem ipsum
0640    dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
0641    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
0642    laboris nisi ut aliquip ex ea commodo consequat. ...</td>
0643 </tr>
0644 </tbody>
0645 </table>
0646 
0647 <!--   ******************
0648    ***  SUMMARY:  ***
0649    ******************
0650 -->
0651 <table cellspacing="0" cellpadding="1"
0652  style="margin-top:15px; margin-left:26px; margin-bottom:9px; margin-right:0px;">
0653 <tbody>
0654 <!-- Hide from non-JS browsers in case of viewing manifest only: -->
0655 <script type="text/javascript"><xsl:text disable-output-escaping="yes">&lt;!&#045;-</xsl:text>
0656 document.write('&lt;tr>&lt;td style="padding-left:0px; padding-right:19px;">'+
0657    'Calculated values:&lt;/td>');
0658 document.write('&lt;td>Count of images = ' + countGlyphsCalc + '&lt;\/td>');
0659 document.writeln('&lt;\/tr>');
0660 
0661 document.writeln('&lt;tr>&lt;td>&lt;\/td>');
0662 document.write('&lt;td>Widest image = ' + widestGlyphCalc + 'px');
0663 if (widestGlyphCalc != widestGlyph) {
0664    document.write('&amp;nbsp; (&lt;font color="maroon">&lt;b>mismatch in the XML data '+
0665       '&lt;\/b>&lt;\/font>)');
0666 }
0667 document.writeln('&lt;\/td>&lt;\/tr>');
0668 
0669 document.writeln('&lt;tr>&lt;td>&lt;\/td>');
0670 document.write('&lt;td>Tallest image = ' + tallestGlyphCalc + 'px');
0671 if (tallestGlyphCalc != tallestGlyph) {
0672    document.write('&amp;nbsp; (&lt;font color="maroon">&lt;b>mismatch in the XML data '+
0673       '&lt;\/b>&lt;\/font>)');
0674 }
0675 document.writeln('&lt;\/td>&lt;\/tr>');
0676 
0677 document.writeln('&lt;tr>&lt;td>&lt;\/td>');
0678 document.write('&lt;td>Greatest descender below baseline = ' + greatestDescender + 'px');
0679 document.writeln('&lt;\/td>&lt;\/tr>');
0680 
0681 <!--[end, hiding:]-->
0682 <xsl:text disable-output-escaping="yes">//&#045;-></xsl:text>
0683 </script>
0684 </tbody>
0685 </table>
0686 <hr width="96%" />
0687 
0688 <!-- Boiler Plate: -->
0689 <div style="display:block; width:100%; padding-top:15px; margin-left:24px; padding-bottom:
0690  0px; margin-right:50px; font: bold 10px Geneva,Arial,Helvetica,sans-serif; color:#003366;">
0691 <script type="text/javascript" SRC="http://www.scribeserver.com/NEUMES/scripts/foundation_credits.js"></script>
0692 Copyright <xsl:text disable-output-escaping="yes">&amp;copy;</xsl:text> 2005-2006,
0693  The University of Oxford.<br/>
0694 Contains software or other intellectual property
0695 copyright <xsl:text disable-output-escaping="yes">&amp;copy;</xsl:text> 2003-2005,
0696  Louis W.G. Barton;<br/>
0697 copyright <xsl:text disable-output-escaping="yes">&amp;copy;</xsl:text> 2002-2003,
0698  The President and Fellows of Harvard College; or<br/>
0699 copyright <xsl:text disable-output-escaping="yes">&amp;copy;</xsl:text> 1995-2001,
0700  Louis W.G. Barton.<br/><xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text></div>
0701 <!--[end, Boiler Plate]-->
0702 </body>
0703 </xsl:template>
0704 
0705 
0706 <!--   *************************
0707    **  ESCAPE APOSTROPHE  **
0708 
0709 Escape single-quotes in the passed string;</span> generate the string:
0710 [NOTE: Do not change the nesting of single and double quotes in this Template.]
0711 -->
0712 <xsl:template name="EscApos">
0713    <xsl:param name="passString"/>
0714 
0715    <xsl:variable name="Apos" select='"&apos;"'/>
0716    <xsl:choose>
0717    <xsl:when test='contains($passString, $Apos)'>
0718       <xsl:value-of select='substring-before($passString, $Apos)'/>
0719       <xsl:text>\</xsl:text><xsl:value-of select="$Apos"/>
0720       <xsl:call-template name="EscApos">
0721          <xsl:with-param name="passString"
0722             select='substring-after($passString, $Apos)'/>
0723       </xsl:call-template>
0724    </xsl:when>
0725    <xsl:otherwise>
0726       <xsl:value-of select="$passString"/>
0727    </xsl:otherwise>
0728    </xsl:choose>
0729 </xsl:template>
0730 
0731 
0732 <!--   *************************
0733    **  REPLACE AMPERSAND  **
0734 
0735 Replace ampersands in the passed string by "<span class="SymbolColor">&amp;</span>";</span> generate the string:
0736 [Each layer in the recursion returns part of the final string.]
0737 -->
0738 <xsl:template name="ReplaceAmp">
0739    <xsl:param name="passString"/>
0740 
0741    <xsl:variable name="Amp" select='"&amp;"'/>
0742    <xsl:choose>
0743    <xsl:when test='contains($passString, $Amp)'>
0744       <xsl:variable name="Remainder">
0745          <xsl:value-of select='substring-after($passString, $Amp)'/>
0746       </xsl:variable>
0747       <!-- Return this part (in two pieces): -->
0748       <xsl:value-of select='substring-before($passString, $Amp)'/>
0749       <xsl:value-of select="$Amp"/><xsl:text>amp;</xsl:text>
0750       <!--[end, return part]-->
0751       <xsl:call-template name="ReplaceAmp">
0752          <xsl:with-param name="passString"
0753             select='$Remainder'/>
0754       </xsl:call-template>
0755    </xsl:when>
0756    <xsl:otherwise>
0757       <xsl:value-of select="$passString"/>
0758    </xsl:otherwise>
0759    </xsl:choose>
0760 </xsl:template>
0761 
0762 </xsl:stylesheet>
0763 <!--[end, glyphs_manifest.xsl]-->
= END LISTING =