Bunte Schrift mit Javascript?

[schn1tzel]

Hallo,

ich würde gerne wissen ob es eine Möglichkeit gibt Schrift mit Javascript bunt zu machen, das heißt immer der nächste Buchstabe hat eine andere Farbe.

z.B.
H(rot)a(gelb)l(grün)l(blau)o(wieder rot)

Liebe Grüße
schn1tzel

[ChrisB]

Hi,

ich würde gerne wissen ob es eine Möglichkeit gibt Schrift mit Javascript bunt zu machen, das heißt immer der nächste Buchstabe hat eine andere Farbe.

Klar - du musst nur den jeweiligen Textknoten in einzelne Buchstaben aufsplitten, die du dann wiederum in eigene Elemente einsetzt (bspw. SPANs), die wiederum du dann einzeln formatieren kannst.

Mit ein bisschen Grundkenntnissen über den Umgang mit dem DOM durchaus umsetzbar.

MfG ChrisB

[apsel]

Om nah hoo pez nyeetz, schn1tzel!

Klar - du musst nur den jeweiligen Textknoten in einzelne Buchstaben aufsplitten, die du dann wiederum in eigene Elemente einsetzt (bspw. SPANs), die wiederum du dann einzeln formatieren kannst.

wenn es keine zufälligen Farben sein sollen, geht es so auch ohne JS.

Matthias

[suit]

wenn es keine zufälligen Farben sein sollen, geht es so auch ohne JS.

Aber automatisch wirds dann etwas schwierig - es gibt zwar ::first-letter aber nicht ::second-letter oder ::nth-letter()

[apsel]

Om nah hoo pez nyeetz, suit!

wenn es keine zufälligen Farben sein sollen, geht es so auch ohne JS.

Aber automatisch wirds dann etwas schwierig

korrekt.

• es gibt zwar ::first-letter aber nicht ::second-letter oder ::nth-letter()

Das wär doch mal ein Verbesserungsvorschlag.

Matthias

[Don P]

Hallo,

wenn es keine zufälligen Farben sein sollen, geht es so auch ohne JS.

Aber automatisch wirds dann etwas schwierig

korrekt.

Nicht korrekt. Ein Span-Element für jeden Buchstaben hardcodieren und per CSS je eine Farbe zuordnen. Was ist daran schwierig?

Gruß, Don P

[suit]

Nicht korrekt. Ein Span-Element für jeden Buchstaben hardcodieren und per CSS je eine Farbe zuordnen. Was ist daran schwierig?

"Ein span-Element für jeden Buchstaben hardcodieren" klingt für mich nicht sonderlich automatisch - ich kann mich aber auch täuschen :p

[apsel]

Om nah hoo pez nyeetz, Don P!

Hallo,

wenn es keine zufälligen Farben sein sollen, geht es so auch ohne JS.

Aber automatisch wirds dann etwas schwierig

korrekt.

Nicht korrekt. Ein Span-Element für jeden Buchstaben hardcodieren und per CSS je eine Farbe zuordnen. Was ist daran schwierig?

<span>s</span><span>c</span><span>h</span><span>w</span><span>i</span><span>e</span><span>r</span><span>i</span><span>g</span><span> n</span><span>i</span><span>c</span><span>h</span><span>t</span><span>,</span><span> a</span><span>b</span><span>e</span><span>r</span><span> ö</span><span>d</span><span>e</span><span> u</span><span>n</span><span>d</span> <span> l</span><span>a</span><span>n</span><span>g</span><span>w</span><span>e</span><span>i</span><span>l</span><span>i</span><span>g</span> Matthias

[suit]

<span>s</span><span>c</span><span>h</span><span>w</span><span>i</span><span>e</span><span>r</span><span>i</span><span>g</span><span> n</span><span>i</span><span>c</span><span>h</span><span>t</span><span>,</span><span> a</span><span>b</span><span>e</span><span>r</span><span> ö</span><span>d</span><span>e</span><span> u</span><span>n</span><span>d</span> <span> l</span><span>a</span><span>n</span><span>g</span><span>w</span><span>e</span><span>i</span><span>l</span><span>i</span><span>g</span>

AAAAH!

[Gunnar Bittersmann]

@@apsel:

nuqneH

<span>s</span><span>c</span><span>h</span><span>w</span><span>i</span><span>e</span><span>r</span><span>i</span><span>g</span><span> n</span><span>i</span><span>c</span><span>h</span><span>t</span><span>,</span><span> a</span><span>b</span><span>e</span><span>r</span><span> ö</span><span>d</span><span>e</span><span> u</span><span>n</span><span>d</span> <span> l</span><span>a</span><span>n</span><span>g</span><span>w</span><span>e</span><span>i</span><span>l</span><span>i</span><span>g</span>

Man kann’s auch lesbar notieren:

   <span>s</span><!--  
--><span>c</span><!--  
--><span>h</span><!--  
--><span>w</span><!--  
--><span>i</span><!--  
--><span>e</span><!--  
--><span>r</span><!--  
--><span>i</span><!--  
--><span>g</span>  
  
   <span>n</span><!--  
--><span>i</span><!--  
--><span>c</span><!--  
--><span>h</span><!--  
--><span>t</span><!--  
--><span>,</span>  
  
   <span>a</span><!--  
--><span>b</span><!--  
--><span>e</span><!--  
--><span>r</span>  
  
   <span>ö</span><!--  
--><span>d</span><!--  
--><span>e</span>  
  
   <span>u</span><!--  
--><span>n</span><!--  
--><span>d</span>  
  
   <span>l</span><!--  
--><span>a</span><!--  
--><span>n</span><!--  
--><span>g</span><!--  
--><span>w</span><!--  
--><span>e</span><!--  
--><span>i</span><!--  
--><span>l</span><!--  
--><span>i</span><!--  
--><span>g</span>

Qapla'

[Don P]

Hallo,

Man kann’s auch lesbar notieren:

<span>ö</span><!--

--><span>d</span><!--
--><span>e</span>

  
Genau, und fast automatisch per RegEx-Suchen-Ersetzen zusammenbauen. Es schreibt ja wohl niemand einen Roman in dem Stil.  
  
Mir ging's nur darum, dass es auch unschwer ohne JS geht. Wenn man unter "automatisch" natürlich eine tolle Animation versteht, dann wird's wirklich schwierig ohne JS.  
  
Gruß, Don P  

[suit]

Man kann’s auch lesbar notieren:

Qapla'

Ums mit den Worten eines anderen Ausserirdischen zu sagen: Indeed!

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Klar - du musst nur den jeweiligen Textknoten in einzelne Buchstaben aufsplitten, die du dann wiederum in eigene Elemente einsetzt (bspw. SPANs), die wiederum du dann einzeln formatieren kannst.
Mit ein bisschen Grundkenntnissen über den Umgang mit dem DOM durchaus umsetzbar.

Auch ohne eigene Elemente und DOM:

<script type="text/javascript">  
[code lang=javascript]var rainbow = ["#F00000", "#FF8000", "#FFFF00", "#00C000", "#0040F0", "#0000E0", "#8000C0"];  
  
function coloredString(string, colors)  
{  
  for (var i = 0; i < string.length; i++)  
  {  
    document.write(string[i].fontcolor(i < colors.length ? colors[i] : colors[colors.length - 1]));  
  }  
}  

~~~</script>  
  
<p>Komm wir malen einen  
  <script type="text/javascript">`coloredString("Regenbogen", rainbow);`{:.language-javascript}</script>  
  <noscript>Regenbogen</noscript>  
  auf den grauen Pflasterstein!</p>[/code]  
  
  
Oder doch lieber eine [Sonne](http://www.ostmusik.de/komm_wir_malen_eine_sonne1.htm)?  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)

[Felix Riesterer]

Liebes schn1tzel,

Schrift mit Javascript bunt zu machen [...]
H(rot)a(gelb)l(grün)l(blau)o(wieder rot)

mein Animationsscript kann soetwas. Wenn Du willst, kannst Du seine Funktionsweise einmal analysieren.

Liebe Grüße,

Felix Riesterer.