css: Wie kann ich bei Mehrspaltigkeit eine feste Spaltenbreite einstellen?
Moin,
mit dem Firefox drucke ich Liedtexte aus, es reicht, wenn das Problem im FF gelöst wird.
Bei einen Liedtext möchte ich pro Zeile mehrere Tabulatoren setzen, sodass die Takte in untereinander stehenden Zeilen gleich breit sind. Soweit ich weiß, kennt css keine Tabulatoren.
Nun habe ich mit Mehrspaltigkeit experimentiert, komme aber nicht zum Ziel weil die css-Eigenschaft column-width im FF ignoriert wird.
So sieht's aus als HTML-Fließtext mit Zeilenumbruch <br>:
und so soll es aussehen (Geany, ohne Akkorde)
xxx
1 Antwort
Das column-width-Property wird auch von Firefox unterstützt. Es wirkt aber beispielsweise nicht bei Inline-Elementen oder auch bei zu hohen Werten wirst du keine visuelle Änderung sehen. Grundsätzlich ist das Property für deinen Fall nicht geeignet, denn der Textfluss verläuft bei columns vertikal, statt horizontal.
Die einfachste Lösung wäre meines Erachtens das eigene Setzen von Tabs. Damit die in deinem Textcontainer vom Browser berücksichtigt werden, kannst du das white-space-Property entsprechend setzen.
Beispiel:
<!doctype html>
<head>
<title>Example</title>
<style>
.text { white-space: pre }
</style>
</head>
<body>
<p class="text">Some	text</p>
</body>
In meinem Beispiel habe ich das Tabzeichen mit dem Entity 	 gesetzt. Du kannst Tabs aber auch ganz normal mit der Tab-Taste setzen (hier im Gutefrage-Editor wird das leider nicht unterstützt).
Via CSS kannst du sogar die Tabgröße mit dem tab-size-Property nachträglich ändern.
Wenn du nicht mehrere Tabs nacheinander setzen möchtest, müsstest du die Texte in einzelne Container stopfen. Dann könntest du die Spaltenbreite über ein Grid regeln.
HTML:
<p class="text-container">
<span>Lorem ipsum</span>
<span>dolor sit</span>
<span>amet</span>
</p>
CSS:
.text-container {
display: grid;
grid-template-columns: 150px 200px 50px;
}
In diesem Fall gibt es drei Spalten. Die erste Spalte ist 150px, die Zweite ist 200px und die letzte 50px breit.
.text { white-space: pre }
Danke, das ist die Lösung.
Extra-danke. Nach sowas suche ich seit Jahren. Das i-Tüpfelchen wäre, wenn es auch mehrere tab-positions gäbe, denn die Spalten können unterschiedlich breit sein.
Jedes Textprogramm unterstützt diese Funktion.