Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .reader
  #output
    span
    span
    span
  #input
    textarea#inputText(cols=92 rows=10)
    input(type='submit' onClick='startReading()' value='Start Reading')
    input#pause(type='button' onClick='togglePause()' value='Pause' disabled)
              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

* {
  font-family: 'Roboto Slab', Arial;
}

.reader {
  width: 760px;
  margin: 10px auto;
}
span {
  display: inline-block;
  width: 250px;
  height: 50px;
  border: 1px solid hsla(0, 0, 0, .2);
  vertical-align: top;
  line-height: 3em;
  text-align: center;
}

span:nth-child(2) {
  font-size: 2em;
  line-height: 1.4em;
}

input {
  border: 1px solid hsla(0, 0, 0, .2);
  background-color: white;
  width: 200px;
  height: 40px;
  box-shadow: 0 2px 5px hsla(0, 0, 0, .2);
  cursor: pointer;
  &:active {
    box-shadow: none;
    outline: none;
    background-color: darken(white, 5%);
  }
  &:focus {
    outline: none;
  }
  &:disabled {
    cursor: auto;
    background-color: darken(white, 5%);
  }
}
              
            
!

JS

              
                // Configuration
var speed = 200;

// Globals
var index = 0;
var elements = document.getElementsByTagName('span');
var pauseBtn = document.getElementById('pause');
var inputText = document.getElementById('inputText');
var words;
var interval;

// Reset the speed reader to the start
function reset() {
  clearInterval(interval);
  interval = false;
  index = 0;
}

// Populates the word boxes with previous, current, next
function populateBoxes() {
    elements[0].innerText = words[index-1] || '';
    elements[1].innerText = words[index] || '';
    elements[2].innerText = words[index+1] || '';
}

// Pause the speed reader
function togglePause() {
  
  // Pause if it's currently running
  if (interval) {
    pauseBtn.value = 'Continue';
    clearInterval(interval);
    interval = false;
    
  // Continue if we are already paused
  } else {
    pauseBtn.value = 'Pause';
    read();
  }
}

// Start reading from the beginning
function startReading() {
  reset();
  read();
  
  pauseBtn.value = 'Pause';
}

// Continue reading the text
function read() {  
  pauseBtn.disabled = false;
  words = inputText.value.split(' ');

  // Main loop
  interval = setInterval(function() {
    populateBoxes();
    index++;
    
    // If we've reached the end, reset to the beginning
    if (index > words.length) {
      reset();
    }
  }, speed)
}

// Example text
function init() {
  inputText.value = 'Speed reading is the art of silencing subvocalization. Most readers have an average reading speed of 200 wpm, which is about as fast as they can read a passage out loud. This is no coincidence. It is their inner voice that paces through the text that keeps them from achieving higher reading speeds. They can only read as fast as they can speak because that\'s the way they were taught to read, through reading systems like Hooked on Phonics. However, it is entirely possible to read at a much greater speed, with much better reading comprehension, by silencing this inner voice. The solution is simple - absorb reading material faster than that inner voice can keep up. In the real world, this is achieved through methods like reading passages using a finger to point your way. You read through a page of text by following your finger line by line at a speed faster than you can normally read. This works because the eye is very good at tracking movement. Even if at this point full reading comprehension is lost, it\'s exactly this method of training that will allow you to read faster. With the aid of software like Spreeder, it\'s much easier to achieve this same result with much less effort. Load a passage of text (like this one), and the software will pace through the text at a predefined speed that you can adjust as your reading comprehension increases. To train to read faster, you must first find your base rate. Your base rate is the speed that you can read a passage of text with full comprehension. We\'ve defaulted to 300 wpm, showing one word at a time, which is about the average that works best for our users. Now, read that passage using spreeder at that base rate.  After you\'ve finished, double that speed by going to the Settings and changing the Words Per Minute value. Reread the passage. You shouldn\'t expect to understand everything - in fact, more likely than not you\'ll only catch a couple words here and there. If you have high comprehension, that probably means that you need to set your base rate higher and rerun this test again. You should be straining to keep up with the speed of the words flashing by. This speed should be faster than your inner voice can \'read\'. Now, reread the passage again at your base rate. It should feel a lot slower – if not, try running the speed test again). Now try moving up a little past your base rate – for example, at 400 wpm – , and see how much you can comprehend at that speed. That\'s basically it - constantly read passages at a rate faster than you can keep up, and keep pushing the edge of what you\'re capable of. You\'ll find that when you drop down to lower speeds, you\'ll be able to pick up much more than you would have thought possible. One other setting that\'s worth mentioning in this introduction is the chunk size – the number of words that are flashed at each interval on the screen. When you read aloud, you can only say one word at a time. However, this limit does not apply to speed reading. Once your inner voice subsides and with constant practice, you can read multiple words at a time. This is the best way to achieve reading speeds of 1000+ wpm. Start small with 2 word chunk sizes and find out that as you increase, 3,4, or even higher chunk sizes are possible. Good luck!';
  words = inputText.value.split(' ');
  populateBoxes();
}

init();
              
            
!
999px

Console