<!-- textarea where the text is data-bind --><paper-textareaplaceholder="Type something here" value="{{text}}"></paper-textarea><!-- calculate readability scores by paragraph --><retext-readabilitytext="[[text]]"
unit="RootNode"
last-result="{{results}}"></retext-readability><!-- Template to render a table to show results --><templateis="dom-repeat" items="[[results]]" as="unit"><divclass="row"><divclass="layout horizontal"><!-- show readability index --><divclass="layout vertical flex"><divclass="layout horizontal cell head"><divclass="flex">Index</div><divclass="flex">Suitable reading age</div></div><templateis="dom-repeat" items="[[unit.readability]]"><divclass="layout horizontal cell"><divclass="index flex">[[item.index]]</div><divclass="flex">[[item.age]]</div></div></template></div><!-- show underlaying stats --><divclass="layout vertical flex"><templateis="dom-repeat" items="[[unit.counts]]"><divclass="layout horizontal cell"><divclass="index flex">[[item.index]]</div><divclass="flex">[[item.count]]</div></div></template></div></div><!-- unit of text --><pre>[[unit.text]]</pre></div>bower install --save PolymerVis/retext-elements
More examples and documentation can be found at retext-elementswebcomponents page.
PolymerVis is a personal project and is NOT in any way affliated with Unified (and retext), Polymer or Google.
retext-elements is a suite of Polymer 2.0 elements to do some client-side text-processing with Unified and retext.
retext-elements make use of web-worker to process text in order to prevent blocking of the UI. Hence, javascript files in ./webworkers should be included in polymer.json as additional sources or dependencies so that they are properly included when you build your Polymer application.
You can also modified the location of the web-worker script through the web-worker attribute in any of the retext elements.
retext-readability is available to calculate the readability scores at sentence, paragraph, and document level. The calculation is done inside a web worker to prevent blocking of the UI when the text or file is big.
The available readability indexes are:
- Dale–Chall readability formula
- Automated Readability Index
- Coleman–Liau index
- Flesch–Kincaid grade level
- SMOG index
- Gunning fog index
- Spache readability formula
Note that each readability index has its own assumptions and limitations. E.g. SMOG requires at least 30 sentences, while Spache is only suitable up to 4th grade.
Download and analyze a text file from a URL.
<retext-readabilityurl="./thelittlematchgirl.txt"
unit="RootNode"
last-result="{{results}}"></retext-readability>Read and analyze a text file.
<retext-readabilityfile="[[file]]"
unit="ParagraphNode"
last-result="{{results}}"></retext-readability>Analyze a text value.
<retext-readabilitytext="This is a very readable sentence"
unit="SentenceNode"
last-result="{{results}}"></retext-readability>Data-bind to the most recent analysis result.
<retext-readabilitytext="This is a very readable sentence"
last-result="{{results}}"></retext-readability>Listening to most recent analysis result.
<retext-readabilitytext="This is a very readable sentence"
on-result="_onResult"></retext-readability>Calculate readability scores at what granularity with the attribute unit:
RootNode: The entire text as a wholeParagraphNode: Each paragraphSentenceNode: Each sentence
<retext-readabilitytext="This is a very readable sentence"
unit="SentenceNode"
last-result="{{results}}"></retext-readability>Do not calculate the readability scores if the sentence has less than the minimum number of words.
<retext-readabilitytext="This is a very readable sentence"
min-words=5on-result="_onResult"></retext-readability>The source code for the web worker scripts are in ./src. The following command will build the distribution scripts to ./webworkers.
npm run build