MEI Snippet Viewer : Layout

Position

You can control the positioning of the rendered music by specifying CSS rules for the target element. In order to get text-align to work correctly in IE, set display to inline-table and specify the alignment on the parent element:

.music {
    display: inline-table;
}
.music-container-center {
    text-align:center;
}

<div class="music-container-center">
    <span class="music"/>
</div>

Inline and floating layout can be specified without an additional container:

<span class="music" style="display:inline-table;vertical-align:middle;"></span>

<span class="music" style="float:right;"></span>

Size and margins

Size and inner margins of the music fragment can either be specified in the MEI file:

...
<scoreDef 
    ... 
    page.height="3000" 
    page.width="1600" 
    page.topmar="450" 
    page.leftmar="100" 
    page.rightmar="100" 
    page.scale="50%">
...

or by passing the parameters to the MEI.Viewer constructor:

var viewer = new MSV.Viewer({ 
  data         : myMEIData,
  target       : $('#my-music-span'),
  pageScale    : 0.5,
  pageHeight   : 250,
  pageWidth    : 700,
  pageTopMar   : 50,
  pageLeftMar  : 30,
  pageRightMar : 30
});

MEI Snippet Viewer render XML encoded music on the web

Layout

Position

Size and margins