Sourcecode Listing of
http://purl.oclc.org/NEUMES/ref/glyphs_manifest.xsl
Color Key : [•] XML code
[•] HTML
[•] symbol substitution
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">©</span> and <span class="SymbolColor"> </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"><!--</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; first elt is 0 -->
0185 var glyphObjectArray=new Array();
0186 var countGlyphsCalc=0;
0187 var widestGlyphCalc=0;
0188 var tallestGlyphCalc=0;
0189 var greatestDescender=0;
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">//--></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"><!--</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 < 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 < 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">//--></xsl:text>
0306 </script>
0307 <!--[end, Glyphs Manifest XSLT for JavaScript]-->
0308
0309 <!-- *************************
0310 *** END, JAVASCRIPT ***
0311 *************************
0312 -->
0313
0314
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">&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"><!--</xsl:text>
0383 document.writeln('Toggle display of <b>Symbol Descriptions</b>'+
0384 '<a style="" href="#" ' +
0385 'onClick="javascript:noop=pulldown(\'description\'); if(blur) this.blur(); return false;">'+
0386 '<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"\/><\/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 \'<b>Glyph</b>\' '+
0399 '<a href=\"javascript:var y=confirm(\'' + definitionGlyph + '\'); ' +
0400 'if(blur) this.blur();\">'+
0401 '<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"><\/a>');
0405 <xsl:text disable-output-escaping="yes">//--></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 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>
0523 </xsl:element>
0524 </xsl:element>
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"><!--</xsl:text>
0547 countGlyphsCalc=0;
0548 widestGlyphCalc=0;
0549 tallestGlyphCalc=0;
0550 greatestDescender=0;
0551 for (var i=0; i < 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">//--></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"><!--</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('<tr style=\"display:table-row; height:' + glyphRowHeight +
0610 'px !important; padding-top:0px; padding-bottom:0px;\" valign="top">');
0611 document.write('<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;\"><img width="9" height="0" alt="" '+
0614 'src="http:\/\/www.scribeserver.com\/NEUMES\/images\/spacer1.gif">'); // inset
0615 for (var i=0; i < glyphObjectArray.length; i++) {
0616 // class "neume" has a margin-bottom.
0617 document.writeln('<table class="neume" BORDER="0" '+
0618 'style=\"height:' + glyphRowHeight + 'px !important;\">');
0619 document.writeln('<tbody>');
0620 document.write('<tr valign="top"><td>');
0621 imgDescent=baselineDescent - parseInt(glyphObjectArray[i].imgHeight) +
0622 parseInt(glyphObjectArray[i].baseline);
0623 document.write('<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;\"></td>'+
0628 '</tr></tbody></table>');
0629 } //end, for i
0630 document.writeln('</td></tr>');
0631 <!--[end, hiding:]-->
0632 <xsl:text disable-output-escaping="yes">//--></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"><!--</xsl:text>
0656 document.write('<tr><td style="padding-left:0px; padding-right:19px;">'+
0657 'Calculated values:</td>');
0658 document.write('<td>Count of images = ' + countGlyphsCalc + '<\/td>');
0659 document.writeln('<\/tr>');
0660
0661 document.writeln('<tr><td><\/td>');
0662 document.write('<td>Widest image = ' + widestGlyphCalc + 'px');
0663 if (widestGlyphCalc != widestGlyph) {
0664 document.write('&nbsp; (<font color="maroon"><b>mismatch in the XML data '+
0665 '<\/b><\/font>)');
0666 }
0667 document.writeln('<\/td><\/tr>');
0668
0669 document.writeln('<tr><td><\/td>');
0670 document.write('<td>Tallest image = ' + tallestGlyphCalc + 'px');
0671 if (tallestGlyphCalc != tallestGlyph) {
0672 document.write('&nbsp; (<font color="maroon"><b>mismatch in the XML data '+
0673 '<\/b><\/font>)');
0674 }
0675 document.writeln('<\/td><\/tr>');
0676
0677 document.writeln('<tr><td><\/td>');
0678 document.write('<td>Greatest descender below baseline = ' + greatestDescender + 'px');
0679 document.writeln('<\/td><\/tr>');
0680
0681 <!--[end, hiding:]-->
0682 <xsl:text disable-output-escaping="yes">//--></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">&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">&copy;</xsl:text> 2003-2005,
0696 Louis W.G. Barton;<br/>
0697 copyright <xsl:text disable-output-escaping="yes">&copy;</xsl:text> 2002-2003,
0698 The President and Fellows of Harvard College; or<br/>
0699 copyright <xsl:text disable-output-escaping="yes">&copy;</xsl:text> 1995-2001,
0700 Louis W.G. Barton.<br/><xsl:text disable-output-escaping="yes">&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='"'"'/>
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">&</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='"&"'/>
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]-->