erbook 9.0.0 → 9.1.0

data/fmt/xhtml.yaml

@@ -22,14 +22,14 @@ code: |
 
     ##
     # Transforms this string into a valid URI fragment.
-    # See http://www.nmt.edu/tcc/help/pubs/xhtml/id-type.html
+    # See http://www.w3.org/TR/REC-html40/types.html#type-name
     #
     def to_uri_fragment
       # remove XML tags from the input
       buf = gsub(/<.*?>/, '')
 
-      # The first or only character must be a letter.
-      buf.insert(0, 'a') unless buf[0,1] =~ /[[:alpha:]]/
+      # The first or only character must be a letter or an underscore (_).
+      buf.insert(0, 'a') unless buf[0,1] =~ /[[:alpha:]_]/
 
       # The remaining characters must be letters, digits, hyphens (-),
       # underscores (_), colons (:), or periods (.) or Unicode characters
@@ -350,15 +350,15 @@ code: |
           children.select {|c| c.index_toc? }
         end
 
-        HERE_TEXT = ERBook::PHRASES['Focus this segment']
-        PREV_TEXT = ERBook::PHRASES['Focus previous segment']
-        NEXT_TEXT = ERBook::PHRASES['Focus next segment']
-        LIST_TEXT = ERBook::PHRASES['Return to listing']
+        HERE_TEXT = ERBook::PHRASES['Here']
+        PREV_TEXT = ERBook::PHRASES['Previous']
+        NEXT_TEXT = ERBook::PHRASES['Next']
+        LIST_TEXT = ERBook::PHRASES['Contents']
 
-        HERE_SIGN = ICON_BY_NAME['nav_here'].to_xhtml(:alt => HERE_TEXT)
-        PREV_SIGN = ICON_BY_NAME['nav_prev'].to_xhtml(:alt => PREV_TEXT)
-        NEXT_SIGN = ICON_BY_NAME['nav_next'].to_xhtml(:alt => NEXT_TEXT)
-        LIST_SIGN = ICON_BY_NAME['nav_list'].to_xhtml(:alt => LIST_TEXT)
+        HERE_SIGN = ICON_BY_NAME['nav_here'].to_xhtml(:alt => "[#{HERE_TEXT}]")
+        PREV_SIGN = ICON_BY_NAME['nav_prev'].to_xhtml(:alt => "[#{PREV_TEXT}]")
+        NEXT_SIGN = ICON_BY_NAME['nav_next'].to_xhtml(:alt => "[#{NEXT_TEXT}]")
+        LIST_SIGN = ICON_BY_NAME['nav_list'].to_xhtml(:alt => "[#{LIST_TEXT}]")
 
         ##
         # Calculates a local navigation menu containing links
@@ -428,7 +428,7 @@ code: |
         # of contents / list of figures that points this node.
         #
         def list_frag #:nodoc:
-          @list_frag ||= "__toc__#{here_frag}".to_uri_fragment
+          @list_frag ||= "_contents:#{here_frag}".to_uri_fragment
         end
     end
   end
@@ -526,6 +526,7 @@ nodes:
 
     paragraph:
       <<: *latex
+      index:  false
       number: false
       output: |
         <%= @node.parent_tabs_begin %>
@@ -777,20 +778,12 @@ output: |
         }.strip
       %>
 
-      <div id="__loading__">
-        <%= ERBook::PHRASES['Loading...'] %> <noscript><%=
-          "<ins>%s</ins> <p>%s</p> %s" % [
-            ERBook::PHRASES['Failed!'],
-            ERBook::PHRASES['Please enable JavaScript in your Web browser.'],
-            text_only_browser_divider
-          ]
-        %></noscript>
-      </div>
+      <div id="_loading"></div>
 
-      <div id="__body__">
+      <div id="_body">
         %= node.output if node = @nodes_by_type['header_outside_above'].first
 
-        <div id="__header__">
+        <div id="_header">
           %= node.output if node = @nodes_by_type['header_inside_above'].first
 
           % if header = @nodes_by_type['header'].first
@@ -831,31 +824,31 @@ output: |
         <div class="tabs">
           <ul>
             % if abstract
-              <li><a href="#__abstract__"><%= ERBook::PHRASES['Abstract'] %></a></li>
+              <li><a href="#_abstract"><%= ERBook::PHRASES['Abstract'] %></a></li>
 
-            <li><a href="#__doc__"><%= ERBook::PHRASES['Document'] %></a></li>
+            <li><a href="#_document"><%= ERBook::PHRASES['Document'] %></a></li>
 
             % unless toc.empty?
-              <li><a href="#__toc__"><%= ERBook::PHRASES['Contents'] %></a></li>
+              <li><a href="#_contents"><%= ERBook::PHRASES['Contents'] %></a></li>
 
             % if references
-              <li><a href="#__bib__"><%= ERBook::PHRASES['References'] %></a></li>
+              <li><a href="#_references"><%= ERBook::PHRASES['References'] %></a></li>
 
-            <li><a href="#__nfo__"><%= ERBook::PHRASES['About'] %></a></li>
+            <li><a href="#_about"><%= ERBook::PHRASES['About'] %></a></li>
           </ul>
 
           %= abstract.output if abstract
 
           % unless toc.empty?
-            <div id="__toc__">
+            <div id="_contents">
               <h1 class="title"><%= ERBook::PHRASES['Contents'] %></h1>
               <ul><%= toc %></ul>
 
               % unless lof.empty?
-                <div id="__lof__"><%= lof %></div>
+                <div id="_floats"><%= lof %></div>
             </div>
 
-          <div id="__doc__" class="tabs">
+          <div id="_document" class="tabs">
             <h1 style="display: none"><%= ERBook::PHRASES['Document'] %></h1>
             <ul>
               % @roots.select {|n| n.index_toc? }.each do |n|
@@ -866,7 +859,7 @@ output: |
           </div>
 
           % if references
-            <div id="__bib__">
+            <div id="_references">
               <h1 class="title"><%= ERBook::PHRASES['References'] %></h1>
               <ol>
               % references.each do |n|
@@ -876,7 +869,7 @@ output: |
 
           %= text_only_browser_divider
 
-          <div id="__nfo__">
+          <div id="_about">
             <p><%=
               ERBook::PHRASES[
                 'This document was generated by %s on %s using the following resources.',
@@ -941,7 +934,7 @@ output: |
 
         %= node.output if node = @nodes_by_type['footer_outside_above'].first
 
-        <div id="__footer__">
+        <div id="_footer">
           %= node.output if node = @nodes_by_type['footer_inside_above'].first
 
           % if footer = @nodes_by_type['footer'].first
@@ -958,26 +951,33 @@ output: |
 
 javascript: |
   $(function() {
-    /*
-    %< File.join(ERBook::INSTALL, 'LICENSE')
-    */
+    /*<%= File.read File.join(ERBook::INSTALL, 'LICENSE') %>*/
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // utility logic
+    //--------------------------------------------------------------------------
 
     //
-    // respond to changes in window location
+    // Returns the tab corresponding to the
+    // given panel in the given tabs widget.
     //
-    var $last_hash = null;
-
-    function on_hash_change() {
-      var curr_hash = window.location.hash;
-
-      if (curr_hash && curr_hash != $last_hash) {
-        $last_hash = curr_hash;
-        reveal_hash(curr_hash);
+    function tab_by_panel(panel, tabs_widget) {
+      if (!tabs_widget) {
+        tabs_widget = panel.parent('.ui-tabs');
       }
 
-      setTimeout(on_hash_change, 300);
+      return tabs_widget.find(
+        '.ui-tabs-nav > li > a[href=#'+ panel.attr('id') +']'
+      ).parent('li');
     }
 
+    //--------------------------------------------------------------------------
+    // document location
+    //--------------------------------------------------------------------------
+
+    var $last_hash;
+
     //
     // Sets the location bar hash to the given value.
     //
@@ -986,14 +986,12 @@ javascript: |
     //  the element corresponding to the given hash.
     //
     function set_hash(hash, prevent_jump) {
-      if ($last_hash == hash) {
+      if (hash === $last_hash) {
         return;
       }
 
-      var set_the_hash = function() {
-        //
+      function set_the_hash() {
         // XXX: bypass on_hash_change() by setting $last_hash
-        //
         window.location.hash = $last_hash = hash;
       }
 
@@ -1026,7 +1024,7 @@ javascript: |
           //   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
           //   THE SOFTWARE.
           //
-          // This plugin is documented at:
+          // The jQuery.LocalScroll plugin is documented at:
           //
           //   http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
           //
@@ -1034,12 +1032,11 @@ javascript: |
           //
           //   http://flesler-plugins.googlecode.com/svn/trunk/jquery.localScroll/jquery.localScroll.js
           //
+
           var target_id = target.attr('id');
 
-          //
           // temporarily place a dummy element at the current
           // screen position and give it the ID of the target
-          //
           var original_screen_position = $(window).scrollTop();
 
           var dummy = $('<span/>').attr('id', target_id).css({
@@ -1049,23 +1046,17 @@ javascript: |
 
           target.removeAttr('id').before(dummy);
 
-          //
           // when we set the hash, the browser will jump to the
           // dummy, which is where the browser screen currently
           // is, and therefore the jump will not be visualized!
-          //
           set_the_hash();
 
-          //
           // undo the temporary changes
-          //
           dummy.remove();
           target.attr('id', target_id);
 
-          //
           // the above approach does not work for Opera and IE.
           // they ignore the dummy and jump to the actual target
-          //
           $(window).scrollTop(original_screen_position);
 
           return;
@@ -1075,35 +1066,19 @@ javascript: |
       set_the_hash();
     }
 
-    //
-    // Returns the tab corresponding to the
-    // given panel in the given tabs widget.
-    //
-    function tab_by_panel(panel, tabs_widget) {
-      if (!tabs_widget) {
-        tabs_widget = panel.parent('.ui-tabs');
-      }
-
-      return tabs_widget.find(
-        '.ui-tabs-nav > li > a[href=#'+ panel.attr('id') +']'
-      ).parent('li');
-    }
-
     //
     // Reveals the element at the given hash by (1) activating all
     // tabs that contain it, (2) smoothly scrolling to it, and (3)
     // updating the hash in the browser's location bar accordingly.
     //
-    function reveal_hash(hash) {
-      var target = $(hash);
+    function reveal(hash_or_elem, callback) {
+      var target = $(hash_or_elem);
 
       if (target.length) {
         var target_is_panel = target.is('div') &&
           target.parent('.ui-tabs').length;
 
-        //
         // reveal all tabs which contain the target
-        //
         if (target.is(':hidden')) {
           var panels = target.parents('.ui-tabs > div:hidden').get().reverse();
 
@@ -1111,28 +1086,30 @@ javascript: |
             panels.push(target);
           }
 
-          for (var i in panels) {
-            var panel = $(panels[i]);
+          $(panels).each(function() {
+            var panel = $(this);
             var tabs_widget = panel.parent('.ui-tabs');
             var selected_index = tabs_widget.tabs('option', 'selected');
 
-            //
             // map the panel to its tab because tabs do not
             // have to be in the same order as their panels
-            //
             var tab = tab_by_panel(panel, tabs_widget);
             var wanted_index = tab.prevAll('li').length;
 
-            if (wanted_index != selected_index) {
+            if (wanted_index !== selected_index) {
               tabs_widget.tabs('select', wanted_index);
             }
-          }
+          });
+        }
+
+        // scroll to nearest visible element if the target
+        // is naturally hidden (e.g. because of a CSS rule)
+        if (target.is(':hidden')) {
+          target = target.closest(':not(:hidden)');
         }
 
-        //
         // scroll to the tab bar instead of the target
         // because it contains the title for the target
-        //
         var scroll_target = target;
 
         if (target_is_panel) {
@@ -1143,73 +1120,251 @@ javascript: |
           }
         }
 
-        var scroll_offset = scroll_target.offset().top;
+        var scroll_offset = Math.floor(scroll_target.offset().top);
 
-        //
         // set body height so that any element can be
         // brought to the top of the screen via scrolling
-        //
         var document_height = $(document).height();
         var window_height   = $(window).height();
         if (document_height - scroll_offset <= window_height) {
           $('body').css('min-height', document_height + window_height);
         }
 
+        var pending = true;
         $('html, body').animate(
           { scrollTop: scroll_offset }, 'slow', 'swing', function() {
-            set_hash(hash, target_is_panel);
+            // prevent the body of this function from being
+            // executed twice -- because there are 2 target
+            // elements in the animation list and only one
+            // of them actually works in different browsers!
+            if (pending && scroll_offset === $(window).scrollTop()) {
+              pending = false;
+
+              var target_id = target.attr('id');
+              set_hash('#' + (target_id || '_reveal' + Math.random()),
+                target_is_panel || !target_id);
+
+              if (callback && typeof(callback) === 'function') {
+                callback();
+              }
+            }
           }
         );
       }
     }
 
-    //
-    // create jQuery UI tabs
-    //
-    $('.tabs').tabs();
+    //--------------------------------------------------------------------------
+    // search engine
+    //--------------------------------------------------------------------------
+
+    // Adapted from the source code of the ":contains" selector from
+    // the "Search on this Page" plugin by Waldek Mastykarz
+    // <http://blog.mastykarz.nl>, which was (1) published online on
+    // 17 November 2008 at <http://www.endusersharepoint.com/?p=951>
+    // and <http://blog.mastykarz.nl/search-page-jquery/>, and was
+    // (2) updated to work with jQuery 1.3 by "anonymous" here:
+    // <http://stackoverflow.com/questions/187537>.
+    jQuery.expr[':'].matches = function(a, i, m) {
+      // compile the regexp during the first call to this
+      // function only, so that subsequent calls are fast
+      if (typeof(m[3]) === 'string') {
+        m[3] = new RegExp(m[3], 'i');
+      }
+      return jQuery(a).text().match(m[3]);
+    };
+
+    $('.tabs:first > ul').append(
+      $('<li/>').append(
+        $('<a/>').attr('href', '#_search').
+        text(<%= ERBook::PHRASES['Search'].inspect %>)
+      )
+    ).after(
+      $('<div/>').attr('id', '_search').append(
+        $('<form/>').append(
+          $('<input/>').attr('type', 'text').attr('name', 'q')
+        ).append(
+          $('<input/>').attr('type', 'submit').
+          val(<%= ERBook::PHRASES['Search'].inspect %>).
+          css({'margin-left': '0.125em', 'margin-right': '1em'})
+        ).append(
+          $('<a/>').attr('href',
+            'https://developer.mozilla.org/En/Core_JavaScript_1.5_Guide:Regular_Expressions#Using_Special_Characters'
+          ).text(<%= ERBook::PHRASES['Help'].inspect %>)
+        ).append(
+          $('<p/>').addClass('status')
+        ).submit(function(event) {
+          event.preventDefault();
+
+          var form = $(this);
+          var query = form.find(':text').val().replace(/^\s+|\s+$/g, '');
+          var status = form.find('.status');
+          var results = form.next();
+
+          if (/\S/.test(query)) {
+            results.text(''); // clear previous results
+            status.text(<%= ERBook::PHRASES['Searching...'].inspect %>);
+
+            // timeout allows the status.text() to appear
+            setTimeout(function() {
+              var num_results = 0;
+
+              function emit_result(match) {
+                // exclude matches from previous search results,
+                // the table of contents, and jQuery UI tab bars
+                if (match.closest('#_search, #_contents, .ui-tabs-nav').length) {
+                  return;
+                }
+
+                var excerpt;
+
+                // resolve tab panels into their section title
+                // because additional matches, which lie within
+                // the content of these tab panels, will come
+                if (match.is('.ui-tabs-panel')) {
+                  excerpt = match.find('.title:first').clone().show();
+                }
+                else {
+                  excerpt = match.clone();
+                }
+
+                // highlight the query inside the match excerpt
+                excerpt.html(excerpt.html().replace(
+                  new RegExp('(<[^>]*)?(' + query + ')', 'ig'),
+                  function($0, $1, $2) {
+                    // only highlight if not inside an XML tag literal
+                    return $1 ? $0 :
+                      '<span class="ui-state-error">' + $2 + '</span>';
+                  }
+                ));
+
+                num_results += 1;
+                var result = $('<li/>').addClass('result').append(
+                  $('<blockquote/>').addClass('excerpt').append(excerpt)
+                ).attr('id', '_search' + num_results).click(
+                  function(event) {
+                    event.stopPropagation();
+
+                    // save this search result's hash in browser history
+                    // before revealing the matching element so that
+                    // the user can press the back button to return to
+                    // this exact spot in the search results listing
+                    reveal(this, function() {
+                      if (!$(event.target).is('a')) {
+                        reveal(match);
+                      }
+                    });
+                  }
+                );
+
+                // show bread-crumb trail for the match
+                var first = true;
+                match.parents('.ui-tabs-panel').each(function() {
+                  var panel = $(this);
+                  var tab = tab_by_panel(panel);
+
+                  if (tab.length) {
+                    if (!first) {
+                      result.prepend(' &rang; ');
+                    }
+                    first = false;
+
+                    result.prepend(tab.find('a').clone());
+                  }
+                });
 
-    //
-    // make internal hyperlinks reveal their targets when clicked
-    //
-    $('a[href^=#]').click(function() {
-      var link = $(this);
-      var hash = link.attr('href');
+                results.append(result);
+
+                // unhide any hidden elements in the search result
+                result.find(':hidden').removeClass('ui-tabs-hide').show();
+
+                // remove tab bars (used for titles) and mini navigation menus
+                result.find('.ui-tabs-nav, .ui-tabs-panel > .nav').remove();
+              };
+
+              var matching_elems = $('#_body').
+                find(':matches("'+ query.replace(/"/, '\\"') +'")');
+
+              var prev_match;
+              var prev_elem;
+
+              function process_match(i, n) {
+                status.text(status.text().
+                  replace(/( \d+%)?$/, ' ' + Math.round(i / n * 100) + '%'));
+
+                var elem = matching_elems.eq(i);
+
+                // ascend to a larger container for more context
+                var match = elem.closest('pre,ul,ol,dl,table,p,div');
+                if (!match.length) {
+                  match = elem;
+                }
+
+                if (
+                  prev_match && prev_match.length &&
+                  match.get(0) !== prev_match.get(0) && // unique matches only
+                  elem.parent().get(0) !== prev_elem.get(0) // leaf nodes only
+                ) {
+                  emit_result(prev_match);
+                }
+
+                prev_elem = elem;
+                prev_match = match;
+
+                if (i < n) {
+                  setTimeout(function() {
+                    process_match(i + 1, n);
+                  }, 0);
+                }
+                else {
+                  // handle the last item in this two-stage prev/curr loop
+                  if (prev_match && prev_match.length) {
+                    emit_result(prev_match);
+                  }
+
+                  if (num_results > 0) {
+                    status.text(<%= ERBook::PHRASES['%d matches', 0].inspect %>.replace('0', num_results));
+                  }
+                  else {
+                    status.html(<%= ERBook::PHRASES['Not found'].inspect %>);
+                  }
+                }
+              }
 
-      if (link.parent('li').parent('.ui-tabs-nav').length) {
-        // tab clicks should not cause the screen to scroll
-        set_hash(hash, true);
-      }
-      else {
-        reveal_hash(hash);
-      }
+              process_match(0, matching_elems.length);
 
-      return false;
-    });
+            }, 0);
+          }
 
-    //
-    // checkbox for printer friendly stylesheet
-    //
-    $('#__header__ > .authors_and_date').append(
+          return false;
+        })
+      ).append(
+        $('<ol/>').addClass('results')
+      )
+    );
+
+    //--------------------------------------------------------------------------
+    // create print preview toggle
+    //--------------------------------------------------------------------------
+
+    $('#_header > .authors_and_date').append(
       $('<span/>').addClass('printer_friendly_toggle').append(
-        $('<input/>').attr('type', 'checkbox').click(function() {
+        $('<input/>').attr('type', 'checkbox').
+        attr('id', 'printer_friendly_toggle').click(function() {
           var checkbox = $(this);
 
           function change_media(src, dst) {
             var styles = $('style[media="'+ src +'"]');
             if (styles.length) {
-              //
               // try changing the media in-place
-              //
               var before = checkbox.offset();
               styles.attr('media', dst);
               var after = checkbox.offset();
 
-              if (after.top == before.top && after.left == before.left) {
-                //
+              // but if that did not work
+              if (after.top === before.top && after.left === before.left) {
                 // try reinserting the <style> into document.
                 // this works in Webkit browsers, which ignore
                 // the in-place changing approach tried above.
-                //
                 styles.each(function() {
                   var style = $(this);
                   var parent = style.parent();
@@ -1232,12 +1387,16 @@ javascript: |
 
           return true;
         })
-      ).append(" <%= ERBook::PHRASES['Printer friendly'] %>")
+      ).append(
+        $('<label/>').attr('for', 'printer_friendly_toggle').
+        text(<%= ERBook::PHRASES['Printer friendly'].inspect %>)
+      )
     );
 
-    //
-    // activate embedded data URIs
-    //
+    //--------------------------------------------------------------------------
+    // activate base64 data URIs
+    //--------------------------------------------------------------------------
+
     var data_uri_by_embed_uri = <%=
       result = {}
       ICONS.each do |icon|
@@ -1250,10 +1409,10 @@ javascript: |
 
     $('img[src]').each(function() {
       var image = $(this);
-      var data_uri = data_uri_by_embed_uri[image.attr('src')];
+      var embed_uri = image.attr('src');
 
-      if (data_uri) {
-        image.attr('src', data_uri);
+      if (data_uri_by_embed_uri.hasOwnProperty(embed_uri)) {
+        image.attr('src', data_uri_by_embed_uri[embed_uri]);
       }
     });
 
@@ -1263,23 +1422,65 @@ javascript: |
 
       if (css) {
         for (var embed_uri in data_uri_by_embed_uri) {
-          var src = new RegExp('\\burl\\(' + embed_uri + '\\)', 'g');
-          var dst = 'url("' + data_uri_by_embed_uri[embed_uri] + '")';
+          if (data_uri_by_embed_uri.hasOwnProperty(embed_uri)) {
+            var src = new RegExp('\\burl\\(' + embed_uri + '\\)', 'g');
+            var dst = 'url("' + data_uri_by_embed_uri[embed_uri] + '")';
 
-          css = css.replace(src, dst);
+            css = css.replace(src, dst);
+          }
         }
 
         style.text(css);
       }
     });
 
-    //
-    // ready for action!
-    //
-    $('#__loading__').append("<%= ERBook::PHRASES['Ready!'] %>").
+    //--------------------------------------------------------------------------
+    // create jQuery UI tabs
+    //--------------------------------------------------------------------------
+
+    $('.tabs').tabs();
+
+    // make internal hyperlinks reveal their targets (which may be
+    // nested within many levels of jQuery UI tabs) when clicked
+    $('a[href^=#]').click(function() {
+      var link = $(this);
+      var hash = link.attr('href');
+
+      if (link.parent('li').parent('.ui-tabs-nav').length) {
+        // tab clicks should not cause the screen to scroll
+        set_hash(hash, true);
+      }
+      else {
+        reveal(hash);
+      }
+
+      return false;
+    });
+
+    // make external hyperlinks open in a separate window
+    $('a[href]').not('[href^=#]').attr('target', '_blank');
+
+    //--------------------------------------------------------------------------
+    // unveil the document
+    //--------------------------------------------------------------------------
+
+    $('#_loading').append(<%= ERBook::PHRASES['Ready!'].inspect %>).
     fadeOut('slow', function() {
-      $('#__body__').show();
-      on_hash_change();
+      $(this).remove();
+
+      $('#_body').show();
+
+      // respond to changes in window location
+      (function on_hash_change() {
+        var current_hash = window.location.hash;
+
+        if (current_hash && current_hash !== $last_hash) {
+          $last_hash = current_hash;
+          reveal(current_hash);
+        }
+
+        setTimeout(on_hash_change, 300);
+      })();
     });
   });
 
@@ -1349,12 +1550,12 @@ styles: # these are SASS templates
       font-family: <%= @format['fonts']['serif'] %>
 
 
-    #__lof__
+    #_floats
       h1, h2, h3, h4, h5, h6
         margin-top: 1.25em
 
 
-    #__doc__
+    #_document
       h1, h2, h3, h4, h5, h6
         margin-top: 2.5em
         line-height: 1.25em
@@ -1398,25 +1599,28 @@ styles: # these are SASS templates
       background-color: #F5F5F5
 
 
-    #__header__ > .title
+    #_header > .title
       font-size: 2.25em
 
 
     @media print
-      #__header__ .printer_friendly_toggle
+      #_header .printer_friendly_toggle
         display: none
 
 
     @media screen
-      #__header__ .printer_friendly_toggle
+      #_header .printer_friendly_toggle
         display: inline
 
+        label:hover
+          cursor: pointer
+
 
-    #__abstract__
+    #_abstract
       margin-bottom: 5em
 
 
-    #__toc__
+    #_contents
       ul > li
         list-style-type: none
 
@@ -1427,7 +1631,7 @@ styles: # these are SASS templates
         padding-left: 1em
 
 
-    #__footer__
+    #_footer
       padding-top: 1em
       text-align: center
       margin: auto
@@ -1447,6 +1651,10 @@ styles: # these are SASS templates
       margin-top: 2em
 
 
+    .paragraph > .content
+      margin: 1em
+
+
     .tip, .note, .caution, .warning, .important, .figure, .table, .example, .equation, .procedure
       margin: 3em
 
@@ -1485,7 +1693,10 @@ styles: # these are SASS templates
       background-color: #FFFFFF
 
 
-    #__body__, #__abstract__ > .title, #__toc__ > .title, .part > .title, .chapter > .title, .section > .title, .paragraph > .title, #__bib__ > .title
+    #_loading:before
+      content: <%= ERBook::PHRASES['Loading...'].inspect %>
+
+    #_body, #_abstract > .title, #_contents > .title, .part > .title, .chapter > .title, .section > .title, #_references > .title
       display: none
 
 
@@ -1560,7 +1771,7 @@ styles: # these are SASS templates
         padding-right: 13px
 
 
-    #__header__ >
+    #_header >
       .logo
         text-align: center
 
@@ -1584,7 +1795,7 @@ styles: # these are SASS templates
 
     // visually indicate the current location in
     // the hierarchy as the cursor hovers about
-    #__toc__
+    #_contents
       li ul
         border-left: thick solid #F5F5F5
 
@@ -1592,7 +1803,7 @@ styles: # these are SASS templates
           border-color: #DCDCDC
 
 
-    #__toc__ a:target, #__lof__ a:target
+    #_contents a:target, #_floats a:target
       background: <%= ICON_BY_NAME['here_frag'].data_css %>
       background-position: center right
       background-repeat: no-repeat
@@ -1619,10 +1830,23 @@ styles: # these are SASS templates
       margin-right: 9em
 
 
-    #__nfo__ > table td:first-child, #__nfo__ > .validations
+    #_about > table td:first-child, #_about > .validations
       text-align: center
 
 
+    #_search
+      > form
+        text-align: center
+
+      > .results > .result > .excerpt:hover
+        background-color: #FFFFE0
+        cursor: pointer
+
+        // show same cursor on contained elements
+        *
+          cursor: pointer
+
+
 - print: |
     body
       font-family: <%= @format['fonts']['serif'] %>
@@ -1681,36 +1905,36 @@ styles: # these are SASS templates
         font-size: smaller
 
 
-    .tabs > ul, .nav, #__lof__, #__nfo__
+    .tabs > ul, .nav, #_floats, #_about, #_search
       display: none
 
 
-    #__toc__, .part, .chapter, #__bib__
+    #_contents, .part, .chapter, #_references
       page-break-before: always
 
 
-    #__header__, #__footer__
+    #_header, #_footer
       text-align: center
 
 
-    #__header__ > .authors_and_date > .authors
+    #_header > .authors_and_date > .authors
       margin-top: 1.625em
       margin-bottom: -0.25em
 
 
-    .header_outside_above, #__header__, .header_outside_below, .logo
+    .header_outside_above, #_header, .header_outside_below, .logo
       margin-bottom: 5em
 
 
-    .footer_outside_above, #__footer__, .footer_outside_below, #__bib__, #__nfo__
+    .footer_outside_above, #_footer, .footer_outside_below, #_references, #_about
       margin-top: 5em
 
 
-    #__header__ .header_inside_above, #__footer__ .footer_inside_above
+    #_header .header_inside_above, #_footer .footer_inside_above
       margin-bottom: 4em
 
 
-    #__header__ .header_inside_below, #__footer__ .footer_inside_below
+    #_header .header_inside_below, #_footer .footer_inside_below
       margin-top: 4em