CSS: Tabs im Web wie im Word?

Sicher sind Sie auch schon mal konfrontiert worden damit, dass Sie Texte auf eine ganz bestimmte Art – mittels Tabulatoren – darstellen sollten/wollten. Ja eben wie im „Word“.

Etwa so…:

im Word…

Beim Googeln dann die teilweise ernüchternden Antworten wie:

  • geht nicht
  • Web (html/css) mit seinen Browsern ist kein Text-Formatierungsprogramm sondern ein Präsentations-Werkzeug
  • mit Tabellen arbeiten

Soviel vorweg: Es gibt immer Lösungen…

Deshalb hier ein paar „Übungsbeispiele“:

Absatz mit Einzug, mit Text der immer weiter geht, schön eingezogen mit Text der immer weiter geht, schön eingezogen mit Text der immer weiter geht, schön eingezogen

WordPress setzt das übrigens beim Verwenden der Schaltfläche „Einzug erhöhen“ mit style=“padding-left: 30px;“ beim <p>-Tag um.

Bedenken Sie aber, dass Ihr padding-Einzug auch auf kleineren Geräten wie Handy noch schön aussehen sollte.

Absatz mit (positivem) Erstzeilen-Einzug: Dafür gibt es die CSS-property „text-indent“. Sie sorgt dafür, dass bei einem Paragraphen/Absatz am Anfang die gewünschte Einrückung stattfindet, aber nur auf er ersten Zeile. Das hier ist mit style=“text-indent: 50px;“ gemacht worden

Absatz mit negativem Erstzeilen-Einzug: Eine negative „text-indent“-Anweisung alleine würde dazuführen, dass links abgeschnitten wird. Also so:

Bsp. Absatz mit negativem Erstzeilen-Enizug: Eine negative „text-indent“-Anweisung alleine würde dazuführen, dass links abgeschnitten wird.

Also müssen wir das noch „padding“ korrigieren, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht. Das erreiche wir mit: style=“text-indent: -50px; padding-left: 50px;“

Oder so? …. Also müssen wir das noch „padding“ korrigieren, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht. Das erreiche wir mit: style=“text-indent: -150px; padding-left: 150px;“

Und wie wäre das? …. Also müssen wir das noch „padding“ korrigieren, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht, damit das schön aussieht. Das erreiche wir mit: style=“text-indent: -50px; padding-left: 150px;“

Und jetzt wieder eine ganz normale Zeile.

Da kommt mir noch die CSS-Tab-Size-Property in den Sinn… Aber um es kurz zu machen: Es hilft auch nicht weiter, denn die  tab-size property definiert lediglich die Länge des Leerraumes, die für einen tab-Character genommen werden soll.

FAZIT

So richtig word-mässige Tab-Lösungen sind das ja nicht. Jedenfalls sind die „Fragestellungen“ des obigen „Screenshots“ damit nicht gelöst.

Scheinbar bleiben also dafür wirklich nur Tabellen. Das heisst für den nicht-html-Benutzer, dass er ein Plugin haben sollte, das ihm bei den Tabellen unterstützend unter die Arme greift, den WordPress selber bietet da nichts an. Wie wärs damit?
ODER NOCH BESSER: Es gibt auch ein Plugin, welches im Editor bei Tabellen „behilflich“ ist: Plugin

Grad noch entdeckt:

E-Mail:
Telefon:012-3456789

das wurde so gemacht:

<span style=“display: inline-block; width: 6em;“>E-Mail:</span> <span style=“display: inline-block; width: 6em;“>Telefon:</span>012-3456789