In addition to the idea of text-resizing, there is the somewhat controversial issue of 'what is the optimum characters per line for the best readibility?" This became a part of this effort as well, however once I added the 'full screen' toggle, I loosened up a bit on this requirement. I did retain an average CPL in the intitial modal dimensions and font size. The resources I read to come to this average are:

• blog.fawny.org/2005/09/21/measures, which states,

  "...line length, which, as everyone knows, works best at around 72 characters. (Actually, even that number is debated and contingent.)..."

• http://www.humanfactors.com/downloads/nov02.asp#bobbailey (4-5 inches)
• http://www.viget.com/advance/the-line-length-misconception/ (100 characters per line)
• http://www.maxdesign.com.au/presentation/em/ (420 pixels wide with a font size of 14-16px)

Prerequisite: Assumes the elements to be 'marked' contain text that is of a 'reading material' nature. In other words, the content makes sense as plain text content and is structured as POSH (Plain Old Semantic HTML). Any semantic headers in place are captured and displayed in the modal window. For example, in the following markup:

          <h2>Section Header</h2>
          <p class="cutout">
            This is a paragraph of real interesting content...
          </p>
        

The paragraph would be cloned and the header cloned and prepended above the paragraph in the modal window.

This works optimally for a page of "book" structured content (which is POSH markup after all).

Currently Supported

• 'Cuts out' content wrapped in any 'marked' tags, though for the best readability, it is best to 'mark' reading content is their smallest 'bites' e.g. <p> tags.
• Section headers are 'cut out' along with their immediate sibling.
• Configuration of visual features in the default version. From the configuration section of the Cut It Out! .js file:

  selectedElemColorVisited

  Similar to the "visited" anchor link state. Re-colors the text clicked on that initialized the Cut It Out modal.

  outlineColor

  Color of the dotted outline on hover of marked elements.

  bgcolor

  Color of the background on hover of marked elements (for IE only, which does not support outline on div elements).

  overlayBgColor

  Color of the overlay.

  addMarker

  Add an icon marker on each marked element in the UI (true / false).

• Elements such as inline advertisements can be marked to be excluded from cloned content blocks.

On Tap for Development

• Add a button for the parent UI for toggling the CIO icon in the UI.
• Create "Themes": default with configurable design elements, plus 'packaged' designs e.g. Christmas, Halloween, Summer, etc. Themes would simply be a different CSS file, nothing else.

Why reinvent the wheel? Thanks to the following for the free use of their snippets:

• getPageSize() and getPageScroll() from quirksmode.com
• Special thanks to all of those awesome jQuery developers out there, whose work has inspired Cut It Out! and often kept me from straying down the wrong path toward solutions to bugs :-).