Philipp Trommlers Blog - pythonhttps://blog.philipp-trommler.me/de/2019-09-29T21:42:06+02:00I've Made A Thing: yafg2019-09-29T21:42:06+02:002019-09-29T21:42:06+02:00Philipp Trommlertag:blog.philipp-trommler.me,2019-09-29:/de/posts/2019/09/29/imat-yafg/<p>Unzufrieden mit den bestehenden Lösungen habe ich mein eigenes
Markdown-Plugin geschrieben, um <code><figure></code>- und <code><figcaption></code>-Tags für
Bilder zu erstellen: <em>yafg</em>. Um das wie und warum soll es hier gehen.</p><p>Wie ich bereits <a href="https://blog.philipp-trommler.me/de/posts/2019/08/09/my-new-blog/">im ersten Beitrag in meinem neuen
Blog</a> erwähnt habe, konnte ich kein für mich
funktionierendes Markdown-Plugin finden, das korrekte <code><figure></code>- und
<code><figcaption></code>-Tags um meine Bilder einfügt. Eines hatte eine seltsame Syntax,
ein anderes nutzte das <code>alt</code>-Attribut zum Erstellen der Bildunterschrift (dazu
später mehr) und ein drittes war zusätzlich so kaputt, dass es nicht mit
mehrzeiligen Bildunterschriften umgehen konnte.</p>
<p>Alles in allem eine unbefriedigende Situation, insbesondere da ich denke, dass
semantische HTML-Tags wie <code><figure></code> oder <code><figcaption></code> im Hinblick auf die
Barrierefreiheit (Accessibility) wichtig sind. Diese ist im Übrigen auch der
Grund, warum die Verwendung des <code>alt</code>-Attributs für die Bildunterschrift
schlecht ist. Das <code>alt</code> ist als alternative (daher der Name) Beschreibung
desjenigen Elements gedacht, das das Attribut trägt, um es denen zugänglich
machen zu können, die ansonsten aus dem ein oder anderen Grund nicht darauf
zugreifen könnten. Wie es der
<a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTML-Standard</a>
ausdrückt:</p>
<blockquote>
<p>"One way to think of alternative text is to think about how you would read the
page containing the image to someone over the phone, without mentioning that
there is an image present. Whatever you say instead of the image is typically
a good start for writing the alternative text."</p>
<p>[Eine Möglichkeit, sich dem Alternativtext zu nähern, ist es, sich
vorzustellen, wie man die Seite, die das Bild enthält, jemandem über das
Telefon vorlesen würde, ohne zu erwähnen, dass dort ein Bild ist. Was auch
immer man anstelle des Bildes sagt, ist typischerweise ein guter Start beim
Schreiben des Alternativtextes.]</p>
</blockquote>
<p>(so zumindest für die inhaltlich prominentesten Bilder, die wahrscheinlich genau
diejenigen sind, die mit <code><figure></code>-Tags umschlossen werden sollen). Eine
Bildunterschrift hingegen ist eher wie eine Zusammenfassung, die vielleicht
zusätzliche Quellen benennt und zitiert oder eine Interpretation liefert (nach
meinem Verständnis). Das <code>title</code>-Attribute wiederum hat keine wirkliche
Bedeutung, lediglich die etwas vage Beschreibung von "[…] information […]
appropriate for a tooltip" [Informationen, die für einen Tooltip passen], und
<a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute">von seiner Verwendung wird
abgeraten</a>.
Somit ist es ein idealer Container für die Bildunterschrift.</p>
<p>Und hier kommt <a href="https://git.sr.ht/~ferruck/yafg"><em>yafg</em></a> ins Spiel: Es umgibt
alle freistehenden Bilder mit <code><figure></code>-Tags und verwendet die <code>title</code> der
Bilder, um eine passende Bildunterschrift zu erzeugen. Natürlich unterstützt es
mehrzeilige Beschriftungen, sodass die Markdown-Dateien wie gewünscht formatiert
werden können. Außerdem kann das <code>title</code>-Attribute auch automatisch von den
Bildern entfernt werden, wenn man es sonst auch nicht verwenden würde. Hierfür
implementiert es einen Markdown <code>Treeprocessor</code> anstelle der weniger robusten
Regular Expressions.</p>
<p>Eine kleine Erweiterung, die ich noch für die Zukunft geplant habe, ist, dass
sowohl zu den <code><figure></code>- wie auch zu den <code><figcaption></code>-Tags benutzerdefinierte
Klassen zu Styling- und Scripting-Zwecken hinzugefügt werden können. Aber das
muss vorerst noch warten, wahrscheinlich genau so lange, bis ich es selbst
brauche 😉.</p>
<p>Wenn du <em>yafg</em> selbst ausprobieren möchtest, kannst du es über
<a href="https://pypi.org/project/yafg/">PyPI</a> installieren. Ein paar kurze Hinweise zur
Verwendung in Python wie auch als Pelican-Plugin finden sich im README. Viel
Glück, Feedback ist willkommen!</p>