The details of how this will work was drafted late in November of this year in a document from W3C. If you are interested you can read this at dev.w3.org/csswg/css-shapes/. We are reminded that this draft is just that, a work in progress, provided for discussion only and may change at any time.

While the World Wide Web Consortium is nailing down the details, you can experiment with this feature today using Chrome. But to do this Chrome needs to have a plug-in added to support the functionality. (You can get the details at html.adobe.com/webplatform/enable/.)

Creating the Sample Page

The sample page was designed in Adobe InDesign CC, exported to HTML, and finalized using Edge Code. The page was set up for web intent at 800px by 700px.

The Image

The image was sized and resampled in Photoshop to 360 by 422 pixels at 72 ppi. Once placed on the page its shape was modified using the direct selection tool. (Just grab the top right control point and drag.) The image’s containing rectangle was assigned to an object style named FloatLeft and given alternate text using Object Export Options (from InDesign’s Object menu).

The Polygon Text Container

To insure that the shape of the polygon would match that of the photograph, a temporary line was drawn next to the image and then moved into position as a guide for the left side of the polygon. Guides were created for the intended top and bottom of the shape. With these in place, the pen tool was used to create the shape.

Text was entered manually and styled using a paragraph style for the headline (Head1) and quickread (Quickread). The polygon text container was then assigned to an object style named BasicShape.

Two Column Text Frame

The two column text frame was filled with placeholder text and styled using two paragraph styles: First and Text. For the drop cap, three lines with one character and a character style named Bold were used. The character style simply adds a Bold attribute to the text. The text frame was assigned to an object style named TwoColumnText. This style has two columns with a 24px gutter.

Preparing for Export

The page elements were dragged into the Articles panel in the following order: image frame, polygon text container, and two column text. A script was then run using the information from the Articles panel to get the page item information needed for the custom CSS file settings. (See previous blogs for more on using custom CSS files.)

Custom CSS File

Using the information from the script, the following was entered into a plain text file and saved as CustomScript.css in the same folder as the document.

@charset "utf-8";
/* CSS Document */
.FloatLeft {
margin-top:0;
margin-left:0;
float: left;
width: 360px;
height: 428px;
-webkit-clip-path:polygon(0 0, 80% 0, 100% 100%, 0 100%);
}
.BasicShape {
padding-top:50px;
margin-left:0;
width: 400px;
height:428px;
overflow: hidden;
-webkit-shape-inside: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
}
.TwoColumnText {
margin-top:0;
-webkit-column-count:2;
-webkit-column-gap: 18px;
}

Exporting to HTML

From InDesign’s File menu, select Export (Command/Control + E). This opens the Export file dialog. Select HTML from the Format drop down and navigate to your project folder for the destination. By default, the name of the file will be saved with the name of your document with an .html extension. You can change the name if desired (but not the extension). This opens the HTML Export Options dialog.

In this dialog the settings used for export were as follows:

In the General panel:
Export: Document
Content Order: Same as Articles Panel
View HTML after Exporting: optional if a modified version of Chrome is selected as your default browser

In the Image panel:
Copy Images: Original (with this setting, all other is disabled)

In the Advanced panel:
Generate CSS: checked (without Preserve Local Overrides is optional)
For Additional CSS: Add Style Sheet and select CustomCSS.css file.

Tweaking the HTML

If you use tracking in any of your text styles you will need to add a letter-space attribute to the CSS style selector generated by InDesign. For our demo document, we added the following to the style for p.Head1:

     letter-spacing: -1px;

To get the quickread text to fit within its box we also added the following to the p.Quickread selector:

     word-spacing: -.75px;

We used Adobe Edge Code CC (Preview 7) to tweak the CSS. If you want to experiment with this application you may find that it works best if you place the CSS styling inside the HTML file. (See side note below.)

Even with the little bit of workarounds needed, I love designing my pages in InDesign and then exporting as HTML. For me it is the way to go especially if special page formatting is required. The script makes it easy to get the parameters needed to create the CSS styling not currently supported by InDesign.

GetArticleParams Script

For the script that produces a text file with the information needed to set the values for the custom CSS file, keep an eye on our AppleScript or ExtendScript page for a link to the Featured Script GetArticleParams. This creates a text file in the same folder as your document that will read similar to the following. The numbers in parentheses are for the polygon or container bounds as the case may be:

     "FloatLeft itemWid 360.0 itemHgt 422.0 mTop 10.0 mLeft 17.0 (0 0, 0 100%, 100% 100%, 74.722% 0 )
     BasicShape itemWid 403.0 itemHgt 369.0 mTop 63.0 mLeft 2.0 (100% 17.073%, 100% 100%, 100% 100%, 94.045% 17.073% )
     TwoColumnText itemWid 766.0 itemHgt 222.0 mTop 30.0 mLeft 16.0 (462.0, 16.0, 684.0, 782.0)"

This was for the sample document above. As you can see it includes the width, height, margins and polygon list required for the items in the articles panel. This script could be expanded to support curves, and shapes such as ovals. We will leave this for the future.

Side Note:

My experience is that the current preview version of Edge Code does does not work well with externally linked CSS style files. (I hope this is just for this preview version.) If you select a style tag in the HTML and enter Command/Control + E, you should see the CSS style selector in a small window. If it comes up empty you may have to add the styling to the HTML file. For this, simply copy the styling from both CSS files and replace the references to the external files inside the head tag with the following:

     <style>
           [copied styles]
     </style>

More to Come

We will be covering more of the new capabilities that will be available in HTML5 and CSS3 in forthcoming blogs, so keep watching.