Syllable.js/exampleSeparator.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
67
68
69
70
71
72
73
<!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;">
Wenn du auf den Knopf drückst, dann wird zwischen den Silben der Wörter ein Bindestrich eingefügt. Damit du das besser sehen kannst probieren wir was bei Donaudampfschiffahrtsgesellschaft heraus kommt.

Eure Entwickler
    </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: {
          "de-x-syllable": "FORCEHYPHENOPOLY",
          "de": "FORCEHYPHENOPOLY"
      },
      fallbacks: {
          "de": "de-x-syllable"
      },
    setup: {
        selectors: {
            ".hyphenate": {
                hyphen: Separator,
                minWordLength: 4
            }
        }
    }
});

</script>
<script src="./syllables.js"></script>
<script>

document.addEventListener('DOMContentLoaded', function() {

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

    Hyphenopoly.hyphenators["de"].then((hyphenator) => {

      let syllableConverter = new SyllableConverter(
        {
          hyphenator : hyphenator,
          exceptions : [ "E u r e", "E n t w i c k l e r"],
          syllableOutputSeparator : "-",
          syllableColors: ["black","black"]
        }
      );

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

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

    });
  });
});

</script>

</body>
</html>