Syllable.js/example_en.html at master · AndreasFerdinand/Syllable.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="de-DE">
<head>
  <title>Syllables</title>

  <meta charset="utf-8"/>

</head>
<body>

  <div class="container">
    <p id="source" style="white-space: pre;">
Click the button to colorize the syllables of this text.
Special thanks to all supporters of the project. Have fun with it.

Your Developers
    </p>
    <p><button type="button" id="convert">Convert</button></p>
    <p id="target" style="white-space: pre;"></p>
  </div>

<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>
<script src="./syllables.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {

  document.getElementById("convert").addEventListener("click",function(){

    Hyphenopoly.hyphenators["en-us"].then((hyphenator) => {

      let syllableConverter = new SyllableConverter(
        {
          hyphenator : hyphenator,
          exceptions : [ "Y o u r", "D e v e l o p e r s" ]
        }
      );

      let convertedText = syllableConverter.convertText( document.getElementById("source").innerText );

      document.getElementById("target").innerHTML = convertedText;

    });
  });
});
</script>

</body>
</html>