forked from rism-digital/verovio.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
structure.xhtml
126 lines (113 loc) · 5.74 KB
/
structure.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
---
layout: verovio
verovio-light: true
title: Verovio Stucture
active: how
how-active: how-structure
---
<div class="row">
<div class="col-md-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="panel panel-default">
{% include how-sidebar.html %}
</div>
</div>
<div class="col-md-9">
<div class="panel-body">
<h3>Structure</h3>
<p>
The purpose of Verovio is to provide a self-contained typesetting engine that is directly capable of rendering MEI to its graphical representation in high quality. Its main goal is also to develop a library with an internal structure identical to MEI as far as possible.
</p>
<h4>Page-based data structure</h4>
<p>
For practical reasons, the Verovio library uses a page-based customization of MEI internally. Since the modifications introduced by the customization are very limited, the Verovio library can also be used to render un-customized MEI files. With the page-based customization, the content of the music is encoded in <code><page></code> elements that are themselves contained in a <code><pages></code> element within <code><mdiv></code>.
</p>
<p>
A <code><page></code> element contains <code><system></code> elements. From then on, the encoding is identical to standard MEI. That is, a <code><system></code> element will contain <code><measure></code> elements or <code><staff></code> elements that are both un-customized, depending on whether or not the music is measured or un-measured respectively.
</p>
{% highlight xml %}
<body>
<mdiv>
<pages>
<page page.width="2108" page.height="2970" page.leftmar="20" page.rightmar="20">
<system system.leftmar="50" system.rightmar="50">
<scoreDef>
<staffGrp>
<staffDef n="1" clef.line="2" clef.shape="G" />
</staffGrp>
</scoreDef>
<measure n="1">
<staff n="1">
<layer n="1">
<!-- ... -->
</layer>
</staff>
</measure>
</system>
</page>
</pages>
</mdiv>
</body>
{% endhighlight %}
<h4>Layout and positioning</h4>
<p>
The idea of a page-based customization is also to make it possible to encode the positioning of elements directly in the content tree. This can be useful in some uses of MEI where the encoding represents one single source with one image per page. This is typically the case with optical music recognition applications. Verovio supports both positioned elements and automatic layout. The latter will be executed when un-customized MEI files are rendered.
</p>
<p>
The page-based organization is modeled by a MEI customization that defines the structure describe above. The ODD file of the customization and the corresponding RNG schema are available from the <a href="https://code.google.com/p/mei-incubator/source/browse/#svn%2Fpage-based" target="_blank">MEI Incubator</a>. This is still work-in-progress.
</p>
<h4>SVG structure</h4>
<p>
One advantage of SVG rendering over other formats (e.g., images or PDF) is that SVG is rendered natively in all modern web-browsers. Because it is in XML, it also has the advantage that it is well suitable to interaction since every graphic is an XML element that is easy addressable. With Verovio, we also have the advantage that the SVG is organized in such a way that the MEI structure is preserved as much as possible. For example, a <code><note></code> element with an <code>xml:id</code> attribute in the MEI file will have a corresponding <code><g></code> element in the SVG with and <code>class</code> attribute <code>"note"</code> and an <code>id</code> attribute corresponding to the <code>xml:id</code>. This makes interaction with the SVG very easy. The hierarchy of the element is also preserved as shown below.
</p>
{% highlight xml %}
<tuplet xml:id="t1" num="3" numbase="2">
<beam xml:id="b1">
<note xml:id="n1" pname="d" oct="5" dur="8" />
<note xml:id="n2" pname="e" oct="5" dur="16" dots="1"/>
<note xml:id="n3" pname="d" oct="5" dur="32" />
<note xml:id="n4" pname="c" oct="5" dur="8" accid="s"/>
</beam>
</tuplet>
<beam xml:id="b2">
<tuplet xml:id="t2" num="3" numbase="2">
<note xml:id="n5" pname="d" oct="5" dur="8" />
<note xml:id="n6" pname="e" oct="5" dur="16" dots="1"/>
<note xml:id="n7" pname="f" oct="5" dur="32" accid="s"/>
<note xml:id="n8" pname="e" oct="5" dur="8"/>
</tuplet>
</beam>
{% endhighlight %}
<div class="row">
<div class="col-sm-6 text-center">
<img src="{{ site.baseurl }}/images/tuplet-beam.png" width="300"/>
</div>
<div class="col-sm-6">
{% highlight xml %}
<g class="tuplet" id="svg-t1" >
<g class="beam" id="svg-b1" >
<g class="note" id="svg-n1" >...</g>
<g class="note" id="svg-n2" >...</g>
<g class="note" id="svg-n3" >...</g>
<g class="note" id="svg-n4" >...</g>
</g>
</g>
<g class="beam" id="svg-b2" >
<g class="tuplet" id="svg-t2" >
<g class="note" id="svg-n5" >...</g>
<g class="note" id="svg-n6" >...</g>
<g class="note" id="svg-n7" >...</g>
<g class="note" id="svg-n8" >...</g>
</g>
</g>
{% endhighlight %}
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$( document ).ready(function() {
});
//]]>
</script>