Enter Stage Right. CSS Direct Design
2 November 2013
CSS Direct Design (CDD) is now available in IGP:Digital Publisher. This means the same IGP:FoundationXHTML that is used to create the Print PDF and reflowable ePub3 can be used to create highly designed fixed-layout pages.
CSS Direct Design (CDD) is now available in IGP:Digital Publisher. This means the same IGP:FoundationXHTML that is used to create the Print PDF and reflowable ePub3 can be used to create highly designed fixed-layout pages.
CDD also supports fixed layout blocks and widgets that can be inserted into reflowable ePub3s. CDD is specifically targeted at the creation of sophisticated interative education content that breaks the ePub2/3 book print copy book method, but it can be used for any fixed layout production work.
We believe strongly in WYSIWYM (What You See Is What You Mean) XHTML5 markup for publisher content and the preservation of accessibility, even with extreme design and interactivity. A benefit of this approach ensures the reusable value of digital content so it can be used and processed for anything; now and into the future.
We also believe that fixed and reflowable content should be easy to produce from the same source XHTML5 as any other format with nothing proprietary about it.
Demonstration Video
Audio alert. This video has background music
CDD - CSS Direct Design
CDD allows the direct, visual manipulation of IGP:FoundationXHTML content block objects in a visual interface; like Flash, Edge or Google Web Designer; except very differently.
This means content of virtually any complexity, not just kids books and simple stuff. CDD changes the complexity challenge of CSS and layout manipulation into an easy non/semi-technical interface.
We choose a tabbed design to keep the interface small and so it would usable in a wide range of interfaces. CDD has the power of a stand-alone application but is primarily designed to work with IGP:FoundationXHTML content in IGP:Reader.
We also decided to keep the various adjustable properties in CSS specification groupings because our target user group is familiar with these groups and new users have the benefit of learning the CSS groupings as well as playing with the buttons.
Text
Text has a comprehensive range of properties that allow the adjustment of nearly any text property. These are the standard main set required to get text behaving in a fixed layout environment.
There is nothing too tricky here except is is fun adjusting text properties interactively and watching them dance in weird ways.
Box
The CSS box model is of course currently under attack with various new flow models to break the rectangle. Meanwhile we stay with boring margins and padding. Borders are part of the box model but because they are so important and heavily used in fixed layout design they get their own tab.
With most fixed layout designs where blocks are absolutely positioned these are nearly always zero in all values but from time to time padding especially is required. Having said that CDD does allow the creation of both relative and absolute positioned components.
At the bottom is good old "box shadow" with a check-box for insetting a shadow.
Border
As mentioned previously borders are regarded as so important they get their very own tab. Standard borders and radius are handled.
Colour can be RGB, RGBA, HSL, etc.. We explicitly didn't handle border images in this release as we don't use them a lot and they are unevenly supported, or not supported across all platforms. This type of feature is always a balancing act between completeness and practicality.
With border-radius being so easy to access we have found we are definitely over-using this. The CDD video demostration shows some of the power and abuse that can be wrecked with this feature!
Background
Background does not implicitly handle gradients in this release. You have to create them separately and then these can be cut and paste into the interface. This means a gradient generator such as ColorZilla can be easily used. We will be working on a gradient generator for a future release.
If you are using image backgrounds you can directly manipulate these with CDD assuming there is only one image (in this version) and the background-image statement is already in the block. Because IGP:Writer and IGP:Media Manager allow a background image to be directly inserted into any block there was no requirement to add to the complexity of this interface.
Block
Without doubt block is the hard-hitting properties group for fixed-layout design. These are the properties that can turn anything into anything and let you mash them around.
Fixed layout is all about getting content into various positions in an X-Y manner and also getting the Z order correct. This is all done from this tab. Arguably during design this is the tab that works hardest.
There are a number of properties that are redundant for absolute fixed layout pages, but properties such as float do work on blocks (images for example) in a reflowable to fixed-layout text container.
Column
Bringing up the last place is columns. Although these are not used a lot on the Web or even in e-Books we have found them very useful with many fixed layout books.
Behaviour is reasonably consistent across browsers but browser prefixes are required for -webkit still. CDD handles this for you and inserts -moz, -webkit and the standard fallback automatically so you don't have to.
Colour and Color Everywhere
The magnificent Color Picker we are using is created by Martijn W. van der Lee. Copyright (c) 2011-2013 Martijn W. van der Lee Licensed under the MIT. It's features options and interface are outstanding.
Units
The default interface numeric units are pixels. However if for any reason you do require ems, percentages, points, millimetres or inches these units can be typed in.
EG: Just type 1em, and the system will obey. Because the JQuery engine is working with the DOM layout in pixels we had to explicitly handle the preservation of user preferred units in the interface. There are times, such as with text line-height where ems are very useful. Having said that it is probably best to use pixels where possible.
We have covered a significant amount of the CSS2/3 specification in this first CDD release. Notably missing are transforms, transitions and animation.
We have plans for these and many more features in the future including AZARDI Interactive Engine animations, CSS animations and more but the journey of a million CSS properties starts with a single working interface.
Most notably, and differently, we are planning the inclusion of SVG CSS statements for fill, stroke, stroke-width, etc to support our SVG Primitives project. With the trials we have underway this does appear to be a game-changer.
From simple travel books to complex text books. CDD is ready for action.This page is part of a reflowable to fixed layout book so the original content is available as a reflowable ePub3/2, fixed layout ePub3 and a static site.
Page-Break Generated Fixed Layout
Upping the value even more CDD allows the creation of pages from reflowable content with page-break tags.
If you have a print PDF created with IGP:Digital Publisher you can automatically have the page-breaks automatically inserted into the IGP:FoundationXHTML (FX) in the Writer interface. You can then use CDD to create fixed layout facsimile ePub3 books and still generate a reflowable ePub2 or ePub3 using Design Profiles.
We have manually prepared hundreds of interactive audio books for OUP and the lessons learned on those projects have been encapsulated into IGP:Digital Publisher-CSS Direct Design.
The Complexity Has to Go Somewhere!
How does it work? Behind the scenes the CSS management is somewhat brutal. Complexity always has to go somewhere! Remember with CDD there are no styles or layouts stored in Javascript. They are all separate and accessible which means they can be changed easily and instantly, and there can even be
Each manipulated object ID on the fixed layout page generates a large DOM generated CSS style tree. This is a list of un-optimized CSS statements generated by the Javascript and knocked into shape with a Python save and load module. Because JQuery translates all CSS units to pixels, and we needed to be able to use ems, percentage and others the save and load module ensures this is handled.
When IGP:Digital Publisher generates a format such as ePub3 or an online site the processor optimizes the CSS at packaging time. It removes redundant CSS properties for each object and page to just a few lines of layout CSS, with browser prefixes added.
Because there is no CSS cache value between pages in fixed layout CSS the CSS files are processed and separated for each fixed layout page during Formats on Demand Processing. This speeds loading time and lightens the DOM loading effort. This is important for lower-powered tablets.
A CDD generated Fixed Layout ePub3 for example has a generic package CSS and a fixed-layout CSS for each page. This works for ePub3, E0, a static site or SCORM package. In fact any package. These pages are not limited to ePub3.
You can also include CSS Animations, SVG and SVG + SMIL animations plus Widgets and Questions and Answers. More on that shortly
The Future Of Digital Content
CDD is a powerful tool that assists publishers get to the book commercial delivery point faster AND preserves the value of the managed digital content for any use.
There doesn't have to be anything proprietary or special about the packaging even with high-design as long as targeted reading systems have the feature support.
An example of a "proprietary" packaging approach is Inkling Habitat "cards". It's either a curious paper-like metaphor to replace the page, or more likely a kind look back at Hypercards. But ultimately they are still an HTML5 content block with some CSS attached and some content inside. In FX we boringly call the "cards" content blocks. They do the same thing.
Books created with these techniques should lower production costs not drive them higher; or there is something very wrong with the approach.
What really matters is not what you do in production but HOW you create and maintain your content. If you want to reuse it, remix it, break it apart, bring various components together the HTML5 design core really matters.
Digital ePub2/3 content in tablets today is like an IE6 re-run, especially with the ePub2 domination by ADE and ePub3 domination by iPad. Hopefully the AAP ePub3 Implementation Project will have an effect here. Today everything has to be dumbed down to specific system features, or you use a book app approach. IGP:Digital Publisher and AZARDI break that monopoly for education publishers who need to deliver their content directly to end-users.
It is vitally important that publishers do not have to care about reading systems and devices. The content must be created, maintained and ready to generate formats for all current platforms and anything the future may introduce.
That is the value of IGP:Digital Publisher and IGP:FoundationXHTML. The value has now been extended with the CSS Direct Design add-in making fixed layout and reflowable to fixed layout books easy to create.
Posted by Richard Pipe