Wir verwenden Cookies zur Verbesserung der Benutzerfreundlichkeit und zum Verfolgen der Besucherströme mit Matomo (Piwik).
Mehr Infos auf der Datenschutzseite. Du kannst die Cookie-Erlaubnis jederzeit am Ende der Seite widerrufen.

Droplet "Char-Wrap"

Packt jedes Zeichen in einen eigenen Tag

 

Beispielwort ohne Droplet: Kuhliefumdenteich

Mit Droplet [[char-wrap?text=Kuhliefumdenteich]] : Kuhliefumdenteich

Quellcode:
<p class="char-wrap">
  <span>K</span><span>u</span><span>h</span><span>l</span><span>i</span><span>e</span><span>f</span><span>u</span><span>m</span><span>d</span><span>e</span><span>n</span><span>t</span><span>e</span><span>i</span><span>c</span><span>h</span>
</p>

Deshalb einzeln via CSS stylebar

/* Beispiel */
.char-wrap span:nth-child(2) {color:red; font-weight:bold;}
.char-wrap span:nth-child(5) {color:green; font-weight:bold;}
.char-wrap span:nth-child(9) {color:blue; font-weight:bold;}
.char-wrap span:nth-child(11) {color:darkorange; font-weight:bold;}
.char-wrap span:nth-child(14) {color:deeppink; font-weight:bold;}
/* Die Zahlen in Klammern anpassen */

 

Standardmäßig wird jedes Zeichen in einen span-Tag gepackt.
Andere Tags möglich durch tag=
[[char-wrap?text=deinText&tag=div]]


Im Wysiwyg-Editor macht das Droplet natürlich nicht so viel Sinn, weil man hier eh jedes Zeichen einzeln stylen kann. ;-)
Aber in Feldern, wo kein PHP möglich und kein Editor vorhanden ist.
In PHP-Ausgaben könnte man das Droplet oder den Code aus dem Droplet verwenden.

Zum Download Droplet Char-Wrap
Danke an DarkViper für den Code zum Droplet.