[XIPA] - Technische Dokumentation : Struktur & Aufbau

Das System besteht aus drei grundlegenden Dateien: einer XML-Datei (IPA.xml), welche die Informationen zu allen hinterlegten Zeichen enthält, einer Dokumenttyp-Definition (ipa.dtd), durch welche die erlaubten Einträge in der XML-Datei definiert werden und einem XSL-Stylesheet (IPA.xsl), das für die Transformation der XML-Daten in ein vom Browser lesbares Format – in diesem Fall (X)HTML – verantwortlich ist.

Diese Dateien werden durch drei JavaScript Skripte ergänzt (insertAtCursor.js, onclickSwitcher.js und tooltip.js). Die Skripte sind für die Funktionalität, d.h. das Einfügen von Text an der Cursorposition, Verknüpfung und Wechsel zwischen Event-Handlern (Anwenderereignissen) für die Wiedergabe von Audio und das Einfügen des Zeichen-Codes bei Mausklick und die Anzeige der erweiterten Informationen beim Bewegen des Mauszeigers über die Symbole verantwortlich.

Um die Logik des XSL-Stylesheets vom Layout zu trennen, wurden (wenn möglich) die meisten Style-Elemente in eine weitere XSL-Datei (attributes.xsl) und ein CSS-Stylesheet (styles.css) ausgegliedert.

Alle Dateien wurden manuell erstellt und mit unterschiedlichen XML-Editoren und (validierenden) XML-Parsern auf Wohlgeformtheit und Validität überprüft. Funktionalität und Erscheinungsbild wurden über die internen XSLT-Prozessoren von Mozilla Firefox, Google Chrome und Internet-Explorer Edge auf unterschiedlichen Betriebssystemen getestet und angepasst.

xipa            <!−− Hauptordner −−>
−− .htaccess    <!−− Server−Konfigurationsdatei (Medientypen−Anweisungen, Browser−Caching−Richtlinien) −−>
−− IPA.xml      <!−− Hauptdatei des Projekts (im Web−Browser ausführbar) −−>
   > data                       <!−− 1. Unterordner −−>
   −− IPA.xsl                   <!−− XSL−Stylesheet (Layout−Vorgaben und Templates)                    −−>
   −− IPA.dtd                   <!−− Dokumenttyp−Definition (legt die erlaubten Elemente fest)         −−>
   ... attributes.xsl, vowels.xsl, styles.css   <!−− weitere Dateien −−>
     >> audio_samples
          >>> mp3                 <!−− ∗.mp3 Dateien der Laute (Reduktion von Serverlast und Traffic)  −−>
          >>> wav                 <!−− unkomprimierte Audiodateien ∗.wav Format                        −−>
          ... 00E6.wav, 00F8.wav ...
     >> fonts
        ... CharisSIL−R.woff                       <!−− Webfont−Version der Charis SIL Schriftart      −−>
     >> scripts                                    <!−− 3 JavaScript−Skripte und die jQuery Bibliothek −−>
        ... insertAtCursor.js, tooltip.js, onclickSwitcher.js, jquery−1.11.3.min.js

2.1 XML–Daten (IPA.xml)

Datengrundlage des Systems bildet die Datei IPA.xml. In ihr sind sämtliche Zeichen und Informationen hinterlegt. Zusätzlich wurden für eventuell hinzukommende Zeichen (insbesondere bei Konsonanten und Vokalen) Leerstellen gelassen, die einen Nachtrag an der jeweiligen Position erleichtern.

Im Header der XML-Datei befindet sich die Angabe der zugrunde liegenden XML-Version (XML 1.0 Spezifikation), der verwendeten Zeichenkodierung (UTF-8-Kodierung), der URI der Dokumenttyp-Deklaration (d.h. der Bezug zur externen Dokumenttyp-Definition, in welcher Angaben zu Struktur und Regeln der XML-Datei definiert sind) sowie der Verweis auf das zur Weiterverarbeitung (zur Transformation) zu verwendende Stylesheet.

<?xml version="1.0" encoding="UTF−8"?>

<!DOCTYPE ipa SYSTEM "data/ipa.dtd">                     <!−− Dokumenttyp−Deklaration  −−>
<?xml−stylesheet type="text/xsl" href="data/IPA.xsl"?>   <!−− Link zum XSL−Stylesheet  −−>

<ipa>                                                    <!−− Wurzelelement −−>
  <sound>...</sound>                                     <!−− Definition der einzelnen Laut−Elemente    −−>
  <sound>...</sound>                                     <!−− Definition der einzelnen Laut−Elemente... −−>
...
</ipa>

Auf das Wurzelelement <ipa> folgen aneinandergereiht alle Laute des Systems. Jeder Laut ist in ein <sound>-Element eingebettet, das den Vorgaben der DTD entspricht und ist mit einem Attribut type versehen, das die jeweilige Kategorie (Konsonant, Vokal, Diakritikum etc.) festlegt.

<sound type="consonant">
<manner>plosive</manner>          <!−− Artikulationsart            −−>
<place>glottal</place>            <!−− Artikulationsort            −−>
<category>voiceless</category>    <!−− stimmhaft / stimmlos        −−>
<class>pos</class>                <!−− possible,empty,impossible   −−>
   <name>
    <symbol>Glottal stop</symbol>  <!−− Name des Symbols            −−>
    <tex>\\textglotstop</tex>      <!−− TeX−Befehl                  −−>
    <praat>\\?g</praat>            <!−− Praat−Code                  −−>
    <ucentity>0294</ucentity>      <!−− Unicode Zeichen (UCS Code)  −−>
    <unicode>ʔ</unicode>     <!−− Unicode−Zeichen             −−>
    <cardinal>113</cardinal>       <!−− Kardinalzahl (IPA Number)   −−>
   </name>
</sound>

2.2 Dokumenttyp-Definition (ipa.dtd)

Die Einträge innerhalb der einzelnen <sound>-Elemente der XML-Datei (IPA.xml) entsprechen den Vorgaben der externen Dokumenttyp-Definition (ipa.dtd) im Unterordner /data, mit welcher das XML-Dokument verknüpft ist. Die DTD legt das XML-Dokument als eine Datei fest, die aus mehreren Elementen des Typs <sound> besteht, welche wiederum die Elemente type, manner, place etc. (Typ, Art, Ort etc.) enthalten können. Ein sound-Element muss mit einem Attribut type versehen sein. Zusätzlich müssen die Elemente manner und name angegeben werden. Alle weiteren Angaben sind optional. Die Attribute der sound-Elemente müssen mit einem der angegebenen Typen aus der Attributliste (Konsonant, Vokal, Diakritikum etc.) übereinstimmen.

<?xml version="1.0" encoding="UTF−8"?>
<!ELEMENT ipa (sound+)>

<!ELEMENT sound (type, manner, place?, category?, class?, name, name2?, example1?, example2?, ucentity?, symbol?, praat?)>
<!ATTLIST sound
          type (consonant | vowel | diacritic | other | suprasegmental | consonantnp | toneoraccent) #REQUIRED>

<!ELEMENT type     (#PCDATA)>
<!ELEMENT manner   (#PCDATA)>
<!ELEMENT place    (#PCDATA)>
<!ELEMENT category (#PCDATA)>
<!ELEMENT class    (#PCDATA)>
<!ELEMENT name (symbol?, tex, tex2?, praat?, ucentity?, unicode, cardinal, sampa?)>
...

Innerhalb des <sound>-Elements müssen die grundlegenden Informationen zu Artikulationsart, -ort und -modus hinterlegt sein. Die Angabe der Klasse (class) definiert, ob es sich bei dem Eintrag um einen existierenden Laut (pos=possible/möglich), um einen nicht vorhandenen aber theoretisch möglichen Laut (emp=empty/leer), oder um einen als nicht artikulierbar klassifizierten Laut (imp=impossible/unrealisierbar) handelt.

Existierende Laute (bzw. Symbole) haben mindestens ein weiteres Element mit der Bezeichnung name. In diesem Element sind die zugehörigen Zeicheninformationen hinterlegt, die Informationen zum Unicode-Zeichen in hexadezimaler Schreibweise (z.B. ʔ), zur Kardinalzahl des Symbols im Alphabet der IPA (z.B. 113) und einer Angabe zur Notation in LATEX (z.B. \textglotstop) bestehen müssen. Alle weiteren Angaben – wie beispielsweise die Notation in Praat oder SAMPA – sind optional gehalten. Dies ist notwendig, da diese Notationsarten nicht für jedes Symbol des IPA eine Entsprechung bereithalten.

2.3 XSL-Stylesheet (IPA.xsl)

Das XSL-Stylesheet bestimmt maßgeblich die Ausgabe des Dokuments. Im Header des Stylesheets wird die verwendete XML-Version und UTF-8 Zeichenkodierung festgelegt. Der Eintrag <xsl:stylesheet...> deklariert, dass es sich um ein Stylesheet der XSLT 1.0 Spezifikation handelt, welches Anweisungen aus dem Namensraum der XSL-Transformationen beinhaltet. Als Ausgabemethode ist HTML festgelegt.

<?xml version="1.0" encoding="UTF−8"?>
  <xsl:stylesheet version="1.0"                        <!−− Anfang des XSL−Stylesheets (XSLT Vers. 1.0) −−>
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform" <!−− Angaben zu verwendeten Namensraum URIs      −−>
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xhtml="http://www.w3.org/1999/xhtml"
      xmlns:xlink="http://www.w3.org/1999/xlink">

      <xsl:output method="html" encoding="UTF−8"/>    <!−− Definition der Ausgabemethode und Kodierung  −−>
      <xsl:include href="./attributes.xsl" />         <!−− Einbinden externer Dateien (XSL−Stylesheet)  −−>

        <xsl:template match="/">                      <!−− "match−all"−Template −−>
          <html>
            <head>...</head>                          <!−− Angabe der Kopfdaten (s. nächster Abschnitt) −−>
            <body>
             ...     <!−− Anweisungen zur Formatierung der Grundstruktur und Aufrufe weiterer Templates −−>
                <xsl:apply−templates select="sound"/>
             </body>
          </html>
        </xsl:template>                               <!−− Ende des "match−all"−Templates −−>

                                                      <!−− Anfang des Template−Teils (siehe Templates)  −−>
       <xsl:template name="xyz">
       ...                  <!−− beinhaltet diverse Anweisungen, kann selbst weitere Templates aufrufen −−>
       </xsl:template>
       ...
  </xsl:stylesheet>                                    <!−− Ende des XSL−Stylesheets −−>

2.3.1 Head- und Body-Tags im Stylesheet

Die XSL-Datei besteht aus zwei Teilen. Im ersten Teil des Stylesheets wird der Grundaufbau der Seite definiert. Hier befinden sich innerhalb der html-Tags die Elemente head und body.

In den Kopfdaten (dem head-Element) werden zunächst Metadaten des Dokuments (z.B. ein Titel) angegeben. Zusätzlich können hier weitere Meta-Informationen über das Dokument (z.B. Schlüsselwörter und Beschreibungen, verwendete Zeichenkodierung etc.) hinterlegt werden. Das head-Element beinhaltet weiterhin alle für den Browser relevanten Instruktionen und Informationen, z.B. Styling-Angaben, die durch Einbinden eines externen CSS-Stylesheets referenziert werden und die Aufrufe von Skript-Dateien, die für die Funktionalität des Dokuments beim Seitenaufruf bereitstehen müssen.

<head>
<title>[XIPA] − Extensible International Phonetic Alphabet</title>     <!−− Definition des Titels      −−>
<meta name="keywords" content="transcription, phonetics, IPA, ..." />

<link rel="stylesheet" type="text/css" href="./data/styles.css" />     <!−− Pfad zum CSS−Stylesheet    −−>
<script type="text/javascript" src="./data/tooltip.js"></script>       <!−− Einbinden externer Skripte −−>
<script>...</script>
...
</head>

Innerhalb der <body>-Tags werden einzelne Elemente, z.B. (vorerst leere) Tabellen, das Grundgerüst der Vektorgrafik für das Vokaltrapez sowie das Eingabefeld erstellt und auf der Seite angeordnet. Mit dem Befehl xsl:call-template..., welcher auf den Template-Teil des Dokuments referenziert, können die Elemente mit ihrem jeweils zugehörigen Inhalt gefüllt werden. Attribute (z.B. IDs oder „Style“-Angaben etc.) können innerhalb des XSL-Dokuments selbst gesetzt werden, in das externe CSS-Stylesheet ausgelagert werden, oder aber aus der im Header der XSL-Datei eingebundenen Stylesheet-Datei (attributes.xsl) in Form von vordefinierten „Attribut-Sets“ abgerufen werden.

<body xsl:use−attribute−sets="body.style">  <!−− xsl:use−attribute−sets importiert Style−Anweisungen    −−>
                                            <!−− eingebundene Attribut−Sets z.B.: "body.style" ...      −−>
                                            <!−− die Sets sind in der Datei attributes.xsl definiert    −−>
  <script>...</script>  <!−− inline JavaScript Code (z.B. Testen der Web−Audio−API−Kompatibilität etc.) −−>

<!−− Definitionen aller darzustellenden Elemente (Tabellen, SVG, Textfeld etc.) des Ergebnis−Dokuments −−>
...
   <div xsl:use−attribute−sets="div.suprasegmentals" id="suprasegmentals">
      <caption xsl:use−attribute−sets="caption.style"><h3>Suprasegmentals</h3></caption>
        <table id="sup" xsl:use−attribute−sets="table.suprasegmentals">
           <!−− Aufruf des Templates mit dem Namen "Suprasegmentals" innerhalb des Tabellen−Elements    −−>
           <xsl:call−template name="Suprasegmentals"/>
        </table>
   </div>
...
</body>

2.3.2 Templates

Der zweite Teil der XSL-Datei – d.h. der Abschnitt nach dem „match-all“-Template, in welchem der HTML-Teil der Ergebnisdatei definiert ist – besteht aus einer freien Abfolge von Template-Regeln. Nach der letzten Anweisung im body-Tag (

xsl:apply-templates
select=...

) werden alle Knoten des Typs sound zur weitergehenden Bearbeitung ausgewählt. Ein vereinfachtes Beispiel für die Verarbeitung eines Template-Aufrufs (xsl:call-template...) am Beispiel der Suprasegmentalia findet sich im folgenden Ausschnitt:

<!−− #########################  TEMPLATES  ########################## −−>
...
<xsl:template name="Suprasegmentals">
<xsl:for−each select="//sound[@type=’suprasegmental’]">
<!−− xsl:for−each führt die folgenden Anweisungen für alle gewählten Elemente aus   −−>
<!−− Ausgewählt werden alle <sound>−Elemente mit dem Attribut type=’suprasegmental’ −−>
  <tr>
    <td class="{class/text()}" width="18%" xsl:use−attribute−sets="no.border.right">
        <!−− class=... ruft die Klasse des jeweiligen Elements auf, sofern vorhanden ist diese "pos"  −−>
        <!−− das Attribut−Set "no.border.right" erstellt das Attribut style="border−right: 0em none;" −−>
        <xsl:call−template name="Transcribe">   <!−− ruft das Template mit dem Namen "Transcribe" auf −−>
           <xsl:with−param name="name" select="./name"></xsl:with−param>
        </xsl:call−template>
    </td>
  </tr>
</xsl:for−each>
</xsl:template>
...
  <!−− Das Template "Transcribe" füllt die Zelle mit dem entsprechenden Inhalt (s. nächster Abschnitt) −−>

< /xsl:stylesheet >

Der Aufruf xsl:call-template name=... aus dem body-Element ruft das Template mit dem Namen Suprasegmentals aus dem Template-Abschnitt der XSL-Datei auf. Die xsl:for-each-Anweisung filtert mittels XPath-Ausdruck (select=“//sound[@...]“) diejenigen sound-Elemente aus der XML-Datei, die das Attribut type=’suprasegmental’ aufweisen. In die – schon vor Template-Aufruf definierte – Tabelle wird nun für jedes gefundene Element eine neue Tabellenzeile (tr) erstellt und die Zelle (td) mit dem entsprechenden Zelleninhalt (in diesem Fall dem Unicode-Zeichen) versehen.

Die eigentliche Vorgehensweise ist komplexer als hier dargestellt, da jede Zeile meist noch mit zusätzlichen Informationen wie der Bezeichnung des Symbols und ggf. Beispielen angereichert wird. Eine Darstellung der einzelnen Elemente und Bausteine ist schematisch in Abschnitt 3 dargestellt.

2.4 Templates zur Ausgabe der Unicode-Zeichen

Für die Ausgabe und Zuordnung der Unicode-Zeichen sind zwei Templates zuständig – die Templates „Transcribe“ und „Plot_Symbol“. Beide befinden sich im oberen Teil des Template-Abschnitts des XSL-Stylesheets.

2.4.1 Das Template Transcribe (Tabellen)

Innerhalb aller Templates (Suprasegmentals, Diacritics, Accents etc.) wird das Template Transcribe aufgerufen sobald in einer Zelle das Unicode-Zeichen ausgegeben werden soll. Die Unicode-Kodes (bzw. die Unicode-Entities) der Grundzeichen sind in der XML-Datei innerhalb des name-Knotens im unicode-Tag hinterlegt. Da für Beispiele – diese liegen im example1- oder example2-Knoten – ebenfalls Angaben des Unicode-Kodes existieren, wird zur Bestimmung des Pfades ein Parameter übergeben, der das jeweils zutreffende Zeichen lokalisiert. Dieser Pfad wird bereits beim Aufruf des Templates Transcribe übergeben. Soll eine Tabellenzelle mit dem Inhalt des ersten Beispiels gefüllt werden, wird statt des Parameters ./name der Parameter ./example1 übergeben.

<!−− ########################### PLOT UNICODE SYMBOLS ########################### −−>
<xsl:template name="Transcribe">
  <xsl:param name="name"/>

    <xsl:call−template name="Add_metadata">
      <xsl:with−param name="name" select="$name" />      <!−− leitet den Pfad des name−Attributs weiter −−>
    </xsl:call−template>

       <xsl:value−of select="($name/unicode"/>
       <!−− Ausgabe der im unicode−Tag hinterlegten Unicode−Zeichen in allen Tabellenzellen             −−>
</xsl:template>

Der Ausgabewert wird durch die select-Anweisung initiiert. Dabei legt $name den Pfad fest, aus welchem das Zeichen gewählt werden soll. Die Angabe von /unicode navigiert letztlich zum unicode-Element, dessen Inhalt daraufhin in die Ausgabe geschrieben wird.

2.4.2 Das Template Plot Symbol (SVG-Grafik)

Da die Vektorgrafik etwas anders strukturiert ist, konnte hier das Transcribe-Template nicht vollständig wiederverwertet werden. Das Template erfüllt zwar auch hier seine Aufgabe, die Elemente mit Metadaten anzureichern (durch den Aufruf des Templates Add_metadata), die eigentliche Ausgabe der Zeichen innerhalb der Grafik ist jedoch in ein weiteres, einfaches Template – das Template Plot_Symbol – ausgelagert.

Die Gründe für die separate Ausgabe der Zeichen liegen darin, dass die Vektorgrafik aus mehreren Ebenen aufgebaut ist und eine geringfügig abgeänderte Syntax verlangt. Um zu verhindern, dass der Nutzer das Zeichen exakt treffen muss, wird unterhalb jedes Symbols ein Kreis-Element generiert, um die „klickbare“ Fläche zu vergrößern. Mit dieser Fläche sind die Metainformationen verknüpft. Das sichtbare Zeichen liegt eine Ebene höher. Der Aufbau der Vektorgrafik ist in Abschnitt 3.3 skizziert.

<!−− ######################## PLOT VOWEL SYMBOLS IN SVG ######################### −−>
<xsl:template name="Plot_Symbol">
  <xsl:param name="name"/>
    <xsl:value−of select="$name/unicode/text()"/>
    <!−− Ausgabe des Unicode−Zeichens innerhalb der SVG−Grafik −−>
</xsl:template>

2.5 Das Metadaten-Template

Zusätzliche Attribute für die Weiterverarbeitung mit Skripten werden durch das Template Add_metadata erstellt. Dieses Template weist jedem sound-Element mit der Klasse class=’pos’ – d.h. jedem nicht-leeren Element – eine Reihe an Attributen zu, die für die Funktionalität entscheidend sind. Das Metadaten-Template befindet sich am Ende der Datei IPA.xsl. In Abschnitt 3 ist das Zusammenwirken der Templates (vom Aufruf innerhalb des body-Tags bis hin zu den Aufrufen der Templates für die Ausgabe der Unicode-Zeichen und der Metadaten) für einige Elemente der IPA-Tabelle schematisch skizziert.

<!−− ########################### ADD METADATA TEMPLATE ########################## −−>
<xsl:template name="Add_metadata">
  <xsl:param name="name"/>

<xsl:if test="class = ’pos’">              <!−− Auswahl der Elemente der Klasse ’pos’                   −−>
                                           <!−− (alle Elemente mit hinterlegtem Unicode−Zeichen)        −−>
  <xsl:attribute name="symbol_name">       <!−− erstellt ein Attribut mit dem Namen symbol_name         −−>
    <xsl:value−of select="$name/symbol"/>  <!−− Attributwert ist der im <symbol>−Tag hinterlegte Text   −−>
  </xsl:attribute>                         <!−− (z.B. "Glottal stop") −−>

  <xsl:if test="$name/cardinal != ’’">     <!−− wenn der Inhalt des <cardinal>−Tags nicht leer ist...   −−>
    <xsl:attribute name="ipa_number">      <!−− erstelle ein weiteres Attribut mit dem Namen ipa_number −−>
      <xsl:value−of select="$name/cardinal"/>
    </xsl:attribute>
  </xsl:if>

  <xsl:attribute name="unicode">           <!−− erstellt ein weiteres Attribut mit dem Namen unicode    −−>
    <xsl:value−of select="$name/unicode"/> <!−− Ausgabewert ist der aufgelöste Wert der Entity−Referenz −−>
  </xsl:attribute>                         <!−− ... wird bei der Ausgabemethode "Unicode" ausgegeben    −−>

  <xsl:attribute name="praat">
    <xsl:choose>  <!−− Teste, ob der Eintrag der Praat−Notation "Escape−Sequenzen"  (z.B. \) beinhaltet −−>
      <xsl:when test="$name/praat[starts−with(text(), ’\’)]">     <!−− in IPA.xml z.B. als \\xx notiert −−>
        <xsl:value−of select="substring($name/praat/text(), 2)"/> <!−− wenn ja, überspringe ersten \    −−>
      </xsl:when>
      <xsl:otherwise>                                 <!−− andernfalls: Ausgabe des vollständigen Kodes −−>
        <xsl:value−of select="$name/praat/text()"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:attribute>

<xsl:attribute>...</xsl:attribute>  <!−− weitere Attribute ... −−>
                                     <!−− z.B. "data−sound"−Attribut (Angabe des Pfades zur Audiodatei) −−>
</xsl:if>

</xsl:template>

<td class="pos"                                   <!−− öffnendes <td>−Element der Klasse "pos" −−>
    style="border−right: 0em none;"                  <!−− importierte Style−Regeln für das Element −−>
    symbol_name="Glottal stop"                       <!−− Name des Symbols −−>
    phonetic_description="Voiceless Glottal Plosive" <!−− Phonetische Beschreibung des Lauts −−>
    unicode_entity="0294"                            <!−− Unicode Zeichenreferenz −−>
    ipa_number="113"                                 <!−− Kardinalzahl (IPA−Nr.) −−>
    data−sound="./data/audio_samples/wav/0294.wav"   <!−− Pfad zur verknüpften Audiodatei −−>
    unicode="ʔ"                                <!−− Unicode−Zeichen (dargestellt wird das umgewandelte Symbol)−−>
    tex="\textglotstop"                              <!−− ausführliche LaTeX−Notation −−>
    tex2="P"                                         <!−− kurze LaTeX−Notation −−>
    praat="\?g">                                     <!−− Praat−Notation −−>
    ʔ                                          <!−− sichtbares Unicode−Zeichen im <td>−Element (Symbol)−−>
</td>                                             <!−− schließendes <td>−Element −−>

2 Struktur & Aufbau