css Question posted in
Some basic documentation can be found here.

Css – Colour each syllable in a word in a different colour

I’m a German teacher in primary school. I want beginning readers to read some text on my practice website. To help them I need the syllables to alternate colours (black / grey, as shown in the image). Due to the amount of text I cannot colour them by hand. Luckily there is CSS hyphenation support. Is there any way I can use this to achieve colouration?

We will only use Chrome (though I’m happy to have a more universal approach). I don’t know a lot about coding so I would appreciate a working example that I can plug into my site, if possible. Thank you very much!

So far I only have this (not trying to solve the issue yet):

#word-display {
    font-size: 40px;
    margin: 20px;
    padding: 10px;
    font-family: 'NordDruck', 'AndikaW', sans-serif; /* Fallback to sans-serif if AndikaW is not available */
}

desired example output

Tags:

2

Answers


  1. 0

    You can use span
    Example:

    html and css

       <h1>Abc<span>defg</span>hi<span>jkl</span>m</h1>

    span{ color:blue }

    In this example defg and jkl will have a blue text Color.
    Additionally you can give span a class name and have different Color for different letters or words.

    Login or Signup to reply.
  2. 0

    Note: this code works OK for me on Firefox Windows10. It does not work properly on Edge/Chrome as they don’t consider a word with spans in it to be a word for hyphenation purposes.

    As a workaround you could perhaps create the spanned text using Firefox then copy it (using e.g. devtools) into your HTML so it can be seen in Chrome.

    …………………………………………………………………….

    To color bits of text differently they need to be within some element such as a span.

    To find where to set these spans, this snippet first puts each character into its own span and then the text into a very narrow div so the browser breaks the words up with its hyphenation algorithm.

    This means each syllable (OP confirmed that the browser hyphenation should be good enough to indicate syllables) will start a new line.

    We can then find all those characters that start a newline (are on the left) and put the end and start of spans there (</span><span>).

    The div is then given the full width of its parent and the text with these spans added.

    Coloring of every even and every odd span is set in the stylesheet.

    (Note all other styling during the calculations is deliberately put inline using JS to make the code more self-contained and portable).

    Here’s an example with Snow White (I hope it’s OK, my German isn’t good enough to check) from https://www.sloeful.com/german/fairytales/snow-white%5D%5B1%5D

    <head>
  <style>
    .text span:nth-child(even) {
      color: blue;
    }
    
    .text span:nth-child(odd) {
      color: black;
    }
  </style>
</head>

<body>
  <div class="text" lang="de">
    <script>
      const text = `Es war einmal eine Königin, die hatte einen Wunsch: Sie wollte ein Kind, das so weiß wie Schnee, so rot wie Blut und so schwarzhaarig wie Ebenholz sein sollte. Eines Tages erfüllte sich ihr Wunsch und sie bekam eine Tochter, die sie Schneewittchen nannte. Doch die Königin starb bald darauf und der König heiratete erneut. Doch seine neue Frau war eitel und böse und wollte die Schönste im ganzen Land sein.

Eines Tages fragte sie ihren Zauberspiegel: "Spieglein, Spieglein an der Wand, wer ist die Schönste im ganzen Land?" Der Spiegel antwortete: "Frau Königin, Ihr seid die Schönste hier, aber Schneewittchen ist tausendmal schöner als Ihr." Die Königin wurde vor Wut rasend und befahl einem Jäger, das Mädchen in den Wald zu bringen und zu töten.

Doch der Jäger konnte es nicht übers Herz bringen und ließ Schneewittchen laufen. Sie fand schließlich ein kleines Häuschen, das den sieben Zwergen gehörte. Sie bat um Hilfe und die Zwerge nahmen sie auf. Schneewittchen half im Haus und die Zwerge gaben ihr ein Dach über dem Kopf.

Doch die böse Königin fand heraus, dass Schneewittchen noch lebte und beschloss, sie zu töten. Sie verkleidete sich als alte Frau und ging zum Haus der Zwerge. Dort bot sie Schneewittchen einen vergifteten Apfel an, den diese annahm und ohnmächtig wurde.

Die Zwerge fanden Schneewittchen und dachten, sie sei tot. Sie legten sie in einen Sarg aus Glas und besuchten sie jeden Tag. Eines Tages kam ein Prinz vorbei und sah Schneewittchen im Sarg. Er war so verliebt in sie, dass er den Sarg mitnahm. Auf dem Weg stolperte er und der vergiftete Apfel fiel aus Schneewittchens Mund. Sie erwachte und der Prinz und sie verliebten sich ineinander.

Sie heirateten und die böse Königin wurde bestraft. Schneewittchen und der Prinz lebten glücklich bis ans Ende ihrer Tage.`;

      const textDiv = document.querySelector('.text');
      const offset = textDiv.getBoundingClientRect().left;
      textDiv.style.width = "1px";
      textDiv.style.hyphenateCharacter = '';

      textDiv.style.hyphens = "auto";
      textDiv.style.whiteSpace = "pre-wrap";
      let newText = '';
      for (let i = 0; i < text.length; i++) {
        newText += '<span>' + text.charAt(i) + '</span>';
      }
      textDiv.innerHTML = newText;
      let anotherText = '';
      requestAnimationFrame(function() {
        const els = document.querySelectorAll(".text span");
        for (let j = 0; j < els.length; j++) {
          const el = els[j];
          const left = el.getBoundingClientRect().left;
          if (left <= offset) {
            anotherText += '</span><span>';
          }
          anotherText += el.innerHTML;
        }
        textDiv.style.width = '100%';
        textDiv.style.hyphenateCharacter = '-';
        textDiv.style.fontSize = '24px';
        textDiv.innerHTML = anotherText;
      });
    </script>
</body>

    Here’s what I see on Firefox:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search