Customizing New Reader - Tizra/Tizra-Customer-Tracker GitHub Wiki

Newest Version

We have completed testing of a 2.0 version of the reader. The experience is similar to the previous version, but the default look is a little more streamlined. It also is able to send a lot less data for each page, so should be snappier.

You can enable the 2.0 reader for a design by defining a new true/false design property called useBetaReader. Any design that has that property and in which it is set to true, will use the new iteration of the reader.

New features include lightboxes for linked content, so that you can have pop-up magnified illustrations and/or videos. We were also able to use some new features of jQuery Mobile, to simplify the page layout. We expect that these new features will let us offer some more ways to tailor the reader for customers who wish to do so.

CSS customizations have changed a bit (and small changes may continue as we trim excess, and test on more platforms).

Read about it at Reader-2.0.

Adjusting properties

This is preliminary, but the notes can help you get started tailoring the new reader. You define each of the properties as Text, String, or HTML as you prefer, depending on how you want to edit.

To change the definition of a design property that already exists, you click on the adjust link next to it. File type properties and other properties can't be converted into each other, because they are too different internally.

Tailoring the reader header

When you click into the document itself, you'll notice a beige navigation bar across the top. This can be customized to match the rest of your site by going to PRESENTATION > Properties, and editing the following properties...

  • readerCSS
    CSS for customizable parts of the new reader.

  • readerLogo
    Image that appears at the left end of the navigation bar

  • readerMarkup
    Content for the header area. You should be careful about rearranging things outside that block -- Tizra doesn't guarantee that the reader markup won't change, but markup that fits within the area allocated by the current styles will continue to have a similar environment.

  • readerHelp
    contents of the block exposed by the ? icon. This contents is copied between the various jMobile pages, so it is only loaded into the browser once. This may complicate the treatment of some controls and event handlers.

turning off toolbar tools you don't want:

There are CSS classes for each of the features in the toolbar:
t-zoom-visibility, t-toc-visibility, t-extract-visibility, t-help-visibility, t-toolbar-share-block.

Setting one of these to display:none; will suppress that feature.

Customizing the download list selected by the toolbar

For the download area, in order, we have:

  • downloadHeader
    element contents for the heading element at the top of the downloads region

  • excerptAttachmentHeader
    contents of the heading for the list of attachments to excerpts that contain this page

  • pdfDownloadHeader
    contents of the heading for PDFs of excerpts that overlap this page (the original PDF downloads)

  • documentAttachmentHeader
    contents of the header for the attachments to this document

When you click Save at the bottom of the Properties page, you'll see that the version of the reader in staging is immediately updated.

Tailoring advanced site content delivery properties

  • doctypeDeclaration
    should be the doctype with nothing else. String is probably a good choice...

  • contentTypeForHTML
    This lets you change the HTTP description of the content sent to the browser. I found it really useful to set this to "application/xhtml+xml; charset=UTF-8" (don't use the quotes in the value), because that forces very strict browser validation for XML well-formedness...

This option is good for testing, but not very good for production.