Zu lange Überschriften in Mebis/Moodle umbrechen

Der BwR-Unterricht Die deutsche Sprache ist für ihre langen Komposita bekannt: zum Beispiel Betriebswirtschaftslehre. Auf großen (breiten) Bildschirmen ist da meist kein Problem. Bei kleineren Bildschirmen, also zum Beispiel Smartphones, kann es da schon mal eng werden. In Mebis werden dann schon mal lange Überschriften auf dem Smartphone abgeschnitten:

Dabei wird der Text streng genommen gar nicht abgeschnitten, sondern der den Text beinhaltende Container ist nicht (mehr) breit genug. Ein bisschen mit dem Finger schieben, und schon kann man alles lesen. Allerdings muss man das wissen und es nicht auf dem ersten Blick ersichtlich. Im schlechtesten Fall würde hier gar ein Tipp- oder Rechtschreibfehler vermutet werden. Das macht keinen guten Eindruck.

Die Schriftgröße müsste über CSS relativ zur Breite des Containers anpassbar sein. Mit em oder vw kann man zwar ein bisschen herumdoktern, bringt jedoch keine befriedigenden Ergebnisse und der Aufwand wäre zu hoch.

Es gibt einige Methoden, Text auch ohne Leerzeichen umzubrechen. Am regelgerechtesten geht das mit dem bedingten Leerzeichen:

­

Das Sonderzeichen kann man sich leicht merken: es ist so schüchtern, dass es erst dann in Erscheinung tritt, wenn man es (un)bedingt braucht.

Bei langen Wörtern setzt man dieses Zeichen im HTML-Editor an alle relevanten Stellen innerhalb des Wortes. Das Wort wird dann bei Bedarf im Browser inklusive Trennstrich umgebrochen:

<h4>1.1 Wiederholungs&shy;aufgaben</h4>
<div class="well well-sm">
<h4>1.2 Der Industrie­­&shy;konten&shy;­rahmen</h4>
</div>
  

Auf dem Smartphone erscheint dann das komplette Wort auf zwei Zeilen getrennt.

Hat der Container genügend Platz, wird das Wort nicht getrennt:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.