Important: The next generation of the CSSGeometry script is now called ePubCrawler. CSSGeometry is retiring, and will not be updated any more. ePubCrawler does everything CSSGeometry does, and much more. Read all about it here:
A little while back, Her Geekness (occasionally also known as Anne-Marie Concepción) sent me an e-mail asking whether I knew of any way I could make it a bit easier to convert InDesign page item geometry into CSS information.
(Edit: I’ve since also received and incorporated some input from Liz Castro and Laura Brady – this script is becoming a ‘joint venture’)
I quickly whipped up a small script which does just that; it’s called CSSGeometry.jsx.
Open any document, and double-click the CSSGeometry.jsx script on the Scripts Palette.
(To access the Scripts Palette in InDesign CS5 and above, you use the Window – Utilities -Scripts menu).
The script will create a dummy, non-printing text frame on the pasteboard and fill it with CSS info reflecting the positioning of all the frames on the document pages. You can then copy-paste the CSS info from the InDesign document into your CSS file.
Keep in mind: this is a really spartan, simple- and single-minded script that does one thing: help you with building a CSS style sheet file.
It does not generate a complete CSS file for you. It does not have any user-interface to speak of. And yes, it could do a lot more, but writing scripts takes time and effort, and I always have to strike a balance between what could be done, and what I can afford to do in my spare time. So take it for what it’s worth – warts and all.
To install: start by clicking the link below to download it.
It’s a .ZIP file – decompress it after download, and dig up the CSSGeometry.jsx file.
Try to install the CSSGeometry.jsx file into your InDesign Scripts Panel folder inside the Scripts folder inside your InDesign application folder.
If you don’t succeed, try using the following instructions instead, as some alternate locations for the script are documented here:
The script is self-documenting. As you might know, scripts are text files, and if you want to, you can open it in a text editor and read all about what it does at the beginning of the script.
When it comes to text editors, you might want to avoid using Notepad (Windows) or TextEdit (Mac) – they’ll work, but you can bump into some odd issues.
Instead save yourself some ‘head-scratchers’ by using a proper text editor. Some good free alternatives are:
Windows: Notepad++ (http://notepad-plus-plus.org/)
Mac: TextWrangler (http://www.barebones.com/products/TextWrangler/).
Below some more details on how it works.
The script will scan the active InDesign document and find all frames (excluding frames on the pasteboard and on master pages). Then it will generate some CSS positioning info for each of the frames.
There are some options by way of script labels (you can use the Window – Utilities – Script Label menu in InDesign to access the Script Label palette).
You can use the Script Label palette to assign script labels to text frames in your document.
Script labels on the text frames can be interpreted in two ways. If you assign a script label
to a text frame, then that text frame will be omitted from the generated CSS.
If you assign a script label that starts with a ‘#’ (e.g.
) then it will use that for the CSS id instead of the default ones that look like #p3-2 (which for example, would normally be assigned to text frame 2 on page 3).
The text frame on the pasteboard that is created to contain the CSS is re-used when you run the script a second, third, fourth… time.
You’re allowed to delete this generated text frame after use; the script will re-create it if it cannot find it. The script recognizes this pasteboard frame by its script label – GeneratedCSSFrame
That means you can reposition the GeneratedCSSFrame text frame to a more convenient location, and it’ll keep on being refreshed each time you run the script.
The script has some ‘hidden’ options. For example, instead of using pixel coordinates, you can also use percentages in the generated CSS.
To enable that, you need to open the CSSGeometry.jsx file in a text editor.
Scroll down until you see some gobbledygook enclosed by two lines that contain *** CONFIG START *** and *** CONFIG END ***:
const kIgnoreImageFrames = 0; const kIgnoreTextFrames = 0; const kUsePercentageInsteadOfPixels = 0; const kIgnoreFrameLabel = "ignore"; const kIdentifierPrefix = "#p"; const kIdentifierInfix = "-"; const kCSSFrameLabel = "GeneratedCSSFrame"; const kLeftPageGeneratedCSSIdSuffix = "L"; const kMiddlePageGeneratedCSSIdSuffix = "M"; const kRightPageGeneratedCSSIdSuffix = "R"; const kCreateCompactCSS = 0;
Each of this lines represents a script configuration option. Be careful when making changes in this area. For safety, don’t add extra spaces or tabs, and don’t change lowercase letters into uppercase letters.
For example, by changing the number in one of the lines from a zero to a one:
… const kUsePercentageInsteadOfPixels = 1; …
you will enable the use of percentages instead of pixels.
If you don’t like the ‘airy’ multi-line CSS structures, and prefer ‘compact’ CSS instead, make this change:
… const kCreateCompactCSS = 1; …
Save the script back, and run it again.
Have a play. If you make a mistake, and the script breaks, you can always re-extract a ‘clean’ copy from the .zip file you downloaded, and try again.
The script works great iteratively: move a few frames around, run the script. Don’t like it? Tweak a few more frames, run the script. Tweak, run. Rinse, repeat.