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.
To see how the library works, go to silbenapp.froeschler.net 🇩🇪.
Download the latest release of Hyphenopoly. You need the follwoing files/directories:
Hyphenopoly.jsHyphenopoly_Loader.jspatterns/<LANGUAGE>.wasm
Replace <LANGUAGE> with the language you actually need. Additionally you need the latest release of Syllable.js.
First you have to load and initialize Hyphenopoly.
<script src="./Hyphenopoly_Loader.js"></script>
<script>
Hyphenopoly.config({
"require": {
"en-us": "FORCEHYPHENOPOLY"
},
"setup": {
"exceptions": { "global" : ""},
"selectors": {
".hyphenate": {
"hyphen": "•",
"minWordLength": 3
}
}
}
});
</script>Then you can use Syllable.js:
<script src="./syllables.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
Hyphenopoly.hyphenators["en-us"].then((hyphenator) => {
let sourceText = "I love to play soccer. American football is nice.";
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator
}
);
let convertedText = syllableConverter.convertText( sourceText );
});
});
</script>Since Syllable.js is based on Hyphenopoly and this was created to separate words at the end of lines, the default hyphenation pattern doesn't work, as single letters aren't separeted. Due to this fact, a specific pattern for syllabification was created with release 5.0.1. Additional details can be found here.
To use the new pattern, Hyphenopoly must be initialized as shown below.
<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: "•",
minWordLength: 4
}
}
}
});
</script>The full example can be found in example.html.
After converting a text to syllables the processed word count could be retrieved using function getWordCount:
let convertedText = syllableConverter.convertText( "This is a text about Unicorns" );
let wordCount = syllableConverter.getWordCount();To change the default colors for the syllables, the attribute syllableColors of the configuration object can be used:
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
syllableColors: ["green","yellow"],
}
);Additionally the method setSyllableColors can be used.
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator
}
);
syllableConverter.setSyllableColors(["#005996","#96000e"]);It's even possible to use more than 2 colors. Just try it out.
To change the colors of all other characters the attribute otherColor can be used:
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
otherColor : 'yellow'
}
);To add a separator between the syllables use parameter syllableOutputSeparator or method setSyllableOutputSeparator. The separator can be a simple character or an arbitrary string (even HTML code).
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
syllableOutputSeparator : "-"
}
);See file exampleSeparator.html.
Since nobody (or no software) is perfect, it can happen, that the syllabification is not correct. If so you can define exceptions to overcome the default behavior of syllable.js. Exceptions can be passed using exceptions attribute during creation of the converter object. Than words will be splitted at space character into syllables.
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
exceptions : [ "F o o t b a l l" ]
}
);If exceptions must be changed or set after object creation, the method setExceptions can be used.
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator
}
);
syllableConverter.setExceptions(["F o o t b a l l"]);A different exception separator is supported too, just set the exceptionSeparator attribute:
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
exceptions : ["F-o-o-t-b-a-l-l"],
exceptionSeparator : '-'
}
);If another character than • is used as hyphen-character for Hyphenopoly than this character musst be passed to the SyllableConverter:
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
hyphenatorSeparator : '~'
}
);If words and non-word characters are not separated correct, than the default regular expresson doesn't meet your requirements. The default regex is:
/(?<Word>[\wüäöÜÄÖßẞ]+)|(?<Other>\s|[^\wüäöÜÄÖßẞ]+)/gThe regular expression can be changed using attribute textSplitterRegex. By default, the name 'Lucía' is not captured as a single word, but as two words, separated by the í character which will be shown black. To handle the í correct change the regular expressen as shown below.
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
textSplitterRegex : /(?<Word>[\wüäöÜÄÖßẞí]+)|(?<Other>\s|[^\wüäöÜÄÖßẞí]+)/g
}
);Keep in mind, that regular expression must contain at least the named capturing groups Word and Other.
By default Syllable.js splits the words in syllables and wraps them into <font> tags using a color attribute to set the display color. The reason, why styling is done using attributes and not using stylesheets is, that the stylesheet color is lost by some browsers on copy & paste. For example the word 'Football' is transformed to the following code:
<font color="blue">Foot</font><font color="red">ball</font>If you need to change the resulting html, need to capture the processed words or something else, a handler object must be implemented and passed to the converter. At least the following functions must be implemented by this handler object.
decorateWord- Function to style the words.decorateOther- Function to style all other characters, including line breaks and spaces.decorateSyllable- Funciton to style the syllables.
The following code shows how a custom converter can be used. A complete example implementation can be found in customConverterExample.html.
CustomConverter = function() {
this.decorateWord = function( primarilyWord, syllables ) {
let syllableCount = 0;
let htmlChunk = "";
syllables.forEach( (syllable) => {
htmlChunk += ( syllableCount % 2 === 0 ) ? "<i>" + syllable + "</i>" : "<b>" + syllable + "</b>"
syllableCount++;
});
return htmlChunk;
};
this.decorateOther = function( other ) {
return other;
};
this.decorateSyllable = function (syllable, fontColor, styleClassName, index) {
return syllableConverter.decorateSyllable(syllable, fontColor, styleClassName, index);
}
};
var customConverter = new CustomConverter( );
document.getElementById("convert").addEventListener("click",function(){
Hyphenopoly.hyphenators["en-us"].then((hyphenator) => {
let syllableConverter = new SyllableConverter(
{
hyphenator : hyphenator,
textDecorator : customConverter
}
);
let convertedText = syllableConverter.convertText( "Football" );
});
});Using the custom converter the output could be transformed to:
