syllable.js's Introduction

Syllable.js

This project was created during the coronavirus pandemic when schools were closed. The aim of the project was the creation of a new web application where children can enhance their reading skills using the Syllable-Method.

So what can you actually do with Syllable.js? You can colorize the syllables of words:

The following text

I love to play soccer. American football is nice.

transforms to

It works for german texts too. It even works for all languages which are supported by Hyphenopoly.

Install

Download the latest release of Hyphenopoly. You need the follwoing files/directories:

Hyphenopoly.js
Hyphenopoly_Loader.js
patterns/LANGUAGE.wasm

Replace LANGUAGE with the language you actually need. Additionally you need the latest release of Syllable.js.

Usage

First you have to load and initialize Hyphenopoly.

<script src="./Hyphenopoly_Loader.js"></script>
<script>
  var Separator = "•";
  
  Hyphenopoly.config({
    "require": {
      "en-us": "FORCEHYPHENOPOLY"
    },
    "setup": {
      "exceptions": { "global" : ""},
      "selectors": {
        ".hyphenate": {
          "hyphen": Separator,
          "minWordLength": 3
        }
      }
    }
  });
</script>

Then you can use Syllable.js:

<script src="./Syllable.js"></script>
<script>
...
    Hyphenopoly.hyphenators["en-us"].then((hyphenator) => {

      let SyllableConfig = {
        Separator: Separator,
        ExceptionsSeparator: " ",
        SourceText : "Some Source Text",
        FirstColor : "blue",
        SecondColor : "red",
        Exceptions : [ "S o m e" ],
        hyphenator : hyphenator
      };

      let SyllableText = convertText( SyllableConfig );

    });
...
</script>