LEARN@IGP
24
Document Designer & CSS Editor
How IGP:Document Designer works with IGP:Digital Publisher with discussion and instructions on using it with the new IPG:Writer interface. Updated: 2012-07-27
Overview
IGP:Document Designer (DD or Document Designer) is a stand-alone interactive CSS design application that works with IGP:Digital Publisher (DP or Digital Publisher) through a middle-ware component on the server.
Document Designer styles are written to the middleware when you click save from DD. Then the styles are processed into the Digital Publisher CSS Editor. While you do not need to know the mechanics of this, it is useful to understand the result.
Because FX is highly structured and vocabulary controlled XHTML5, the Document Designer created styles can be written directly into the correct FX classification location in the CSS Editor. This makes it very easy to locate and modify the styles if required.
This only affects documents that have been created using 2012 templates or that use 2012 templates and that can directly access the CSS Editor.
How to Find Document Designer Styles
The CSS Editor is organized by FX
Classification, making it easy to quickly
locate any selector
Document Designer styles are organized and generated by FX classification. The DD styles are stored in their correct classification section in a special block location at the bottom of the relevant CSS section.
- Open the CSS editor.
- From the CSS Editor click on any Reader or Print CSS Classification number. This tutorial is using F05:Section Title Blocks.
- Scroll to the very bottom of the displayed CSS. There you will see a CSS comment block that looks like this.
/* F05 DOCUMENT DESIGNER Starts */ /* F05 DOCUMENT DESIGNER Ends */
This will be empty the first time you open it.
F05 is Section Title Blocks. So any Document Designer style changes you make to Parts, Chapters, Front and Backmatter and Specials are written into this F05:Section Title Blocks section in the CSS Editor. Here is an example where Document Designer has been used to change the title font and size.
/* F05 DOCUMENT DESIGNER Starts */ /* F05 DOCUMENT DESIGNER Ends */
The reason it is in this position is that the system uses the CSS cascade rules to over-rule the default coded styles. Because the default CSS and the DD generated CSS use the same syntax, this is reliable.
Do not remove these blocks. However if you do remove them, Document Designer will reinsert them when required.
Custom Styles
Underneath the Document Designer CSS block there is a reserved area for custom styles. It looks like this.
/* F05 CUSTOM SECTION TITLE BLOCKS Starts */ /* F05 CUSTOM SECTION TITLE BLOCKS Ends */
This is placed last to ensure your manual custom styles will use the CSS cascade to over-ride the default styles and Document Designer styles.
This is the preferred location for you to add new style requirements for each FX classification area. The reason for this is that it makes the long-term maintenance of your content by different users much easier.
For example if in one year a different person needs to modify a particular CSS selector, they can go directly to the FX section, scroll directly to the bottom and find the custom CSS and immediately get to work.
CSS Optimization and Selector Reduction
That all looks like a lot of styles!
However when you generate your various formats the processors and packagers optimize the CSS. They only include the selectors used in the final package.
This emphasises that Digital Publisher and FX is essentially a dumb-down system. The XHTML5 and CSS start at the highest standards-conformance level, and then are reduced in complexity and optimized for the handling ability of the various proprietary readers out there.
One of the most challenging issues is the non-standards support map of various reading devices. They all have quirks. This approach is designed to reduce your frustration at handling various device capabilities.