Enter Stage Right. CSS Direct Design

CSS Direct Design (CDD) is now available in Cross Platform Publisher. This means the same Cross Platform Publisher 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.

Axis12 are advocates of 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.

CDD - CSS Direct Design

CDD allows the direct, visual manipulation of Cross Platform Publisher 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.

A tabbed design was chosen 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 Cross Platform Publisher FoundationXHTML content in Cross Platform Publisher:Reader

A decision was made 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 it is fun adjusting text properties interactively and watching them behave in a peculiar fashion.

Box

The CSS box model is of course currently under scrutiny with various new flow models to break the rectangle, whilst we stay within the margins set. 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. However CDD does allow the creation of both relative and absolute positioned components.

Border

As mentioned previously, the high regard of borders means they get their own tab. Standard borders and radius are handled.

Colour can be RGB, RGBA, HSL, etc.. Axis12 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 Axis12 has found we are definitely over-using this.

Background

Background does not implicitly handle gradients in this release. The organisation has 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 your organisation is using image backgrounds, they 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. This is because XPP:Writer and XPP: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

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 and inserts -moz, -webkit and the standard fallback automatically.

Units

The default interface numeric units are pixels. However if for any reason ems, percentages, points, millimetres or inches is required, 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, Although it is probably best to use pixels where possible.

Axis12 has covered a significant amount of the CSS2/3 specification in this first CDD release. Notably missing are transforms, transitions and animation.

There are plans for these and many more features in the future including 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, is the plan for the inclusion of SVG CSS statements for fill, stroke, stroke-width, etc to support our SVG Primitives project. With the trials currently underway this does appear to be a game-changer.

Page-Break Generated Fixed Layout

Upping the value even more CDD allows the creation of pages from reflowable content with page-break tags.

A print PDF created with Cross Platform Publisher can automatically have the page-breaks inserted into theCross Platform Publisher FoundationXHTML (FX) in the Writer interface. Afterwards CDD can be used to create fixed layout facsimile ePub3 books and still generate a reflowable ePub2 or ePub3 using Design Profiles.

Axis12 has manually prepared hundreds of interactive audio books for OUP and the lessons learned on those projects have been encapsulated intoCross Platform Publisher-CSS Direct Design.

The Complexity Has to Go Somewhere

Behind the scenes the CSS management is somewhat difficult. Complexity always has to be involved somewhere; 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.

Each manipulated object ID on the fixed layout page generates a large DOM generated CSS style tree. This is a list of un-optimised CSS statements generated by the Javascript and shaped with a Python save and load module. Because JQuery translates all CSS units to pixels, and ems, percentage and others were required, the save and load module ensures this is handled.

When Cross Platform Publisher generates a format such as ePub3 or an online site the processor optimises 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.

As 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.

CSS Animations, SVG and SVG + SMIL animations plus Widgets and Questions and Answers can also be included, which will be mentioned in more detail later.

The Future Of Digital Content

CDD is a powerful tool that assists publishers get to the book commercial delivery point faster while preserving 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". They are still an HTML5 content block with some CSS attached and some content inside, but called "cards" instead of content blocks, but 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 is done in production but how the content is created and maintained. This is to make sure that the organisation is able to reuse it, remix it, break it apart and 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 simplified to specific system features, or a book app approach is used. Cross Platform Publisher breaks 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 ofCross Platform Publisher and Cross Platform Publisher 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.

Share this post


About Us

Axis12 specialise in building, hosting and supporting high traffic, content heavy web applications for both the public and private sector that help them achieve their Digital First aspirations. We recently implemented Cross Platform Publisher for the National Health Service (NHS) in the United Kingdom, which has transformed the way online reporting and publishing is carried out.
Read more...