CSS Direct Design (CDD)

CSS Direct Design (CDD) is an interactive toolkit built into IGP:Reader. It allows you to interactively layout and style fixed layout pages. It is particularly useful for education books.

You can use CDD for two types of document design:

Fixed Page. CDD can be use to comprehensively layout and style a fixed layout page with pre-determined dimensions. For AZARDI this includes larger than viewport scrolling page options.

Reflowable to Fixed Pages. Standard reflowable FX content that has page-breaks inserted can be styled as fixed layout pages. This allows content to be used for standard PDF, reflowable e-books and fixed layout ebook editions.

Before You Start CDD

1. Correct Tagging. Your content must all be in the section and FX tagged correctly. CDD works with *-rw tagged content. It will not work with miscellanous content styling.
2. IDs must be generated. If IDs are not generated CDD will not be able to apply styles to content blocks. If you regenerate IDs while working in CDD there is some possibility the styles will be lost.

To Use CSS Direct Design

Navigate to the page. By default the IGP:Reader presentation is the current state of the content presentation styles and can only be viewed. Clicking on any content will NOT activate CDD.

CDD Design Button. To start CDD design editing click the CDD Design button in the top right corner of the IGP:Reader frame. Reader will switch into CDD Design Mode. Now if you  click on any object it will be outline highlighted and the CDD Editor dialog will open.

The CDD Editor Dialog

The Editor is organized with tabs containing standard CSS grouped properties.

Setting Up a Fixed Layout Page

If you are using CDD to create a fixed layout ePub3 you must also configure the settings for your book design in the DPI ePub3 Fixed Layout tools options.

1. When in design mode, click the Menu tab on the right side of the screen. The CDD options bar will open.
2. Set the Page size. Width and Height. These values must be in pixels. No other units are accepted.
3. Set the Scale (optional). This is for presentation of the page on your monitor. If your page is very large you will not be able to see everything. You can adjust the page scale for your requirements. This should only be used for viewing the pages not editing them.
4. Select Layout Mode. The options are Fixed Page and Flow to Fixed and Flow Book. When you select Fixed Page  or Flow to Fixed you must have Width and Height set.