abcjs 6.2.2 → 6.3.0

package/src/write/creation/add-chord.js

@@ -6,97 +6,117 @@ var addChord = function (getTextSize, abselem, elem, roomTaken, roomTakenRight,
 	for (var i = 0; i < elem.chord.length; i++) {
 		var pos = elem.chord[i].position;
 		var rel_position = elem.chord[i].rel_position;
-		var chords = elem.chord[i].name.split("\n");
-		for (var j = chords.length - 1; j >= 0; j--) { // parse these in opposite order because we place them from bottom to top.
-			var chord = chords[j];
-			var x = 0;
-			var y;
-			var font;
-			var klass;
-			if (pos === "left" || pos === "right" || pos === "below" || pos === "above" || !!rel_position) {
-				font = 'annotationfont';
-				klass = "annotation";
-			} else {
-				font = 'gchordfont';
-				klass = "chord";
-				chord = translateChord(chord, jazzchords, germanAlphabet);
+		var isAnnotation = pos === "left" || pos === "right" || pos === "below" || pos === "above" || !!rel_position
+		var font;
+		var klass;
+		if (isAnnotation) {
+			font = 'annotationfont';
+			klass = "abcjs-annotation";
+		} else {
+			font = 'gchordfont';
+			klass = "abcjs-chord";
+		}
+		var attr = getTextSize.attr(font, klass);
+
+		var name = elem.chord[i].name
+		var ret;
+		//console.log("chord",name)
+		if (typeof name === "string") {
+			ret = chordString(name, pos, rel_position, isAnnotation, font, klass, attr, getTextSize, abselem, elem, roomTaken, roomTakenRight, noteheadWidth, jazzchords, germanAlphabet)
+			roomTaken = ret.roomTaken
+			roomTakenRight = ret.roomTakenRight
+		} else {
+			for (var j = 0; j < name.length; j++) {
+				ret = chordString(name[j].text, pos, rel_position, isAnnotation, font, klass, attr, getTextSize, abselem, elem, roomTaken, roomTakenRight, noteheadWidth, jazzchords, germanAlphabet)
+				roomTaken = ret.roomTaken
+				roomTakenRight = ret.roomTakenRight
 			}
-			var attr = getTextSize.attr(font, klass);
-			var dim = getTextSize.calc(chord, font, klass);
-			var chordWidth = dim.width;
-			var chordHeight = dim.height / spacing.STEP;
-			switch (pos) {
-				case "left":
-					roomTaken += chordWidth + 7;
-					x = -roomTaken;        // TODO-PER: This is just a guess from trial and error
-					y = elem.averagepitch;
-					abselem.addExtra(new RelativeElement(chord, x, chordWidth + 4, y, {
-						type: "text",
-						height: chordHeight,
-						dim: attr,
-						position: "left"
-					}));
-					break;
-				case "right":
-					roomTakenRight += 4;
-					x = roomTakenRight;// TODO-PER: This is just a guess from trial and error
-					y = elem.averagepitch;
-					abselem.addRight(new RelativeElement(chord, x, chordWidth + 4, y, {
-						type: "text",
-						height: chordHeight,
-						dim: attr,
-						position: "right"
-					}));
-					break;
-				case "below":
-					// setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
-					abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
+		}
+	}
+	return { roomTaken: roomTaken, roomTakenRight: roomTakenRight };
+};
+
+function chordString(chordString, pos, rel_position, isAnnotation, font, klass, attr, getTextSize, abselem, elem, roomTaken, roomTakenRight, noteheadWidth, jazzchords, germanAlphabet) {
+	var chords = chordString.split("\n");
+	for (var j = chords.length - 1; j >= 0; j--) { // parse these in opposite order because we place them from bottom to top.
+		var chord = chords[j];
+		var x = 0;
+		var y;
+		if (!isAnnotation)
+			chord = translateChord(chord, jazzchords, germanAlphabet);
+		var dim = getTextSize.calc(chord, font, klass);
+		var chordWidth = dim.width;
+		var chordHeight = dim.height / spacing.STEP;
+		switch (pos) {
+			case "left":
+				roomTaken += chordWidth + 7;
+				x = -roomTaken;        // TODO-PER: This is just a guess from trial and error
+				y = elem.averagepitch;
+				abselem.addExtra(new RelativeElement(chord, x, chordWidth + 4, y, {
+					type: "text",
+					height: chordHeight,
+					dim: attr,
+					position: "left"
+				}));
+				break;
+			case "right":
+				roomTakenRight += 4;
+				x = roomTakenRight;// TODO-PER: This is just a guess from trial and error
+				y = elem.averagepitch;
+				abselem.addRight(new RelativeElement(chord, x, chordWidth + 4, y, {
+					type: "text",
+					height: chordHeight,
+					dim: attr,
+					position: "right"
+				}));
+				break;
+			case "below":
+				// setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
+				abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
+					type: "text",
+					position: "below",
+					height: chordHeight,
+					dim: attr,
+					realWidth: chordWidth
+				}));
+				break;
+			case "above":
+				// setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
+				abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
+					type: "text",
+					position: "above",
+					height: chordHeight,
+					dim: attr,
+					realWidth: chordWidth
+				}));
+				break;
+			default:
+				if (rel_position) {
+					var relPositionY = rel_position.y + 3 * spacing.STEP; // TODO-PER: this is a fudge factor to make it line up with abcm2ps
+					abselem.addRight(new RelativeElement(chord, x + rel_position.x, 0, elem.minpitch + relPositionY / spacing.STEP, {
+						position: "relative",
 						type: "text",
-						position: "below",
 						height: chordHeight,
-						dim: attr,
-						realWidth: chordWidth
+						dim: attr
 					}));
-					break;
-				case "above":
+				} else {
 					// setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
-					abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
-						type: "text",
-						position: "above",
-						height: chordHeight,
-						dim: attr,
-						realWidth: chordWidth
-					}));
-					break;
-				default:
-					if (rel_position) {
-						var relPositionY = rel_position.y + 3 * spacing.STEP; // TODO-PER: this is a fudge factor to make it line up with abcm2ps
-						abselem.addRight(new RelativeElement(chord, x + rel_position.x, 0, elem.minpitch + relPositionY / spacing.STEP, {
-							position: "relative",
-							type: "text",
+					var pos2 = 'above';
+					if (elem.positioning && elem.positioning.chordPosition)
+						pos2 = elem.positioning.chordPosition;
+
+					if (pos2 !== 'hidden') {
+						abselem.addCentered(new RelativeElement(chord, noteheadWidth / 2, chordWidth, undefined, {
+							type: "chord",
+							position: pos2,
 							height: chordHeight,
-							dim: attr
+							dim: attr,
+							realWidth: chordWidth
 						}));
-					} else {
-						// setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
-						var pos2 = 'above';
-						if (elem.positioning && elem.positioning.chordPosition)
-							pos2 = elem.positioning.chordPosition;
-
-						if (pos2 !== 'hidden') {
-							abselem.addCentered(new RelativeElement(chord, noteheadWidth / 2, chordWidth, undefined, {
-								type: "chord",
-								position: pos2,
-								height: chordHeight,
-								dim: attr,
-								realWidth: chordWidth
-							}));
-						}
 					}
-			}
+				}
 		}
 	}
 	return { roomTaken: roomTaken, roomTakenRight: roomTakenRight };
-};
-
+}
 module.exports = addChord;

package/src/write/creation/add-text-if.js

@@ -8,10 +8,10 @@ function addTextIf(rows, params, getTextSize) {
 
 	if (params.marginTop)
 		rows.push({ move: params.marginTop });
-	var attr = { left: params.marginLeft, text: params.text, font: params.font, anchor: params.anchor, startChar: params.info.startChar, endChar: params.info.endChar };
+	var attr = { left: params.marginLeft, text: params.text, font: params.font, anchor: params.anchor, startChar: params.info.startChar, endChar: params.info.endChar, 'dominant-baseline': params['dominant-baseline'] };
 	if (params.absElemType)
 		attr.absElemType = params.absElemType;
-	if (!params.inGroup)
+	if (!params.inGroup && params.klass)
 		attr.klass = params.klass;
 	if (params.name)
 		attr.name = params.name;

package/src/write/creation/decoration.js

@@ -14,10 +14,10 @@ var Decoration = function Decoration() {
 	this.minBottom = 0;
 };
 
-var closeDecoration = function (voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch) {
+var closeDecoration = function (voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, accentAbove) {
 	var yPos;
 	for (var i = 0; i < decoration.length; i++) {
-		if (decoration[i] === "staccato" || decoration[i] === "tenuto" || decoration[i] === "accent") {
+		if (decoration[i] === "staccato" || decoration[i] === "tenuto" || (decoration[i] === "accent" && !accentAbove)) {
 			var symbol = "scripts." + decoration[i];
 			if (decoration[i] === "accent") symbol = "scripts.sforzato";
 			if (yPos === undefined)
@@ -123,7 +123,7 @@ var compoundDecoration = function (decoration, pitch, width, abselem, dir) {
 	}
 };
 
-var stackedDecoration = function (decoration, width, abselem, yPos, positioning, minTop, minBottom) {
+var stackedDecoration = function (decoration, width, abselem, yPos, positioning, minTop, minBottom, accentAbove) {
 	function incrementPlacement(placement, height) {
 		if (placement === 'above')
 			yPos.above += height;
@@ -263,6 +263,12 @@ var stackedDecoration = function (decoration, width, abselem, yPos, positioning,
 			case "mark":
 				abselem.klass = "mark";
 				break;
+			case "accent":
+				if (accentAbove) {
+					symbolDecoration("scripts.sforzato", positioning);
+					hasOne = true;
+				}
+				break;	
 		}
 	}
 	return hasOne;
@@ -313,10 +319,12 @@ Decoration.prototype.dynamicDecoration = function (voice, decoration, abselem, p
 				crescendo = { start: this.startCrescendoX, stop: abselem };
 				this.startCrescendoX = undefined;
 				break;
+			case '~(':
 			case "glissando(":
 				this.startGlissandoX = abselem;
 				glissando = undefined;
 				break;
+			case '~)':
 			case "glissando)":
 				glissando = { start: this.startGlissandoX, stop: abselem };
 				this.startGlissandoX = undefined;
@@ -334,7 +342,7 @@ Decoration.prototype.dynamicDecoration = function (voice, decoration, abselem, p
 	}
 };
 
-Decoration.prototype.createDecoration = function (voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, positioning, hasVocals) {
+Decoration.prototype.createDecoration = function (voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, positioning, hasVocals, accentAbove) {
 	if (!positioning)
 		positioning = { ornamentPosition: 'above', volumePosition: hasVocals ? 'above' : 'below', dynamicPosition: hasVocals ? 'above' : 'below' };
 	// These decorations don't affect the placement of other decorations
@@ -343,14 +351,14 @@ Decoration.prototype.createDecoration = function (voice, decoration, pitch, widt
 	compoundDecoration(decoration, pitch, width, abselem, dir);
 
 	// treat staccato, accent, and tenuto first (may need to shift other markers)
-	var yPos = closeDecoration(voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch);
+	var yPos = closeDecoration(voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, accentAbove);
 	// yPos is an object containing 'above' and 'below'. That is the placement of the next symbol on either side.
 
 	yPos.above = Math.max(yPos.above, this.minTop);
-	var hasOne = stackedDecoration(decoration, width, abselem, yPos, positioning.ornamentPosition, this.minTop, this.minBottom);
-	if (hasOne) {
+	var hasOne = stackedDecoration(decoration, width, abselem, yPos, positioning.ornamentPosition, this.minTop, this.minBottom, accentAbove);
+	//if (hasOne) {
 		//			abselem.top = Math.max(yPos.above + 3, abselem.top); // TODO-PER: Not sure why we need this fudge factor.
-	}
+	//}
 	leftDecoration(decoration, abselem, roomtaken);
 };
 

package/src/write/creation/elements/bottom-text.js

@@ -1,68 +1,83 @@
 const addTextIf = require("../add-text-if");
+const richText = require("./rich-text");
 
-function BottomText(metaText, width, isPrint, paddingLeft, spacing, getTextSize) {
+function BottomText(metaText, width, isPrint, paddingLeft, spacing, shouldAddClasses, getTextSize) {
 	this.rows = [];
 	if (metaText.unalignedWords && metaText.unalignedWords.length > 0)
-		this.unalignedWords(metaText.unalignedWords, paddingLeft, spacing, getTextSize);
-	this.extraText(metaText, paddingLeft, spacing, getTextSize);
+		this.unalignedWords(metaText.unalignedWords, paddingLeft, spacing, shouldAddClasses, getTextSize);
+	this.extraText(metaText, paddingLeft, spacing, shouldAddClasses, getTextSize);
 	if (metaText.footer && isPrint)
 		this.footer(metaText.footer, width, paddingLeft, getTextSize);
 }
 
-BottomText.prototype.unalignedWords = function (unalignedWords, paddingLeft, spacing, getTextSize) {
-	var klass = 'meta-bottom unaligned-words';
+BottomText.prototype.unalignedWords = function (unalignedWords, marginLeft, spacing, shouldAddClasses, getTextSize) {
+	var klass = shouldAddClasses ? 'abcjs-unaligned-words' : ''
 	var defFont = 'wordsfont';
-	this.rows.push({ startGroup: "unalignedWords", klass: 'abcjs-meta-bottom abcjs-unaligned-words', name: "words" });
 	var space = getTextSize.calc("i", defFont, klass);
-
+	
 	this.rows.push({ move: spacing.words });
+	
+	addMultiLine(this.rows, '', unalignedWords, marginLeft, defFont, "unalignedWords", "unalignedWords", klass, "unalignedWords", spacing, shouldAddClasses, getTextSize)
+	this.rows.push({ move: space.height });
+}
+
+function addSingleLine(rows, preface, text, marginLeft, klass, shouldAddClasses, getTextSize) {
+	if (text) {
+		if (preface) {
+			if (typeof text === 'string')
+				text = preface + text
+			else
+				text = [{text: preface}].concat(text)
+		}
+		klass = shouldAddClasses ? 'abcjs-extra-text '+klass : ''
+		richText(rows, text, 'historyfont', klass, "description", marginLeft, {absElemType: "extraText", anchor: 'start'}, getTextSize)
+	}
+
+}
 
-	for (var j = 0; j < unalignedWords.length; j++) {
-		if (unalignedWords[j] === '')
-			this.rows.push({ move: space.height });
-		else if (typeof unalignedWords[j] === 'string') {
-			addTextIf(this.rows, { marginLeft: paddingLeft, text: unalignedWords[j], font: defFont, klass: klass, inGroup: true, name: "words" }, getTextSize);
+function addMultiLine(rows, preface, content, marginLeft, defFont, absElemType, groupName, klass, name, spacing, shouldAddClasses, getTextSize) {
+	if (content) {
+		klass = shouldAddClasses ? 'abcjs-extra-text '+klass : ''
+		var size = getTextSize.calc("A", defFont, klass);
+		if (typeof content === 'string') {
+			if (preface)
+				content = preface + "\n" + content
+			addTextIf(rows, { marginLeft: marginLeft, text: content, font: defFont, absElemType: "extraText", name: name, 'dominant-baseline': 'middle', klass: klass }, getTextSize);
+			//rows.push({move: size.height*3/4})
 		} else {
-			var largestY = 0;
-			var offsetX = 0;
-			for (var k = 0; k < unalignedWords[j].length; k++) {
-				var thisWord = unalignedWords[j][k];
-				var font = (thisWord.font) ? thisWord.font : defFont;
-				this.rows.push({
-					left: paddingLeft + offsetX,
-					text: thisWord.text,
-					font: font,
-					anchor: 'start'
-				});
-				var size = getTextSize.calc(thisWord.text, defFont, klass);
-				largestY = Math.max(largestY, size.height);
-				offsetX += size.width;
-				// If the phrase ends in a space, then that is not counted in the width, so we need to add that in ourselves.
-				if (thisWord.text[thisWord.text.length - 1] === ' ') {
-					offsetX += space.width;
-				}
+			rows.push({ startGroup: groupName, klass: klass, name: name });
+			rows.push({move: spacing.info})
+			if (preface) {
+				addTextIf(rows, { marginLeft: marginLeft, text: preface, font: defFont, absElemType: "extraText", name: name, 'dominant-baseline': 'middle' }, getTextSize);
+				rows.push({move: size.height*3/4})
 			}
-			this.rows.push({ move: largestY });
+
+			for (var j = 0; j < content.length; j++) {
+				richText(rows, content[j], defFont, '', name, marginLeft, {anchor: 'start'}, getTextSize)
+				// TODO-PER: Hack! the string and rich lines should have used up the same amount of space without this.
+				if (j < content.length-1 && typeof content[j] === 'string' && typeof content[j+1] !== 'string')
+					rows.push({move: size.height*3/4})
+			}
+			rows.push({ endGroup: groupName, absElemType: absElemType, startChar: -1, endChar: -1, name: name });
+			rows.push({move: size.height})
 		}
 	}
-	this.rows.push({ move: space.height * 2 });
-	this.rows.push({ endGroup: "unalignedWords", absElemType: "unalignedWords", startChar: -1, endChar: -1, name: "unalignedWords" });
 }
+BottomText.prototype.extraText = function (metaText, marginLeft, spacing, shouldAddClasses, getTextSize) {
+	addSingleLine(this.rows, "Book: ", metaText.book, marginLeft, 'abcjs-book', shouldAddClasses, getTextSize)
+	addSingleLine(this.rows, "Source: ", metaText.source, marginLeft, 'abcjs-source', shouldAddClasses, getTextSize)
+	addSingleLine(this.rows, "Discography: ", metaText.discography, marginLeft, 'abcjs-discography', shouldAddClasses, getTextSize)
+
+	addMultiLine(this.rows, 'Notes:', metaText.notes, marginLeft, 'historyfont', "extraText", "notes", 'abcjs-notes', "description", spacing, shouldAddClasses, getTextSize)
+
+	addSingleLine(this.rows, "Transcription: ", metaText.transcription, marginLeft, 'abcjs-transcription', shouldAddClasses, getTextSize)
+
+	addMultiLine(this.rows, "History:", metaText.history, marginLeft, 'historyfont', "extraText", "history", 'abcjs-history', "description", spacing, shouldAddClasses, getTextSize)
+
+	addSingleLine(this.rows, "Copyright: ", metaText['abc-copyright'], marginLeft, 'abcjs-copyright', shouldAddClasses, getTextSize)
+	addSingleLine(this.rows, "Creator: ", metaText['abc-creator'], marginLeft, 'abcjs-creator', shouldAddClasses, getTextSize)
+	addSingleLine(this.rows, "Edited By: ", metaText['abc-edited-by'], marginLeft, 'abcjs-edited-by', shouldAddClasses, getTextSize)
 
-BottomText.prototype.extraText = function (metaText, marginLeft, spacing, getTextSize) {
-	var extraText = "";
-	if (metaText.book) extraText += "Book: " + metaText.book + "\n";
-	if (metaText.source) extraText += "Source: " + metaText.source + "\n";
-	if (metaText.discography) extraText += "Discography: " + metaText.discography + "\n";
-	if (metaText.notes) extraText += "Notes: " + metaText.notes + "\n";
-	if (metaText.transcription) extraText += "Transcription: " + metaText.transcription + "\n";
-	if (metaText.history) extraText += "History: " + metaText.history + "\n";
-	if (metaText['abc-copyright']) extraText += "Copyright: " + metaText['abc-copyright'] + "\n";
-	if (metaText['abc-creator']) extraText += "Creator: " + metaText['abc-creator'] + "\n";
-	if (metaText['abc-edited-by']) extraText += "Edited By: " + metaText['abc-edited-by'] + "\n";
-	if (extraText.length > 0) {
-		addTextIf(this.rows, { marginLeft: marginLeft, text: extraText, font: 'historyfont', klass: 'meta-bottom extra-text', marginTop: spacing.info, absElemType: "extraText", name: "description" }, getTextSize);
-	}
 }
 
 BottomText.prototype.footer = function (footer, width, paddingLeft, getTextSize) {

package/src/write/creation/elements/rich-text.js

@@ -0,0 +1,51 @@
+const addTextIf = require("../add-text-if");
+
+function richText(rows, str, defFont, klass, name, paddingLeft, attr, getTextSize) {
+	var space = getTextSize.calc("i", defFont, klass);
+	if (str === '') {
+		rows.push({ move: space.height });
+	} else {
+		if (typeof str === 'string') {
+			addTextIf(rows, { marginLeft: paddingLeft, text: str, font: defFont, klass: klass, marginTop: attr.marginTop, anchor: attr.anchor, absElemType: attr.absElemType, info: attr.info, name: name }, getTextSize);
+			return
+		}
+		if (attr.marginTop)
+			rows.push({move: attr.marginTop})
+
+		var largestY = 0;
+		var gap = 0;
+		var row = {
+			left: paddingLeft,
+			anchor: attr.anchor,
+			phrases: []
+		}
+		if (klass)
+			row.klass = klass
+		rows.push(row)
+		for (var k = 0; k < str.length; k++) {
+			var thisWord = str[k];
+			var font = (thisWord.font) ? thisWord.font : getTextSize.attr(defFont, klass).font;
+			var phrase = {
+				content: thisWord.text,
+			}
+			if (font)
+				phrase.attrs = {
+					"font-family": getTextSize.getFamily(font.face),
+					"font-size": font.size,
+					"font-weight": font.weight,
+					"font-style": font.style,
+					"font-decoration": font.decoration,
+			}
+			//if (thisWord.text) {
+				row.phrases.push(phrase);
+				var size = getTextSize.calc(thisWord.text, font, klass);
+				largestY = Math.max(largestY, size.height);
+				if (thisWord.text[thisWord.text.length - 1] === ' ') {
+					gap = space.width
+				}
+		}
+		rows.push({ move: largestY });
+	}
+}
+
+module.exports = richText;

package/src/write/creation/elements/top-text.js

@@ -1,6 +1,7 @@
 const addTextIf = require("../add-text-if");
+const richText = require("./rich-text");
 
-function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, paddingLeft, spacing, getTextSize) {
+function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, paddingLeft, spacing, shouldAddClasses, getTextSize) {
 	this.rows = [];
 
 	if (metaText.header && isPrint) {
@@ -18,12 +19,14 @@ function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, padd
 	var tAnchor = formatting.titleleft ? 'start' : 'middle';
 	var tLeft = formatting.titleleft ? paddingLeft : paddingLeft + width / 2;
 	if (metaText.title) {
-		addTextIf(this.rows, { marginLeft: tLeft, text: metaText.title, font: 'titlefont', klass: 'title meta-top', marginTop: spacing.title, anchor: tAnchor, absElemType: "title", info: metaTextInfo.title, name: "title" }, getTextSize);
+		var klass = shouldAddClasses ? 'abcjs-title' : ''
+		richText(this.rows, metaText.title, "titlefont", klass, 'title', tLeft, {marginTop: spacing.title, anchor: tAnchor, absElemType: "title", info: metaTextInfo.title},  getTextSize)
 	}
 	if (lines.length) {
 		var index = 0;
 		while (index < lines.length && lines[index].subtitle) {
-			addTextIf(this.rows, { marginLeft: tLeft, text: lines[index].subtitle.text, font: 'subtitlefont', klass: 'text meta-top subtitle', marginTop: spacing.subtitle, anchor: tAnchor, absElemType: "subtitle", info: lines[index].subtitle, name: "subtitle" }, getTextSize);
+			var klass = shouldAddClasses ? 'abcjs-text abcjs-subtitle' : ''
+			richText(this.rows, lines[index].subtitle.text, "subtitlefont", klass, 'subtitle', tLeft, {marginTop: spacing.subtitle, anchor: tAnchor, absElemType: "subtitle", info: lines[index].subtitle},  getTextSize)
 			index++;
 		}
 	}
@@ -32,22 +35,45 @@ function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, padd
 		this.rows.push({ move: spacing.composer });
 		if (metaText.rhythm && metaText.rhythm.length > 0) {
 			var noMove = !!(metaText.composer || metaText.origin);
-			addTextIf(this.rows, { marginLeft: paddingLeft, text: metaText.rhythm, font: 'infofont', klass: 'meta-top rhythm', absElemType: "rhythm", noMove: noMove, info: metaTextInfo.rhythm, name: "rhythm" }, getTextSize);
+			var klass = shouldAddClasses ? 'abcjs-rhythm' : ''
+			addTextIf(this.rows, { marginLeft: paddingLeft, text: metaText.rhythm, font: 'infofont', klass: klass, absElemType: "rhythm", noMove: noMove, info: metaTextInfo.rhythm, name: "rhythm" }, getTextSize);
 		}
-		var composerLine = "";
-		if (metaText.composer) composerLine += metaText.composer;
-		if (metaText.origin) composerLine += ' (' + metaText.origin + ')';
-		if (composerLine.length > 0) {
-			addTextIf(this.rows, { marginLeft: paddingLeft + width, text: composerLine, font: 'composerfont', klass: 'meta-top composer', anchor: "end", absElemType: "composer", info: metaTextInfo.composer, name: "composer" }, getTextSize);
+		var hasSimpleComposerLine = true
+		if (metaText.composer && typeof metaText.composer !== 'string')
+			hasSimpleComposerLine = false
+		if (metaText.origin && typeof metaText.origin !== 'string')
+			hasSimpleComposerLine = false
+			
+		var composerLine = metaText.composer ? metaText.composer : '';
+		if (metaText.origin) {
+			if (typeof composerLine === 'string' && typeof metaText.origin === 'string')
+				composerLine += ' (' + metaText.origin + ')';
+			else if (typeof composerLine === 'string' && typeof metaText.origin !== 'string') {
+				composerLine = [{text:composerLine}]
+				composerLine.push({text:" ("})
+				composerLine = composerLine.concat(metaText.origin)
+				composerLine.push({text:")"})
+			} else {
+				composerLine.push({text:" ("})
+				composerLine = composerLine.concat(metaText.origin)
+				composerLine.push({text:")"})
+			}
+		}
+		if (composerLine) {
+			var klass = shouldAddClasses ? 'abcjs-composer' : ''
+			richText(this.rows, composerLine, 'composerfont', klass, "composer", paddingLeft+width, {anchor: "end", absElemType: "composer", info: metaTextInfo.composer, ingroup: true}, getTextSize)
 		}
 	}
 
 	if (metaText.author && metaText.author.length > 0) {
-		addTextIf(this.rows, { marginLeft: paddingLeft + width, text: metaText.author, font: 'composerfont', klass: 'meta-top author', anchor: "end", absElemType: "author", info: metaTextInfo.author, name: "author" }, getTextSize);
+		var klass = shouldAddClasses ? 'abcjs-author' : ''
+		richText(this.rows, metaText.author, 'composerfont', klass, "author", paddingLeft+width, {anchor: "end", absElemType: "author", info: metaTextInfo.author}, getTextSize)
 	}
 
 	if (metaText.partOrder && metaText.partOrder.length > 0) {
-		addTextIf(this.rows, { marginLeft: paddingLeft, text: metaText.partOrder, font: 'partsfont', klass: 'meta-top part-order', absElemType: "partOrder", info: metaTextInfo.partOrder, name: "part-order" }, getTextSize);
+		var klass = shouldAddClasses ? 'abcjs-part-order' : ''
+		richText(this.rows, metaText.partOrder, 'partsfont', klass, "part-order", paddingLeft, {absElemType: "partOrder", info: metaTextInfo.partOrder, anchor: 'start'}, getTextSize)
+
 	}
 }
 

package/src/write/creation/glyphs.js

@@ -86,7 +86,7 @@ var glyphs =
 	's': { d: [['M', 4.47, -8.73], ['c', 0.09, 0.00, 0.36, -0.03, 0.57, -0.03], ['c', 0.75, 0.03, 1.29, 0.24, 1.71, 0.63], ['c', 0.51, 0.54, 0.66, 1.26, 0.36, 1.83], ['c', -0.24, 0.42, -0.63, 0.57, -1.11, 0.42], ['c', -0.33, -0.09, -0.60, -0.36, -0.60, -0.57], ['c', 0.00, -0.03, 0.06, -0.21, 0.15, -0.39], ['c', 0.12, -0.21, 0.15, -0.33, 0.18, -0.48], ['c', 0.00, -0.24, -0.06, -0.48, -0.15, -0.60], ['c', -0.15, -0.21, -0.42, -0.24, -0.75, -0.15], ['c', -0.27, 0.06, -0.48, 0.18, -0.69, 0.36], ['c', -0.39, 0.39, -0.51, 0.96, -0.33, 1.38], ['c', 0.09, 0.21, 0.42, 0.51, 0.78, 0.72], ['c', 1.11, 0.69, 1.59, 1.11, 1.89, 1.68], ['c', 0.21, 0.39, 0.24, 0.78, 0.15, 1.29], ['c', -0.18, 1.20, -1.17, 2.16, -2.52, 2.52], ['c', -1.02, 0.24, -1.95, 0.12, -2.70, -0.42], ['c', -0.72, -0.51, -0.99, -1.47, -0.60, -2.19], ['c', 0.24, -0.48, 0.72, -0.63, 1.17, -0.42], ['c', 0.33, 0.18, 0.54, 0.45, 0.57, 0.81], ['c', 0.00, 0.21, -0.03, 0.30, -0.33, 0.51], ['c', -0.33, 0.24, -0.39, 0.42, -0.27, 0.69], ['c', 0.06, 0.15, 0.21, 0.27, 0.45, 0.33], ['c', 0.30, 0.09, 0.87, 0.09, 1.20, 0.00], ['c', 0.75, -0.21, 1.23, -0.72, 1.29, -1.35], ['c', 0.03, -0.42, -0.15, -0.81, -0.54, -1.20], ['c', -0.24, -0.24, -0.48, -0.42, -1.41, -1.02], ['c', -0.69, -0.42, -1.05, -0.93, -1.05, -1.47], ['c', 0.00, -0.39, 0.12, -0.87, 0.30, -1.23], ['c', 0.27, -0.57, 0.78, -1.05, 1.38, -1.35], ['c', 0.24, -0.12, 0.63, -0.27, 0.90, -0.30], ['z']], w: 6.632, h: 8.758 },
 	'z': { d: [['M', 2.64, -7.95], ['c', 0.36, -0.09, 0.81, -0.03, 1.71, 0.27], ['c', 0.78, 0.21, 0.96, 0.27, 1.74, 0.30], ['c', 0.87, 0.06, 1.02, 0.03, 1.38, -0.21], ['c', 0.21, -0.15, 0.33, -0.15, 0.48, -0.06], ['c', 0.15, 0.09, 0.21, 0.30, 0.15, 0.45], ['c', -0.03, 0.06, -1.26, 1.26, -2.76, 2.67], ['l', -2.73, 2.55], ['l', 0.54, 0.03], ['c', 0.54, 0.03, 0.72, 0.03, 2.01, 0.15], ['c', 0.36, 0.03, 0.90, 0.06, 1.20, 0.09], ['c', 0.66, 0.00, 0.81, -0.03, 1.02, -0.24], ['c', 0.30, -0.30, 0.39, -0.72, 0.27, -1.23], ['c', -0.06, -0.27, -0.06, -0.27, -0.03, -0.39], ['c', 0.15, -0.30, 0.54, -0.27, 0.69, 0.03], ['c', 0.15, 0.33, 0.27, 1.02, 0.27, 1.50], ['c', 0.00, 1.47, -1.11, 2.70, -2.52, 2.79], ['c', -0.57, 0.03, -1.02, -0.09, -2.01, -0.51], ['c', -1.02, -0.42, -1.23, -0.48, -2.13, -0.54], ['c', -0.81, -0.06, -0.96, -0.03, -1.26, 0.18], ['c', -0.12, 0.06, -0.24, 0.12, -0.27, 0.12], ['c', -0.27, 0.00, -0.45, -0.30, -0.36, -0.51], ['c', 0.03, -0.06, 1.32, -1.32, 2.91, -2.79], ['l', 2.88, -2.73], ['c', -0.03, 0.00, -0.21, 0.03, -0.42, 0.06], ['c', -0.21, 0.03, -0.78, 0.09, -1.23, 0.12], ['c', -1.11, 0.12, -1.23, 0.15, -1.95, 0.27], ['c', -0.72, 0.15, -1.17, 0.18, -1.29, 0.09], ['c', -0.27, -0.18, -0.21, -0.75, 0.12, -1.26], ['c', 0.39, -0.60, 0.93, -1.02, 1.59, -1.20], ['z']], w: 8.573, h: 8.743 },
 	'+': { d: [['M', 3.48, -9.3], ['c', 0.18, -0.09, 0.36, -0.09, 0.54, 0.00], ['c', 0.18, 0.09, 0.24, 0.15, 0.33, 0.30], ['l', 0.06, 0.15], ['l', 0.00, 1.29], ['l', 0.00, 1.29], ['l', 1.29, 0.00], ['c', 1.23, 0.00, 1.29, 0.00, 1.41, 0.06], ['c', 0.06, 0.03, 0.15, 0.09, 0.18, 0.12], ['c', 0.12, 0.09, 0.21, 0.33, 0.21, 0.48], ['c', 0.00, 0.15, -0.09, 0.39, -0.21, 0.48], ['c', -0.03, 0.03, -0.12, 0.09, -0.18, 0.12], ['c', -0.12, 0.06, -0.18, 0.06, -1.41, 0.06], ['l', -1.29, 0.00], ['l', 0.00, 1.29], ['c', 0.00, 1.23, 0.00, 1.29, -0.06, 1.41], ['c', -0.09, 0.18, -0.15, 0.24, -0.30, 0.33], ['c', -0.21, 0.09, -0.39, 0.09, -0.57, 0.00], ['c', -0.18, -0.09, -0.24, -0.15, -0.33, -0.33], ['c', -0.06, -0.12, -0.06, -0.18, -0.06, -1.41], ['l', 0.00, -1.29], ['l', -1.29, 0.00], ['c', -1.23, 0.00, -1.29, 0.00, -1.41, -0.06], ['c', -0.18, -0.09, -0.24, -0.15, -0.33, -0.33], ['c', -0.09, -0.18, -0.09, -0.36, 0.00, -0.54], ['c', 0.09, -0.18, 0.15, -0.24, 0.33, -0.33], ['l', 0.15, -0.06], ['l', 1.26, 0.00], ['l', 1.29, 0.00], ['l', 0.00, -1.29], ['c', 0.00, -1.23, 0.00, -1.29, 0.06, -1.41], ['c', 0.09, -0.18, 0.15, -0.24, 0.33, -0.33], ['z']], w: 7.507, h: 7.515 },
-	',': { d: [['M', 1.32, -3.36], ['c', 0.57, -0.15, 1.17, 0.03, 1.59, 0.45], ['c', 0.45, 0.45, 0.60, 0.96, 0.51, 1.89], ['c', -0.09, 1.23, -0.42, 2.46, -0.99, 3.93], ['c', -0.30, 0.72, -0.72, 1.62, -0.78, 1.68], ['c', -0.18, 0.21, -0.51, 0.18, -0.66, -0.06], ['c', -0.03, -0.06, -0.06, -0.15, -0.06, -0.18], ['c', 0.00, -0.06, 0.12, -0.33, 0.24, -0.63], ['c', 0.84, -1.80, 1.02, -2.61, 0.69, -3.24], ['c', -0.12, -0.24, -0.27, -0.36, -0.75, -0.60], ['c', -0.36, -0.15, -0.42, -0.21, -0.60, -0.39], ['c', -0.69, -0.69, -0.69, -1.71, 0.00, -2.40], ['c', 0.21, -0.21, 0.51, -0.39, 0.81, -0.45], ['z']], w: 3.452, h: 8.143 },
+	',': { d: [['M', 1.85, -3.36], ['c', 0.57, -0.15, 1.17, 0.03, 1.59, 0.45], ['c', 0.45, 0.45, 0.60, 0.96, 0.51, 1.89], ['c', -0.09, 1.23, -0.42, 2.46, -0.99, 3.93], ['c', -0.30, 0.72, -0.72, 1.62, -0.78, 1.68], ['c', -0.18, 0.21, -0.51, 0.18, -0.66, -0.06], ['c', -0.03, -0.06, -0.06, -0.15, -0.06, -0.18], ['c', 0.00, -0.06, 0.12, -0.33, 0.24, -0.63], ['c', 0.84, -1.80, 1.02, -2.61, 0.69, -3.24], ['c', -0.12, -0.24, -0.27, -0.36, -0.75, -0.60], ['c', -0.36, -0.15, -0.42, -0.21, -0.60, -0.39], ['c', -0.69, -0.69, -0.69, -1.71, 0.00, -2.40], ['c', 0.21, -0.21, 0.51, -0.39, 0.81, -0.45], ['z']], w: 3.452, h: 8.143 },
 	'-': { d: [['M', 0.18, -5.34], ['c', 0.09, -0.06, 0.15, -0.06, 2.31, -0.06], ['c', 2.46, 0.00, 2.37, 0.00, 2.46, 0.21], ['c', 0.12, 0.21, 0.03, 0.42, -0.15, 0.54], ['c', -0.09, 0.06, -0.15, 0.06, -2.28, 0.06], ['c', -2.16, 0.00, -2.22, 0.00, -2.31, -0.06], ['c', -0.27, -0.15, -0.27, -0.54, -0.03, -0.69], ['z']], w: 5.001, h: 0.81 },
 	'.': { d: [['M', 1.32, -3.36], ['c', 1.05, -0.27, 2.10, 0.57, 2.10, 1.65], ['c', 0.00, 1.08, -1.05, 1.92, -2.10, 1.65], ['c', -0.90, -0.21, -1.50, -1.14, -1.26, -2.04], ['c', 0.12, -0.63, 0.63, -1.11, 1.26, -1.26], ['z']], w: 3.413, h: 3.402 },
 	'scripts.wedge': { d: [['M', -3.66, -7.44], ['c', 0.06, -0.09, 0.00, -0.09, 0.81, 0.03], ['c', 1.86, 0.30, 3.84, 0.30, 5.73, 0.00], ['c', 0.78, -0.12, 0.72, -0.12, 0.78, -0.03], ['c', 0.15, 0.15, 0.12, 0.24, -0.24, 0.60], ['c', -0.93, 0.93, -1.98, 2.76, -2.67, 4.62], ['c', -0.30, 0.78, -0.51, 1.71, -0.51, 2.13], ['c', 0.00, 0.15, 0.00, 0.18, -0.06, 0.27], ['c', -0.12, 0.09, -0.24, 0.09, -0.36, 0.00], ['c', -0.06, -0.09, -0.06, -0.12, -0.06, -0.27], ['c', 0.00, -0.42, -0.21, -1.35, -0.51, -2.13], ['c', -0.69, -1.86, -1.74, -3.69, -2.67, -4.62], ['c', -0.36, -0.36, -0.39, -0.45, -0.24, -0.60], ['z']], w: 7.49, h: 7.752 },
@@ -105,7 +105,7 @@ glyphs['noteheads.slash.quarter'] = { d: [['M', 9, -6], ['l', 0, 4], ['l', -9, 9
 
 glyphs['noteheads.harmonic.quarter'] = { d: [['M', 3.63, -4.02], ['c', 0.09, -0.06, 0.18, -0.09, 0.24, -0.03], ['c', 0.03, 0.03, 0.87, 0.93, 1.83, 2.01], ['c', 1.50, 1.65, 1.80, 1.98, 1.80, 2.04], ['c', 0.00, 0.06, -0.30, 0.39, -1.80, 2.04], ['c', -0.96, 1.08, -1.80, 1.98, -1.83, 2.01], ['c', -0.06, 0.06, -0.15, 0.03, -0.24, -0.03], ['c', -0.12, -0.09, -3.54, -3.84, -3.60, -3.93], ['c', -0.03, -0.03, -0.03, -0.09, -0.03, -0.15], ['c', 0.03, -0.06, 3.45, -3.84, 3.63, -3.96], ['z']], w: 7.5, h: 8.165 };
 
-glyphs['noteheads.triangle.quarter'] = { d: [['M', 0, 0], ['l', 9, 0], ['l', -4.5, -9], ['z']], w: 9, h: 9 };
+glyphs['noteheads.triangle.quarter'] = { d: [['M', 0, 4], ['l', 9, 0], ['l', -4.5, -9], ['z']], w: 9, h: 9 };
 
 var pathClone = function (pathArray) {
 	var res = [];

package/src/write/draw/absolute.js

@@ -16,7 +16,10 @@ function drawAbsolute(renderer, params, bartop, selectables, staffPos) {
 				drawTempo(renderer, child);
 				break;
 			default:
-				drawRelativeElement(renderer, child, bartop);
+				var el = drawRelativeElement(renderer, child, bartop);
+				if (child.type === "symbol" && child.c && child.c.indexOf('notehead') >= 0) {
+					el.setAttribute('class', 'abcjs-notehead')
+				}
 		}
 	}
 	var klass = params.type;

package/src/write/draw/draw.js

@@ -6,7 +6,10 @@ var Selectables = require('./selectables');
 
 function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, selectTypes, tuneNumber, lineOffset) {
 	var selectables = new Selectables(renderer.paper, selectTypes, tuneNumber);
-	renderer.paper.openGroup()
+	var groupClasses = {}
+	if (classes.shouldAddClasses)
+		groupClasses.klass = "abcjs-meta-top"
+	renderer.paper.openGroup(groupClasses)
 	renderer.moveY(renderer.padding.top);
 	nonMusic(renderer, abcTune.topText, selectables);
 	renderer.paper.closeGroup()
@@ -16,7 +19,9 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 		classes.incrLine();
 		var abcLine = abcTune.lines[line];
 		if (abcLine.staff) {
-			renderer.paper.openGroup()
+			if (classes.shouldAddClasses)
+				groupClasses.klass = "abcjs-staff l" + classes.lineNumber
+			renderer.paper.openGroup(groupClasses)
 			if (abcLine.vskip) {
 				renderer.moveY(abcLine.vskip);
 			}
@@ -27,7 +32,9 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 			staffgroups.push(staffgroup);
 			renderer.paper.closeGroup()
 		} else if (abcLine.nonMusic) {
-			renderer.paper.openGroup()
+			if (classes.shouldAddClasses)
+				groupClasses.klass = "abcjs-non-music"
+			renderer.paper.openGroup(groupClasses)
 			nonMusic(renderer, abcLine.nonMusic, selectables);
 			renderer.paper.closeGroup()
 		}
@@ -35,7 +42,9 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
 
 	classes.reset();
 	if (abcTune.bottomText && abcTune.bottomText.rows && abcTune.bottomText.rows.length > 0) {
-		renderer.paper.openGroup()
+		if (classes.shouldAddClasses)
+			groupClasses.klass = "abcjs-meta-bottom"
+		renderer.paper.openGroup(groupClasses)
 		renderer.moveY(24); // TODO-PER: Empirically discovered. What variable should this be?
 		nonMusic(renderer, abcTune.bottomText, selectables);
 		renderer.paper.closeGroup()