Leider gibt es bisher keine Möglichkeit mit HTML oder CSS einen beliebigen Text in mehrere "Spalten" aufzuteilen. Mit Spalten sind dabei nicht unbedingt die Spalten einer Tabelle gemeint, sondern auch einfache Textboxen, die man dann schön in einem Layout anordnen kann (sowas kennt man eher von Broschüren oder anderen Printprodukten).
Hier stelle ich eine Lösung mit PHP vor, die einen beliebigen Text automatisch in beliebig viele Spalten aufteilt.
BeispielHier habe ich euch mal ein kleines Beispiel erstellt, was das Skript macht:
Beispiel anschauen(es geht bei diesem Tutorial allerdings nicht um das Formular, sonder nur um das Teilen des Textes)Grenzen und Eigenschaften des CodesIn Programmen, die dafür ausgerichtet sind Text zu setzen (z.B. Adobe InDesign), wird die Textaufteilung anhand der Größe der Buchstaben, des Zeilenabstands, der Höhe und Breite der Spalten u.s.w. erstellt. Das funktioniert mit PHP nicht. Was PHP aber kann, ist zu errechnen wieviele Zeichen in eine Spalte müssen anhand der Textlänge und der Spaltenanzahl. Was dieses Skript z.B. nicht kann, ist Wörter automatisch zu trennen. Das führt dazu, dass die Spalten nicht 100% gleich sind. Bei 2 - 3 Spalten klappt das aber alles bisher ganz gut, zur Not muss man selbst Wörter im Text vorher trennen.
ÜberlegungenUm unseren Code übersichtlich zu halten und weil er einfach in jede Seite zu integrieren sein soll, arbeiten wir mit einer Funktion.
Dadurch ist es möglich von jeder Position im Dokument beliebigen Text zu "spaltieren".
Eine Funktion in PHP sieht so aus:
<?PHP
function NameDerFunktion($wert,$andererwert) {
/* Code, den die Funktion ausführen soll */
}
?>
Das tolle bei so einer Funktion sind $wert und $andererwert, über solche Variablen kann ich nämlich diverse Dinge wie Zahlen und Text an meine Funktion übergeben. Und zwar für jedes Mal, wenn ich meine Funktion verwende etwas anderes.
Bei der Spaltierung habe ich zum Beispiel verschiedene Texte oder eine verschiedene Anzahl von Spalten, mit der die Funktion arbeiten soll.
Etwas konkreter: Ich habe zwei Texte auf meiner Seite, die ich jeweils spaltieren möchte, der erste Text soll in zwei Spalten aufgeteilt werden, der zweite in drei.
Durch Funktionen und die Wert-Übergabe brauch ich aber weder Code doppelt schreiben, noch brauch ich verschiedene Funktionen.
Als Code sieht das so aus:
<?php
/* Funktion zum Text in Spalten unterteilen */
function spaltieren($text,$spalten) {
}
/* Text definieren */
$inhalt = "Das ist der Text!";
/* Text auf Spalten verteilen lassen */
$spalte = spaltieren($inhalt,2);
/* Spalten ausgeben */
echo "<div class=\"spalten\">".$spalte[1]."</div>
<div class=\"spalten\">".$spalte[2]."</div>";
/* Text definieren */
$mehrinhalt = "Das ist der Text! Er wird auf drei Spalten verteilt.";
/* Text auf Spalten verteilen lassen */
$spaltemehr = spaltieren($mehrinhalt,3);
/* Spalten ausgeben */
echo "<div class=\"spalten\">".$spaltemehr[1]."</div>
<div class=\"spalten\">".$spaltemehr[2]."</div>
<div class=\"dritteSpalte\">".$spaltemehr[3]."</div>";
?>
Zunächst erstellen wir die Funktion spaltieren, in die die Werte $text und $spalten übergeben wird. Die Funktion ist erstmal leer, da fügen wir dann gleich das Herz unseres Skriptes ein.
Anschließend definieren wir einen Text und rufen dann die Funktion spaltieren auf und übergeben ihr den Text und die Anzahl der Spalten, auf die sie den Text verteilen soll.
Danach geben wir die Spalten aus.
Beim zweiten /* Text definieren */, kann man sehen, dass man das Ganze auch nochmal mit derselben Funktion und anderen Werten machen kann.
Ich hoffe das ganze erklärt, warum wir eine Funktion für das Skript benutzen.
Hauptskript
<?php
/* Funktion zum Text in Spalten unterteilen */
function spaltieren($text,$spalten) {
/* Anzahl der Zeichen des übergebenden Textes */
$zeichen = strlen($text);
/* Berechnung der Zeichen pro Spalte */
$zps = ceil($zeichen / $spalten);
/* Die einzelnen Worte des Textes in Array speichern (jedes Element
des Arrays enthält ein Wort: array[0] = wort1 etc.)*/
$worte = explode(" ",$text);
/* Anzahl der Worte des gesamten Textes */
$wg = count($worte);
/* Array, indem dann die Textteile (pro Zeile) gespeichert werden */
$res = "";
$w = 0;
/* Code für jede Spalte einmal ausführen */
for($i=1;$i<=$spalten;$i++) {
/* Code für jedes Wort des Textes ausführen */
for($g=0;$g<=$wg;$g++) {
/* Überprüfen, ob die bisherige Anzahl der Zeichen im Textteil
geringer ist, als die Zeichen pro Spalte */
if(strlen($res[$i]) < $zps) {
/* Wenn noch Platz in der Spalte ist, Wort hinzufügen */
$res[$i] .= $worte[$w]." ";
/* Anzahl der Wörter, die bisher in der Spalte untergebracht
wurden erhöhen */
$w++;
}
}
}
/* Spaltentexte zurückgeben */
return $res;
}
/* Text definieren */
$inhalt = "Das ist der Text!";
/* Text auf Spalten verteilen lassen */
$spalte = spaltieren($inhalt,2);
/* Spalten ausgeben */
echo "<div class=\"spalten\">".$spalte[1]."</div>
<div class=\"spalten\">".$spalte[2]."</div>";
/* Text definieren */
$mehrinhalt = "Das ist der Text! Er wird auf drei Spalten verteilt.";
/* Text auf Spalten verteilen lassen */
$spaltemehr = spaltieren($mehrinhalt,3);
/* Spalten ausgeben */
echo "<div class=\"spalten\">".$spaltemehr[1]."</div>
<div class=\"spalten\">".$spaltemehr[2]."</div>
<div class=\"dritteSpalte\">".$spaltemehr[3]."</div>";
?>
Hinzugekommen ist das, was in der Funktion steht.
Als erstes müssen wir ein paar Werte berechnen:
- Die Anzahl der Zeichen des Textes. Das erledigt die PHP-Funktion strlen(); sie zählt alle Zeichen eines Strings (inklusive Leerzeichen).
- Anzahl der Zeichen pro Spalte. Die Funktion ceil() rundet das Ergebnis der Rechnung in den Klammern auf, schließlich gibt es ja keine halben Zeichen. Würde man abrunden, würde am Ende ein Zeichen in der Berechnung verloren gehen.
- Anzahl der Wörter. Dazu wird der Text zunächst in die einzelnen Wörter unterteilt. Die Funktion explode() unterteilt einen Text an einem bestimmten Zeichen (in diesem Fall ist es das Leerzeichen) in Arrayelemente. Die Funktion count() zählt dann aus wievielen Elementen das Array mit den Wörtern besteht und das ist dann die Anzahl der Wörter des Textes.
Nachdem wir nun alle Werte die wir brauchen ermittelt haben, geht es schließlich zur Teilung des Textes.
Mit der ersten for-Schleife sorge ich dafür, dass der Code in den geschwungenen Klammern für jede Spalte ausgeführt wird. $i enthält dabei die Nummer der Spalte, für die gerade der Code erzeugt wird.
In der zweiten for-Schleife, wird der Code in den geschwungenen Klammern für jedes Wort des Textes ausgeführt.
Der Code überprüft zunächst, ob die Wörter, die bisher durchlaufen wurden zusammen weniger Zeichen enthalten, als pro Spalte erlaubt sind. Sprich, es wird überprüft, ob noch Platz in der aktuellen Spalte ist um ein weiteres Wort anzufügen. Wenn ja, macht er genau das: er fügt das Wort an die bisher gesammelten Wörter hinten an.
$res[$i] enhält also die Wörter der Spalte, die aktuell durchlaufen wird.
Würden wir es bei dem Code belassen, hätten wir das Problem, dass bei jeder Spalte auch der Text der vorangehenden Spalten enthalten ist.
Um das zu verhindern gibt es das:
$worte[$w]
$w++;
$w zählt, wieviele Worte des gesamten Textes schon durchlaufen und verteilt wurden. $w zählt dabei die Wörter aller Spalten, während $g nur die Wörter der aktuellen Spalte zählt.
Anschließend geben wir unseren Text, aufgeteilt auf die gewünschten Spalten zurück (return).
SchlusswortBeim Funktionsaufruf $spalte = spaltieren($inhalt,2); passiert also folgendes:
Die Funktion spaltieren wird mit den Werten in der Klammer aufgerufen. Sie führt ihren Code durch und gibt dann ihr Ergebnis zurück.
Dieses Ergebnis liegt jetzt in $spalte vor. Da das Ergebnis der Funktion ein Array ist, ist $spalte auch ein Array.
Wenn wir jetzt die Texte der einzelnen Spalten verwenden wollen müssen wir nur die Variable $spalte[NummerDerSpalte] verwenden.
In meinem Beispiel habe ich die Texte der Spalten in div-Boxen ausgegeben, das ist natürlich kein Muss, man könnte genauso gut eine Tabelle, oder was einem noch so einfällt verwenden.
Das Kernstück des Skriptes ist auf den ersten Blick ziemlich kompliziert, besonders, wenn man es nicht gewohnt ist in Schleifen,Variablen und Arrays zu denken, ich hoffe aber trotzdem, dass es einigermaßen verständlich war.
Fragt ruhig, wenn irgendwas nicht ganz klar ist.
EinbauIn einer fertigen Datei, in der auch das ganze Layout und ähnliches drin ist könnte man das Skript so verwenden:
<?php
include "funktionen.inc.php";
?>
<html>
<head>
<title>Eine Seite</title>
<style>
.box1 {
width: 200px;
float:left;
background-color:#efefef;
padding:10px;
margin:5px;
}
.box2 {
width: 200px;
float:left;
background-color:#efefef;
padding:10px;
margin:5px;
}
</style>
</head>
<body>
<h1>Überschrift der Seite</h1>
<?php
$inhalt = "Das ist der Text der Seite inklusive allem was man so
dadrin <i>haben</i> will.";
$spalte = spaltieren($inhalt,2);
?>
<div class="box1">
<?php echo $spalte[1]; ?>
</div>
<div class="box2">
<?php echo $spalte[2]; ?>
</div>
</body>
</html>
in der Datei funktionen.inc.php wäre dann unsere Funktion:
<?php
function spaltieren($text,$spalten) {
/* Anzahl der Zeichen des übergebenden Textes */
$zeichen = strlen($text);
/* Berechnung der Zeichen pro Spalte */
$zps = ceil($zeichen / $spalten);
/* Die einzelnen Worte des Textes in Array speichern (jedes Element
des Arrays enthält ein Wort: array[0] = wort1 etc.)*/
$worte = explode(" ",$text);
/* Anzahl der Worte des gesamten Textes */
$wg = count($worte);
/* Array, indem dann die Textteile (pro Zeile) gespeichert werden */
$res = "";
$w = 0;
/* Code für jede Spalte einmal ausführen */
for($i=1;$i<=$spalten;$i++) {
/* Code für jedes Wort des Textes ausführen */
for($g=0;$g<=$wg;$g++) {
/* Überprüfen, ob die bisherige Anzahl der Zeichen im Textteil
geringer ist, als die Zeichen pro Spalte */
if(strlen($res[$i]) < $zps) {
/* Wenn noch Platz in der Spalte ist, Wort hinzufügen */
$res[$i] .= $worte[$w]." ";
/* Anzahl der Wörter, die bisher in der Spalte untergebracht
wurden erhöhen */
$w++;
}
}
}
/* Spaltentexte zurückgeben */
return $res;
}
?>
vanny94
Ersteinaml daumen hoch. (Y)Ich finde das du alles schön erklärt hast und es auch eigentlich jeder verstehen sollte. (:
Auch ist es sehr nützlich und ich persönlich werde in Zukunft auch noch öfters darauf zurückgreifen. ˆˆ
Fein gemacht :b 6 Sternchen :*
Liebe Grüße, Vanny :)