Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

              
                .spritz#spritz
  .spritz-word#spritz_word
  
.settings
  .controls.settings-controls
    span.speed
      a.slower.entypo-fast-backward#spritz_slower(href="#" title="Slow Down")
      input.wpm#spritz_wpm(type="number" value="300" step="50" min="50")
      a.faster.entypo-fast-forward#spritz_faster(href="#" title="Speed Up")
    a.save.entypo-save#spritz_save(href="#" title="Save")
    span.interaction
      a.back.entypo-left-open#spritz_back(href="#" title="Jog Back")
      a.pause.entypo-pause#spritz_pause(href="#" title="Pause/Play")
      a.forward.entypo-right-open#spritz_forward(href="#" title="Jog Forward")
      
  .controls.extra-controls
    .togglable.closed
      .zoom
        a.smaller.entypo-minus#spritz_smaller(href="#" title="Smaller")
        span.entypo-search(href="#" title="Smaller")
        a.bigger.entypo-plus#spritz_bigger(href="#" title="Bigger")
      .autosave
        input.checkbox#autosave_checkbox(type="checkbox")
        label.checkbox-label.entypo-cancel#spritz_autosave(for="autosave_checkbox") auto-save on pause
    a.toggle.entypo-dot-3(href="#" title="Extra Controls")
    
  .words
    .controls.words-controls
      a.select.entypo-doc-text#spritz_select(href="#" title="Select All")
      a.refresh.entypo-cycle#spritz_refresh(href="#" title="Refresh Text")
      a.expand.entypo-resize-full#spritz_expand(href="#" title="Text Area Resize")
    .progress-bar#spritz_progress
    textarea.demo-words#spritz_words.
      Spritz
      This is a jQuery implementation of Spritz technology.
      Reading is inherently  time consuming because your eyes have to move from word to word and line to line. Traditional reading also consumes huge amounts of physical space on a page or screen, which limits reading effectiveness on small displays. Scrolling, pinching, and resizing a reading area doesn’t fix the problem and only frustrates people. Now, with compact text streaming from Spritz, content can be streamed one word at a time, without forcing your eyes to spend time moving around the page. Spritz makes streaming your content easy and more comfortable, especially on small displays. Our “Redicle” technology enhances readability even more by using horizontal lines and hash marks to direct your eyes to the red letter in each word, so you can focus on the content that interests you. Best of all, Spritz’s patent-pending technology can integrate into photos, maps, videos, and websites to promote more effective communication.
    div.bookmarklet-container
      a.bookmarklet#bm(href="").
        Spritz It!

    div.bmcode-container
      textarea.bmcode#bmc(readonly).

a.light(href="#" title="Change Theme")

.alert#alert
              
            
!

CSS

              
                @import compass

$f-icon: 'Spritz', sans-serif
  
$c-light-bg: #ddd
$c-light-field-bg: #eee
$c-light-markers: #000
$c-light-spritz: #000
$c-light-text: #000
$c-light-icon: #aaa
$c-light-icon-hover: #777

$c-dark-bg: #000
$c-dark-field-bg: #191919
$c-dark-markers: #555
$c-dark-spritz: #bbb
$c-dark-text: #888
$c-dark-icon: #444
$c-dark-icon-hover: #999

.spritz
  position: relative
  max-width: 30rem
  padding: 1rem 0 1.2rem 
  border-top: 2px solid $c-light-markers
  border-bottom: 2px solid $c-light-markers
  margin: 10rem auto
  font-size: 1em
  &:before, &:after
    content: ''
    position: absolute
    left: 40%
    height: 0.8rem
    width: 2px
    margin-left: -1px
    background-color: $c-light-markers
  .night &
    border-color: $c-dark-markers
    &:before, &:after
      background-color: $c-dark-markers
  &:before
    top: 0
  &:after
    bottom: 0
.spritz-word
  font-size: 1.6em
  line-height: 1.6em
  height: 1.7em
  font-weight: 600
  color: $c-light-spritz
  .night &
    color: $c-dark-spritz
  div
    display: table-cell
    &:first-child
      width: 40%
      text-align: right
    &:nth-child(2)
      color: darken(red,5)
      .night &
        color: lighten(red,15)
    &:last-child
      width: 60%
      text-align: left
        
.controls
  text-align: center
  &:after
    content: ''
    display: table
    clear: both
  a
    display: inline-block
    vertical-align: bottom
    color: $c-light-icon
    text-decoration: none
    transition: color 150ms linear
    &:hover, &.active
      color: $c-light-icon-hover
    .night &
      color: $c-dark-icon
      &:hover, &.active
        color: $c-dark-icon-hover
        
.settings
  input, textarea, button
    box-sizing: border-box
    border: 0
    color: $c-light-text
    background: transparent
    .night &
      color: $c-dark-text
    &:focus
      outline: none
.settings-controls
  max-width: 30rem
  margin: 0 auto
  .speed
    float: left
  .interaction
    float: right
  a
    font-size: 3rem
    line-height: 4rem
  .save
    transition: opacity 0.2s linear
    opacity: 0
    font-size: 2.5rem
    .paused &
      opacity: 1
    .autosave &
      opacity: 0
    &.active
      opacity: 0.4!important
  .pause
    margin: 0
    width: 4rem
    text-align: center
    font-size: 4rem
    .paused &:before
      content: '\e601'
      position: relative
      margin-left: -0.4rem
.wpm
  position: relative
  display: inline-block
  width: 7rem
  margin: 0
  padding: 0
  text-align: center
  font-weight: 600
  font-size: 2rem
  line-height: 4rem
  vertical-align: top
  &::-webkit-inner-spin-button
    -webkit-appearance: none
      
.extra-controls
  margin: 5rem auto 0
  .toggle
    font-size: 2rem
    padding: 1rem 2rem
  .togglable
    display: none
  .zoom
    font-size: 2rem
    *
      display: inline-block
      padding: 0.6rem
  .autosave
    .checkbox
      display: none
      &:checked + .checkbox-label:before
        content: '\e60a'
    .checkbox-label
      user-select: none
      cursor: pointer
      &:before
        position: relative
        display: inline-block
        margin-right: 1rem
        width: 1.4rem
        vertical-align: top
        overflow: visible
        font-size: 1.8rem
        
.words
  max-width: 30rem
  margin: 0 auto
  position: relative
  transition: max-width 0.2s linear
  .fullscreen &
    max-width: 60rem
    .demo-words
      height: 30rem
  .demo-words
    width: 100%
    height: 8em
    transition: height 0.2s linear
    padding: 1rem 1.5rem
    background-color: $c-light-field-bg
    &::-webkit-scrollbar
      width: 0.8rem
    &::-webkit-scrollbar-thumb
      background: darken($c-light-field-bg, 10)
    .night &
      background-color: $c-dark-field-bg
      &::-webkit-scrollbar-thumb
        background: lighten($c-dark-field-bg, 8)
      &::-webkit-resizer
        background: darken($c-dark-field-bg, 2)
.progress-bar
  height: 2px
  width: 0
  background: red
  opacity: 0.4
          
.words-controls
  margin: 0 0 2rem
  a
    margin: 0 0.6rem
    font-size: 2rem
    line-height: 2rem
  .refresh
    font-size: 2.6rem
  .fullscreen & .expand:before
    content: '\e612'
        
.light
  position: absolute
  top: 2rem
  left: 3rem
  font-size: 3rem
  font-family: $f-icon
  text-decoration: none
  &:after
    content: '\e609'
    color: $c-light-icon
  .night &:after
    content: '\e608'
    color: $c-dark-icon
    
#alert
  position: absolute
  top: 0
  padding: 2rem
  box-sizing: border-box
  width: 100%
  text-align: center
  left: 0
  pointer-events: none

.bookmarklet-container
  text-align: center
  margin-top: 2rem
  margin-bottom: 3rem

.bookmarklet
  cursor: move
  pointer-events: auto
  font-size: 1rem
  height: 1rem
  padding: 1rem
  margin-top: 2rem
  text-decoration: none
  -webkit-border-radius: 4px
  -moz-border-radius: 4px
  border-radius: 4px  
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2)
  background: $c-light-field-bg
  color: $c-light-text
  .night &
    background: $c-dark-field-bg
    color: $c-dark-text
    
.bmcode-container
  text-align: center
  .bmcode
    width: 100%
    height: 8em
    border: 1px solid #cccccc
    margin: 0
    padding: 0
    resize: none
    overflow: hidden

html
  font-size: 10px
body
  background: $c-light-bg
  color: $c-light-text
  transition: background 0.1s linear
  margin: 3rem
  .night &
    background: $c-dark-bg
    color: $c-dark-text
body, input, textarea, button
  font-size: 1.4rem
  font-family: Open Sans, sans-serif
::selection
  background: $c-light-icon
  color: $c-light-field-bg
  .night &
    background: $c-dark-icon
    color: $c-dark-field-bg

@font-face
  font-family: 'Spritz'
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.eot?ziiuop')
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.eot?#iefixziiuop') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.woff?ziiuop') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.ttf?ziiuop') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/spritz.svg?ziiuop#spritz') format('svg')
  font-weight: normal
  font-style: normal
  
[class*="entypo-"]:before
  font-family: $f-icon
.entypo-fast-backward:before
  content: '\e606'
.entypo-fast-forward:before
  content: '\e605'
.entypo-save:before
  content: '\e600'
.entypo-left-open:before
  content: '\e60e'
.entypo-pause:before
  content: '\e602'
.entypo-right-open:before
  content: '\e607'
.entypo-dot-3:before
  content: '\e60b'
.entypo-minus:before
  content: '\e60d'
.entypo-search:before
  content: '\e604'
.entypo-plus:before
  content: '\e60c'
.entypo-cancel:before
  content: '\e603'
.entypo-doc-text:before
  content: '\e60f'
.entypo-cycle:before
  content: '\e610'
.entypo-resize-full:before
  content: '\e611'
  

              
            
!

JS

              
                /*

Spritz Speed Reader by Charlotte Dann
Local storage implementation by Keith Wyland

---

Spritz Speed Reading V2 - Bookmarklet Edition by Oleg P

Mixed and matched from a fork of https://codepen.io/pouretrebelle/full/reGKw and readability text extraction js from https://github.com/Miserlou/OpenSpritz.

Use the bookmarklet code from the pen JS to speed-read any web page (tested in Chrome and mobile Safari) with the following API:

https://codepen.io/the-happy-hippo/full/aDHrl?url=<web_page_url>

*/

/* Persistent URL used by bookmarklet code (cannot use 'location' here). */
var this_page_permalink = 'https://codepen.io/the-happy-hippo/full/aDHrl';

var $wpm = $('#spritz_wpm');
var interval = 60000/$wpm.val();  
var paused = false;
var $space = $('#spritz_word');
var i = 0;
var night = false;
var zoom = 1;
var autosave = false;
var $words = $('#spritz_words');
var local_spritz = {};

function words_load() {
  if (!localStorage.jqspritz) {
    words_set();
    word_show(0);
    word_update();
    spritz_pause(true);
  } else {
    local_spritz = JSON.parse(localStorage['jqspritz']);
    $words.val(local_spritz.words);
    i = local_spritz.word;
    if (local_spritz.night) {
      night = true
      $('html').addClass('night');
    };
    if (local_spritz.autosave) {
      autosave = true;
      $('html').addClass('autosave');
      $('#autosave_checkbox').prop('checked', true);
    };
    $wpm.val(local_spritz.wpm); 
    interval = 60000/local_spritz.wpm;
    spritz_zoom(0);
    words_set();
    word_show(i);
    word_update();
    spritz_pause(true);
    spritz_alert('loaded');
  }  
}
function words_save() {
  local_spritz = {
    word: i,
    words: $words.val(),
    wpm: $wpm.val(),
    night: night,
    autosave: autosave,
    zoom: zoom
  };
  localStorage['jqspritz'] = JSON.stringify(local_spritz);
  if (!autosave) {
    spritz_alert('saved');
  } else {
    button_flash('save', 500);
  }
}


/* TEXT PARSING */
function words_set() {
  words = $words.val().trim()
  .replace(/([\u2010-\u2014])(\S)/g, '$1 $2')    // detach some dashes.
  .replace(/([\.\?\!\;\:\)])/g, '$1 • ') // stumble on punctuation.
  .split(/\s+/); // shrink long whitespaces and split.
  
  //for (var j = 1; j < words.length; j++) {
  //  words[j] = words[j].replace(/{linebreak}/g, '   ');
  //}
}
/* ON EACH WORD */
function word_show(i) {
  $('#spritz_progress').width(100*i/words.length+'%');
  var word = words[i];
  var stop = Math.round((word.length+1)*0.4)-1;
  if (word != '•') {
    $space.html('<div>'+word.slice(0,stop)+'</div><div>'+word[stop]+'</div><div>'+word.slice(stop+1)+'</div>');
  }
}
function word_next() {
  i++;
  word_show(i);
}
function word_prev() {
  i--;
  word_show(i);
}

/* ITERATION FUNCTION */
function word_update() {
  spritz = setInterval(function() {
    word_next();
    if (i+1 == words.length) {
      setTimeout(function() {
        $space.html('');
        spritz_pause(true);
        i = 0;
        word_show(0);
      }, interval);
      clearInterval(spritz);
    };
  }, interval);
} 

/* PAUSING FUNCTIONS */
function spritz_pause(ns) {
    if (!paused) {
    clearInterval(spritz);
    paused = true;
    $('html').addClass('paused');
    if (autosave && !ns) {
      words_save();
    };
  }
}
function spritz_play() {
  word_update();
  paused = false;
  $('html').removeClass('paused');
}
function spritz_flip() {
  if (paused) {
    spritz_play();
  } else {
    spritz_pause();
  };
}

/* SPEED FUNCTIONS */
function spritz_speed() {
  interval = 60000/$('#spritz_wpm').val();
  if (!paused) {
    clearInterval(spritz);
    word_update();
  };
  $('#spritz_save').removeClass('saved loaded');
}
function spritz_faster() {
  $('#spritz_wpm').val(parseInt($('#spritz_wpm').val())+50);
  spritz_speed();
}
function spritz_slower() {
  if ($('#spritz_wpm').val() >= 100) {
    $('#spritz_wpm').val(parseInt($('#spritz_wpm').val())-50);
  }
  spritz_speed();
}

/* JOG FUNCTIONS */
function spritz_back() {
  spritz_pause();
  if (i >= 1) {
    word_prev();
  };
}
function spritz_forward() {
  spritz_pause();
  if (i < words.length) {
    word_next();
  };
}

/* WORDS FUNCTIONS */
function spritz_zoom(c) {
  zoom = zoom+c
  $('#spritz').css('font-size', zoom+'em');
}
function spritz_refresh() {
  clearInterval(spritz);
  words_set(); 
  i = 0;
  spritz_pause();
  word_show(0);
};
function spritz_select() {
  $words.select();
};
function spritz_expand() {
  $('html').toggleClass('fullscreen');
}

/* AUTOSAVE FUNCTION */
function spritz_autosave() {
  $('html').toggleClass('autosave');
  autosave = !autosave;
  if (autosave) {
    $('#autosave_checkbox').prop('checked', true);
  } else {
    $('#autosave_checkbox').prop('checked', false);
  }
};

/* STATUS FUNCTION */
function spritz_status(msg) {
  return $('#alert').text(msg);
}

/* ALERT FUNCTION */
function spritz_alert(type) {
  var msg = '';
  switch (type) {
    case 'loaded':
      msg = 'Data loaded from local storage';
      break;
    case 'saved':
      msg = 'Words, Position and Settings have been saved in local storage for the next time you visit';
      break;
  }
  return spritz_status(msg).fadeIn().delay(2000).fadeOut();
}

/* ERROR FUNCTION */
function spritz_error(msg) {
  return spritz_status(msg).fadeIn().delay(5000).fadeOut();
}

/* CONTROLS */
$('#spritz_wpm').on('input', function() {
  spritz_speed();
});
$('.controls').on('click', 'a, label', function() {
  switch (this.id) {
    case 'spritz_slower':
      spritz_slower(); break;
    case 'spritz_faster':
      spritz_faster(); break;
    case 'spritz_save':
      words_save(); break;
    case 'spritz_pause':
      spritz_flip(); break;
    case 'spritz_smaller':
      spritz_zoom(-0.1); break;
    case 'spritz_bigger':
      spritz_zoom(0.1); break;
    case 'spritz_autosave':
      spritz_autosave(); break;
    case 'spritz_refresh':
      spritz_refresh(); break;
    case 'spritz_select':
      spritz_select(); break;
    case 'spritz_expand':
      spritz_expand(); break;
  };
  return false;
});
$('.controls').on('mousedown', 'a', function() {
  switch (this.id) {
    case 'spritz_back':
      spritz_jog_back = setInterval(function() {
        spritz_back();
      }, 100);
      break;
    case 'spritz_forward':
      spritz_jog_forward = setInterval(function() {
        spritz_forward();
      }, 100);
      break;
  };
});
$('.controls').on('mouseup', 'a', function() {
  switch (this.id) {
    case 'spritz_back':
      clearInterval(spritz_jog_back); break;
    case 'spritz_forward':
      clearInterval(spritz_jog_forward); break;
  };
});

/* KEY EVENTS */
function button_flash(btn, time) {
  var $btn = $('.controls a.'+btn);
  $btn.addClass('active');
  if (typeof(time) === 'undefined') time = 100;
  setTimeout(function() {
    $btn.removeClass('active');
  }, time);
}
$(document).on('keyup', function(e) {
  if (e.target.tagName.toLowerCase() != 'body') {
    return;
  };
  switch (e.keyCode) {
    case 32:
      spritz_flip(); button_flash('pause'); break;
    case 37:
      spritz_back(); button_flash('back'); break;
    case 38:
      spritz_faster(); button_flash('faster'); break;
    case 39:
      spritz_forward(); button_flash('forward'); break;
    case 40:
      spritz_slower(); button_flash('slower'); break;
  };
});
$(document).on('keydown', function(e) {
  if (e.target.tagName.toLowerCase() != 'body') {
    return;
  };
  switch (e.keyCode) {
    case 37:
      spritz_back(); button_flash('back'); break;
    case 39:
      spritz_forward(); button_flash('forward'); break;
  };
});

/* LIGHT/DARK THEME */
$('.light').on('click', function() {
  $('html').toggleClass('night');
  night = !night;
  return false;
});

$('a.toggle').on('click', function() {
  $(this).siblings('.togglable').slideToggle();
  return false;
});

function get_url_param(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// Please don't abuse this.
var readability_token = '29d6e9893943faca8e084f5085c327a6860ed771';

// Uses the Readability API to get the juicy content of the current page.
function spritzify_url(url) {
  //var url = 'http://www.spritzinc.com/the-science/';
  var rd_url = 'https://www.readability.com/api/content/v1/parser?url='+ url +'&token=' + readability_token + '&callback=?';
  console.log(rd_url);
  $.getJSON(rd_url,
    function (data) {
      if(data.error) {
        spritz_error('Article extraction failed. Try selecting text instead.');
        return;
      }

      var title = '';
      if(data.title !== ''){
        title = data.title + ' ';
      }

      var author = '';
      if(data.author !== null){
        author = "By " + data.author + '. ';
      }

      var body = jQuery(data.content).text(); // Textify HTML content.
      body = $.trim(body); // Trip trailing and leading whitespace.
      body = body.replace(/\s+/g, ' '); // Shrink long whitespaces.

      var text_content = title + author + body;
      text_content = text_content.replace(/\./g, '. '); // Make sure punctuation is apprpriately spaced.
      text_content = text_content.replace(/\?/g, '? ');
      text_content = text_content.replace(/\!/g, '! ');
      $words.val(text_content);

      words_set();
      word_show(0);
      spritz_pause(true);

    }).error(function() {
      spritz_error('Article extraction failed. Try selecting text instead.'); });
}

function create_bookmarklet() {
  var code = 'javascript:' + encodeURIComponent(
    'function iptxt(){var d=document;try{if(!d.body)throw(0);window.location' +
    '="' + this_page_permalink +
    '?url="+encodeURIComponent(d.location.href);' + 
    '}catch(e){alert("Please wait until the page has loaded.");}}iptxt();void(0)');
  $('#bm').attr('href', code);
  $('#bm').click(function(){return false;});
  $('#bmc').val(code);
  $('#bmc').click(function(){this.focus();this.select();});
}

/* INITIATE */
$(document).ready(function() {
  create_bookmarklet();

  custom_url = get_url_param('url');

  if(custom_url) {
    spritzify_url(custom_url);
  } else {
    words_load();
  }
});

window.addEventListener("pageshow", function(evt){
  console.log('pageshow');
  spritz_pause(true);
}, false);
window.addEventListener("pagehide", function(evt){
  console.log('pagehide');
  spritz_pause(true);
}, false);

              
            
!
999px

Console