The script, PolyParams, records the pertinent information about the polygon and other page items. (You will find more information about the script on our Featured Script page. The polygon information is then used to set the attributes for a CSS3 property (-webkit-clip-path). Although clip-path is not currently supported with many browsers, I am sure it will not be long before it will be. To my knowledge, clip-path is only supported in Safari 6.1 or higher, and the latest version of Google Chrome using the -webkit- prefix. Interestingly, it hasn’t made it into the search database at caniuse.com or w3schools.com. (Caniuse.com is a good resource for discovering what is/and is not supported by modern browsers.) 

If your browser currently supports -webkit-clip-path you may want to experiment with our script.

Procedure

1. 1. Make sure the image to be imported is sized such that it can be displayed at 100%.
   2. Create the shape for the image using the pen tool in InDesign.
   3. Import the image and fit using Fit Frame to Content.
   4. If you have InDesign CS6 or later, you will want to assign an object style to the shape.

With the image container selected, select New Object Style from Object Style’s contextual menu. With InDesign CC, you should see a section titled Export Options near the bottom of the Object Style Options dialog. If so, check the EPUB and HTML option and click to open the panel for this option. Check Custom Layout and select an option from the drop down. For our example, Float Left was selected.

1. 1. With the options for your object style completed, check the box next to Apply Style to Selection and click OK.
   2. Drag the image shape and other page items as needed into the Articles panel.
   3. Choose File > Export and select HTML for the Format option and Save.
   4. In the HTML Export Options panel select Same as Articles Panel in the General pane, Original for Copy Images in the Image pane, and Generate CSS for CSS Options in the Advanced Pane.

If you chose to view the HTML (View HTML after Exporting), you will see the image has not been clipped. For the clipping to occur, you need to add the -webkit-clip-path property to the CSS style for the image. This is where the script comes in.

1. With your document open (and saved), run the script.

The script creates a text file inside the same folder as your document. You will also find a folder with the HTML export files generated by InDesign. This folder is named the same as your document with -web-resources appended. Inside will be a css folder and an image folder. Open the css file using your favorite plain text editor. Next, open the text file with the “props.txt” extension. Use the information in this file to add properties to the style for the image container in the css file. The following is an example:

Modifying the CSS File

Because Custom Layout was selected for the polygon’s Object Style Options, the CSS file includes a style selector for the object container named the same as the object style. (The name of our the object style for our sample was Polygon.) Otherwise, it will have a generic (Gen) selector.

div.Polygon {
     float:left;
}

There is also a generated selector for the image:

img._idGenPageitem-1 {
     height:423px;
     width:361px;
}

Looking in the file generated by the script (has “_Props.txt” extension), we find the entry for the object style. The itemWid and itemHgt values should match that for the width and height properties for the CSS class selector (div.Polygon in our example). If Float Left was selected for the object style, the CSS style will also include a float:left; property. (InDesign CC only.)

The mLeft and mTop values in the text file can be used to set the margin-left: and margin-top: values for the CSS. Lastly, a -webkit-clip-path: property is added to the style selector:

     -webkit-clip-path:polygon

The values for the polygon are added by copying the values within the parentheses of the text file and pasting in for the clip-path polygon values.

The completed style selector for our sample now reads as follows:

img._idGenPageitem-1 {
     height:423px;
     width:360px;
     margin-top:12px;
     margin-left:12px;
     float: left;
     -webkit-clip-path:polygon(0 0, 100% 9.607%, 77.117% 63.23%, 100% 100%, 0 100%, 22.162% 39.559% );
}

With the CSS file modified, it is saved. You can test the InDesign file export by dragging the HTML file to your browser (Safari 6.1 or later, or the latest version of Google Chrome). The clip-path should display as anticipated.

If the HTML does not display as anticipated, check the following:

• You saved the CSS file after updating.
• Your version of Safari is 6.1 or better.
• Your version of Chrome is 31.0 or better.
• Spelling, capitalization, and spaces in the CSS property statements.
• Each property statement in CSS ends with a semi-colon.

Note:The above was tested on Macintosh OSX 10.7.5 and OSX 10.9.

Looking Forward

In the next few blogs we will be looking at some issues having to do with publishing to EPUB.