Textcelerator for Sites

Are you sick of getting comments based only on your first paragraph? Do you write about things that are important, which people really ought to read to the end? Textcelerator for Sites can help. You put a button on your site, like this one:

Speed-reading holds readers' attention better than regular reading. It encourages busy people to favor your site over others. And it's a valuable courtesy; you signal to your readers that you respect their time. It's also a cool novelty; by being an early adopter, you can draw attention to your site.

Adding Textcelerator to your site is easy. First pick an icon:

Choose how you want Textcelerator to load:

Load in the background after the rest of the page is ready, or

Load in the background after the rest of the page is ready, or Start loading when the Speed Read This button is first clicked or an API function is called

Then add this code to your page, at the place where you want the Textcelerator button to appear:

The following Javascript snippet would update based on the choices you made above, but Javascript is disabled.

<!-- Textcelerator for Sites See https://www.textcelerator.com/documentation/embed --> <script type="text/javascript"> // Load Textcelerator Javascript asynchronously after the page is ready. // Queue up any Textcelerator API calls made before then. (function() { function loadScript(name) { var txl = document.createElement("script"); txl.type = "text/javascript"; txl.async = true; txl.src = name; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(txl, s); } loadScript("https://www.textcelerator.com/loadConfig"); loadScript("https://static.textcelerator.com/static/textcelerator-embed.js"); window.Textcelerator_pending = []; window.Textcelerator = function() { window.Textcelerator_pending.push(arguments) } })(); // Load Textcelerator when the Speed Read This button is first clicked or an API function is called. (function() { window.Textcelerator_pending = []; var textceleratorLoadStarted = false; function loadScript(name) { var txl = document.createElement("script"); txl.type = "text/javascript"; txl.async = true; txl.src = name; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(txl, s); } function loadTextcelerator() { textceleratorLoadStarted = true; loadScript("https://www.textcelerator.com/loadConfig"); loadScript("https://static.textcelerator.com/static/textcelerator-embed.js"); } window.Textcelerator = function() { window.Textcelerator_pending.push(arguments) if(!textceleratorLoadStarted) loadTextcelerator(); } })(); </script> <img src="https://static.textcelerator.com/static/icons/ button_96x24 .png" onclick="javascript:Textcelerator('toggleWindow')" class="TextceleratorButton" style="cursor:pointer" alt="Speed Read This">

Textcelerator for Sites is free to use on most public sites, and will remain free forever. See the license agreement for details. It will display a link to our browser plugin when it's open, which adds speed-reading functionality to every site, and which is payware; this is how we pay for development and hosting. If a user has the browser plugin installed and visits a site with Textcelerator for Sites on it, they will talk to each other so that both the page's customizations and the user's configuration settings will apply correctly. If your site has very high traffic, please let us know when you are planning to roll it out, so we can prepare server capacity. (Textcelerator waits until the rest of the page is loaded before it starts loading, similar to Google Analytics, so a failure on our end won't break your page.)

Customization

That's all you need to do! You can also customize some aspects of Textcelerator by defining a variable textcelerator_config. For example,

<script>var textcelerator_config = { position: "bottom right", openAutomatically: true }; </script>

The configurable settings are:

textcelerator_config.position Default: "bottom right" Where the Textcelerator window appears when opened. Set this to one of the exact strings "top left", "top center", "top right", "center left", "center right", "bottom left", "bottom center", or "bottom right".

textcelerator_config.openAutomatically Default: false If set to true, Textcelerator opens immediately (rather than just when you click on it.

textcelerator_config.z_index Default: 2147483640 Controls what Textcelerator is under and on top of. By default, Textcelerator will try to put itself on top of anything else.

textcelerator_config.dock Default: null If set to the ID of an element, Textcelerator will try to center itself on top of the named element.

Start Positions

Textcelerator has some heuristics to find the start of the article, so that readers will start reading at the best place. However, if you have multiple Speed Read This buttons on a page, or if the heuristics don't select the best spot, you may wish to override the start position.

When calling the Textcelerator function with the 'toggleWindow' or 'show' commands, you can provide an extra argument containing the ID of an element which contains the text you to be the start position. If no such argument is given, Textcelerator will next look for an element with an ID of "textcelerator_startHere", ie <span id="textcelerator_startHere"></span>. If that's not found, it will use a collection of heuristics based on vertical position on the page, tag and class names.

API Functions

For more complex customization, Textcelerator offers an API. To call an API function, run call Textcelerator("funcName", args), where funcName is the name of the function. (It works this way so that you can call Textcelerator functions before the script has loaded, and the arguments will be saved to run later.)

Textcelerator('toggleWindow', [optional] startLocation) Toggles the window (open it if it's currently hidden, close it if it's currently open.) This is the recommended action for "Speed Read This" button. If startLocation (optional) is given, and the window is opened rather than closed, sets the reading cursor to the first text in the element with that ID.

Textcelerator('show', [optional] startLocation) Opens the window, if it's not currently visible. If startLocation (optional) is given, sets the reading cursor to the first text in the element with that ID.

Textcelerator('hide') Hides the window, if it's currently visible.

Textcelerator('play') Starts playback. If the playback window is not open, opens it.

Textcelerator('pause') Pauses playback.

Textcelerator('setSpeed', wpm) Sets the reading speed, in words per minute. This will be rounded to the nearest integer and clipped to 5-4000. Note that you probably shouldn't use this, since the speed option persists between sites and most users will have set it according to their own preference.

Textcelerator('onPlay', callback) Registers a function which will be called when text playback is started.

Textcelerator('onPause', callback) Registers a function which will be called when text playback is paused.

Textcelerator('onFinish', callback) Registers a function which will be called when text playback is finished - that is, it paused after reaching the end of the document.

Textcelerator('onSpeedChanged', callback) Registers a function which will be called when the reading speed is changed. The callback function receives one parameter, which is an object with members 'before' and 'after' containing the old and new speeds (in words per minute).

Special Tags

Textcelerator adjusts its behavior in response to span tags with special class names that may appear in the document. These tags are:

<span class="textcelerator_skip"> Text inside this tag will be skipped by Textcelerator. Use this to exclude ephemera and decorative text that should not be read.

<span class="textcelerator_pauseHere"> Textcelerator will pause when it reaches this tag. It is useful to put this at the boundaries between articles and comments.