Great tip for automatic alignment of an InDesign facing page layout

Here’s a possible solution to a problem a student described about the requirement to insert a new left side page into a spread and thereby making the original page 3 end up as page 4, the image was then next to the spine, when it was meant to remain on the outer edge of the page.

Q. How can you create a facing page layout, that automatically keeps a mirror format relative to the spine of a facing page spread.

A. An example of this problem could be a two column facing page layout, that has a left front cover 1 spread in the middle and a back cover (page 6). You’d like to add another page to eventually change the content on one side of the spread. The spread page or pages has a design where a photo covers the top portion of the outside column and forces a text wrap away from all sides of the photo. The problem arises when you attempt to insert a single page into the left facing page of the spread. After doing so, the photo that was on the left on page 2 is now on the left of page 3 and therefore is no longer a mirror of the design structure (where the photo is always over the outermost column away from the spine).


The solution is to use an inline graphic container for the photos. Anchor the inline graphic and apply a conditional anchor based upon the anchor object’s position away from the spine. See the illustration.

The setting that you would set in the Anchored Object Options dialog box after selecting “Custom” in the drop down menu is to check the option “Relative to Spine”. Then set the Anchored Object’s Reference Point box so that it is selected on the left edge (automatically on the right edge as well) and in the middle vertically.

A Position of Custom, and Relative to Spine setting can also be applied to any object on the page including text as long as the object is inline in a text frame. The frame itself can hold nothing more than empty paragraphs with insertion points for the relative to spine aligned objects. To make an object an inline object quickly, leave a copy on the paste board. Copy it and paste it into the text frame as if it were text.

Upon insertion of an extra page. The photo will always anchor to the outermost column, in flow with the page break and inline with the appropriate position in the copy.

NVIDIA Virtual Desktop Infrastructure is ready for Prime Time

At Siggraph 2012 I was invited by Adobe to demo their CS6 video production applications running on a what NVIDIA calls NVIDIA VGX Technology. Stationed on the west side of NVIDIA booth (across from Pixar’s Brave theme based booth) we had a Dell Precision R5500 Rack Workstation with 24 gigs of RAM providing the virtualization services and (2) QUADRO K5000s providing the GPU processing and acceleration (in my case) of all Adobe enhanced filters as well as the most robust multiprocessing settings.

These world class applications were passed via a virtual desktop over Ethernet and delivered and controlled via a MacBook Air. With incredibly low latency I was able to manipulate a 3D Ray Traced title element in After Effects (while it utilized all available processor cores on the built-in XEON class processor) while playing four layers of HD video (with multiple effects) on a looping full frame sequence monitor in Adobe Premiere Pro, while also applying a Wide Angle Lens correction effect (also taking advantage of Mercury Playback Engine on board one of the Keplers) in Photoshop.

Cloud Based Video Editing from NVIDIA

NVIDIA’s Cloud Computing Concept called VGX

Theoretically this concept could be delivered to any thin client with support for a Citrux viewer, such as an Assus EEPC or an iPad.

Now, I am not suggesting you edit HD video, build 3D titles and process your wide angle DSLR raw images while riding your two wheeler along a bike path. But it is good to know that you can.


Meet me at Siggraph 2012

This year at Siggraph 2012 brings some exciting new technology I plan to showcase. Adobe Creative Suite 6 Applications show substantial gains in performance when run on platforms that include this years NVIDIA graphics cards.

GPU accelerated features in Photoshop and on to SpeedGrade improve your work efficiency sometimes as much as 13x.

Here’s the breakdown:

For After Effects:
  • Integrated CUDA-based OptiX allows for gpu-accelerated ray tracing which enables 3D beveled and extruded text and shapes to be created directly inside AE at maximum speeds w/out the need for an external animation tool.
  • New 3D motion graphics workflow with NVIDIA Quadro
  • 13x faster over CPU w/ K5000
  • 27x faster over CPU with Maximus
For Premiere Pro:
  • GPU accelerated Mercury Playback Engine allows for fluid, real-time video editing
  • 8x faster for broadcast and post production editing in MPE
  • GPU accelerated features include 3-way color corrector, warp stabilizer, uninterrupted playback and multi-cam support
  • New support for NVIDIA Quadro SDI
For SpeedGrade:
  • Professional real-time color grading optimized for NVIDIA Quadro
  • Exclusive NVIDIA video display with Quadro SDI
In Photoshop:
  • Mercury Graphics Engine for real-time GPU imaging
  • New blur, wide-angle and liquify effects in GPU-accelerated Mercury Graphics Engine

If I were you, I’d come see the Principal at the NVIDIA Booth, this year at Siggraph 2012.


Addressing Accessibility with Adobe Web Products

The Challenge —

Provide persons with disabilities, employees and members of the public, access to information that is comparable to the access available to all users.

The Key Considerations —
Develop applications and information services to address all users who may be faced with one or a combination of these physiological conditions.

A person who is blind uses sound to understand the position and movement of screen based elements and uses the keyboard for input. May use a Braille printer. Because the position of the interface cursor is determined by sound, text based information is mainly presented with Screen Reader technology. It is initiated when the information loads, by where it loads, and when it is brought into focus with cursor input.

A person who is visually impaired (low vision) or has damaged vision. Can use the mouse but mainly uses the keyboard for navigation and input or response. Uses visual enlargement of the screen, increasing the overall zoom magnification. This user may  also rely on Screen Readers for large amounts of textual information. Experiment with Windows “Magnifier” tool found in Windows Ease of Access Center to gain an understanding of this experience.

A person with mobility impairment. For this user, the use of devices that require control by the human hand may be impossible. Their one mobility solution is a head or tongue controlled wand or joystick. Attempt to write a short memo using only the eraser end of a pencil clenched between your teeth on a normal keyboard

A person who is deaf. This user can only receive information in text that is displayed. However is not challenged in navigating an application with keyboard or mouse. The receipt of visual information requires the appropriate captions or captioning streams. To place your self in this scenario, watch an instructional video with the sound off.

Individuals who are color blind, will have difficulty with both red and green as well as color backgrounds with low contrast to foreground text or foreground elements. To experience what you intend to develop, imagine it on a gray scale television set.

10% of all human males are color blind.

Ask, what are the specific issues for each user? Know the tools that users will work with to overcome challenges to ordinary access.

Each consideration deals with verbal or captioned feedback , even color blindness to some extent. The greater challenges are addressed (mainly) with screen reader technology.

Provide textual label(s) or screen reader equivalent for things that a seeing person would have to describe to a blind person.
Control the reading order so that all design elements follow in logical order.

Describe all motion and animation elements just as you would images.

Ensure that access by mouse has the equivalent access by keyboard.

Understand the concept of PROGRESSIVE DISCLOSURE.
Always provide captions in whatever method the application allows.

Provide controls over audio, especially background audio.
When selecting colors, first consider color blindness and do not neglect low vision. Make contrast the first consideration in choosing foreground and background elements.

508 Basics
Web-based intranet and internet information and applications. (from The US Government Website on the Section 508 Law

(a) A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

(e) Redundant text links shall be provided for each active region of a server-side image map.

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

(g) Row and column headers shall be identified for data tables.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

(i) Frames shall be titled with text that facilitates frame identification and navigation.

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

(o) A method shall be provided that permits users to skip repetitive navigation links.

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

How Adobe Acrobat assists in compliance — Introduction
Warning Acrobat X, Acrobat Pro 9 or Pro Extended REQUIRED…

Acrobat has the built in accessibility features to make information available to users with disabilities with or without assistive technology. Examples are “read aloud”, “page scrolling”, page background color preferences.

Accessible documents have added value, beyond meeting 508 compliance. Documents that are designed with accessibility at the fore front, are easier for anyone to use. Accessible documents are user friendly by design. An example, if a screen reader can read a document in the correct order. The document can be re-flowed and can be read easily on smaller hand held devices.

Content is reusable, and subsequently more valuable.
In business forms, adherence to logical tab order means that more users will make it to the submit button, less confusion results in less drop off.

— Key Considerations
Is the text scanned or searchable?

Can the text be copied to the clipboard?

Are the form fields actual interactive form fields? Are they images?

Is the Language property of the document set correctly? Screen readers read words based upon the language they are installed into.

Are security settings applied that do not allow text processing by a screen reader?

Is the reading order correct and logical?

Do the Images have alternative text correctly tagged to the element.

— Considerations to Increase Accessibility
Add logical buttons, hyperlinks

Add (Bookmark) based navigation

Include clear and useful instructions (not everyone understands that a PDF page on the web is not the same an HTML page).

— Adobe’s Recommended PDF Accessibility Workflow
Analyze the PDF File

Determine if the PDF is a Scanned Document

If scanned — OCR the PDF file

If PDF is a Tagged (structured) PDF file, run the built in accessibility checking tools.

Use the TouchUp Reading Order Tool to correct accessibility errors.

If the PDF is a form (scanned or authored in another application) run the Acrobat Forms Wizard (It will OCR not just text, but form elements as well)

Manually add form elements that the wizard failed to capture
Check the tab order of form elements, correct if necessary
Check and validate that all form elements are labeled correctly and use tooltips on form elements

— Tables
If the PDF has tables, use the TouchUp Reading Order Tool Table Editor

Add a Table Summary

Make sure the table has the correct header row associated so the screen reader reads the row header cell as header information, then the column content, then the next column in the same fashion, (versus left to right) Also, set appropriate row spans and column spans.

— Also,
Consider adding alternate text for abbreviations and acronyms
Add alternative text for links and hyperlinks



Develop accessibility from the source application (our example will be PDFs exported or saved from MS Word)

— Accessible MS Word Docs
Use Microsoft Styles for elements that will become bookmarks, especially section or chapter headings (creates an automatic TOC with built in navigation)

Add alternative text to all graphic elements, and images placed into the Word doc.

Check that the PDFMaker is configured for tagged documents and will convert bookmarks.

Convert the Word doc to Accessible PDF format
Check the document within Acrobat Pro

— Author accessibility in the Source Document
instead of correcting it later in the PDF.

Before converting to PDF follow best practices in developing forms or documents with tables in word.

Use tables for tables

Do not use tables for layout

— Check and Check again
Run the Accessibility Checker in Acrobat, follow the instructions to correct the document, run the Checker again, until all issues are solved.

Best Practice PDFs should have:

Searchable text – not scanned. If Scanned OCR it…

Use common fonts that allow Acrobat to recognize and extract text based characters

Acrobat extracts text to Unicode for access by the screen reader or braille printers. If Acrobat cannot recognize the font structure. It cannot supply information to these devices.

Forms should be functional as to user input just like an ordinary web based form. Buttons should function, combo boxes should have keyboard equivalents and have the values assigned logically and with useful description.

The correct tab order is essential

Take advantage of buttons, hyperlinks, and navigational aids on what would normally be a simple printed page.

The “Document language” should be correct so the screen reader can ascertain the correct language to use and thereby, the correct pronunciation.

Security that limits, editing, copying or printing text should not stop the screen reader from extracting and rendering text to speech.
Understand that accessible documents have structure. Structure (or element containers) determine the reading order. Define heading levels paragraphs, and the header rows of tables.

Every image or diagram (basically all pixel based imagery) as well as form elements should have alternative text associated with their tags. “Alt” text as well as tooltips can be applied to aid visually impaired users as well as users with cognitive impairments.

Examination — 3 Tasks to illustrate the Acrobat Accessibility feature set.

Full accessibility Check

Check for 508 Compliance

Examine Form Elements

Reading order, tooltip property field, make sure you understand the concept of “Listening to a form.”


How Adobe’s Dreamweaver Assists you in compliance — Dreamweaver CS4 Key Features
Built in reference guide

Accessible templates

Code snippets

Built-in accessibility validation tools.

Enhanced features for the creation of accessible forms

Accessible data tables.

To insure that each image on a page is given a text equivalent (alt text), as well as frames , media annotations and form objects, the default for requiring accessibility attributes in insert dialog boxes is checked on — out of the box.

Set preferences that prompt the designer to supply accessibility information during development.

Preferences dialog box, prompts for accessibility-related information for form objects, frames, media, images, and tables upon insert into the html page flow.

When you insert a image into the page. The Image Tag Accessibility Attribute offers a fill-in box, to complete the requirement.

– Tables
Inserting a table from the layout pallet, prompts you with a dialog box for the number of rows and columns, but more importantly for summary information, caption and the location of the heading cells. Heading cells determine the reading order of tabular information when it is encountered by a screen reader.

– Accessible Forms
All form objects are required to have labels, as well as tab ordering.

Apply shortcut key accessibility as well

Tab order position.

Labels identify the purpose of the form element and the tab order allows navigation through the form without the use of a mouse. Shortcut keys allow form fields to be accessed via the keyboard.

Dreamweaver CS4 ““ has a box for checking Section 508 standards and World Wide Web Consortium (W3C) Web Content Accessibility Guidelines for both Priority 1 and 2 checkpoints.

Accessibility Report
Run the report, receive the results. Non compliant elements are listed, with a direct link applied to the element on the page.

Double click the reference and Dreamweaver CS4 takes you to the reference information on the element. The report window also suggests further areas of information to suggest how you may solve the problem.

— Built in Accessibility Reference
The entire UseableNet Accessibility Reference documentation is built into the Dreamweaver Help>Reference menu. Extensive information on the nature of the error, and the process to repair it are available in a horizontal panel below the properties panel.

– Accessible Templates
Explore the many templates or starter pages to aid in understanding how to start building 508 Compliant web pages immediately.

I hope this article can help clarify the many ways you can meet the 508 compliance requirements of your organization.

Good luck,
Foster Johnson