left menu mob button

New Video on YouTube:


Jeanette Ashman
(09.11.2021 16:37):

Hi! I have several documents that use the same paragraph styles. I have all the files in a book so if I change something I can synchronies. But in the heat of the moment I sometimes make changes in one of the documents and forgets to synchronize. So... I am looking for a script where I can compare paragraph styles from different files (same name on paragraph style) and only see the difference between them. Do you know if there is something like that existing? Kind regards Jeanette

(Compare Styles)

(10.08.2021 9:44):

Hi. If there is a group style, its subset style will not be displayed.

(Copy GREP Styles)

(24.06.2021 9:04):

hi. It is a perfect script.

(Common Formatting of Several Tables)

Only The Necessary Information

(series of articles):

Export From InDesign to HTML-4: What to Do With Images and Hyperlinks


Regardless of how graphical elements are represented in the layout, and what is called an image, in this case, when exporting to html, these objects should be replaced with their text-tag representation and placed in the necessary fragment of the resulting html document. Let’s consider three options for solving the task, depending on the specifics of the layout.

1. A figure inside the text

"Figures" include, for example, diagrams, graphs, complex formulas, and similar elements created by the InDesign tools.

In this case, the image should be saved in a separate file in any convenient way (after being cut from a PDF file, "photographed" from the screen, etc.) in the required format (* .png, * .jpg), and, in the text itself, the image is replaced with the a text of the following outlook:

<img src = "img/img01.png">

The simplest code to help automate such a replacement:

var pic_num = prompt("Image number:");
app.activeDocument.selection[0].contents = "<img src=\"img/img"+pic_num+".png\">";

The first line of code will open a dialog, in the field of which you should specify the sequence number of the current image, which will be added to the name of the graphic file, as in the example above.

The second line refers to the selected area. That means that, before running the script, you need to select an object, which is a image, or rather, select the character inside the text, which is the "insertion point" of the image in the text. The selected area will be replaced with a string that is generated in the second line of code.

Of course, this is only a small part of how you can comfortably provide the conversion of such data. For example, by using the interface for typical operations, you can not only save yourself from having to enter the number of the figure every time, but also completely stop controlling their numbering and reduce the entire operation to pressing of a single button.


2. Linked graphic files anchored to the text

In this case, by using a script, you can get the figure file name and put together the needed text string, which willreplace it, taking into account that the file has already been saved with the necessary type for html in the desired folder. Moreover, if all the images are placed in a layout using the same algorithm (i.e., they are all anchored to the story text), then you can process them all at once.

Place the cursor in the story and get an array of objects anchored to it:

var obj = app.activeDocument.selection[0].parentStory.pageItems;
for (i = obj.length - 1; i >= 0; i--){
	var cur_image = obj[i].graphics[0];

Let's form the name of the file that will be used in html, i.e. with the same name, but with a different file type and location:

	var picFileName = cur_image.itemLink.name;
	picFileName = picFileName.slice(0, picFileName.lastIndexOf(".")) + ".png";
	picFileName = "\r<img src=\"img/" + picFileName + "\" width = \"200\" height = \"200\">\r";

We have received a variable containing the text as below:

<img src = "img/curImage.png" width = "200" height = "200">

The width and height parameters are shown here to demonstrate that a string can be obtained with any data, with any content.

The following line executes the replacement of the image anchor marker with the received variable content:

	obj[i].parent.contents = picFileName;

3. Graphic files not anchored to text

This is the case when many solutions are possible depending on the overall structure of the layout, the semantic relationship of the image to the text (with which the image can be on different pages), and the creative imagination of employees, who have the authority to make decisions on this issue. Here, we will consider one option, in which (let's say) it was decided, in the html-version of the article, to place images after the respective paragraphs that go first on the same pages with illustrations.

var doc = app.activeDocument;
	We define the pages, on which the selected story is located in order to work with the graphic objects only on these pages. To do this, we get the text frames of the story
var sel = doc.selection[0].parentStory.textContainers;
for (i = sel.length - 1; i >= 0; i--){
	var img = sel[i].parentPage.allGraphics;
	for (j = 0; j < img.length; j++){
		var picFileName = img[j].itemLink.name;
		picFileName = picFileName.slice(0, picFileName.lastIndexOf(".")) + ".png";
		picFileName = "\r<img src=\"img/" + picFileName + "\">\r\r";
		sel[i].paragraphs[0].insertionPoints[-1].contents = picFileName;

After placing the image tags, it remains to arrange the remaining tags (text and table ones) by using the code shown in the previous articles on this topic, and export.


I will give the script that converts hyperlinks into the html code with only one comment: the arrangement of the hyperlinks tags is performed immediately throughout the document, for all stories. Therefore, it is recommended to perform it before all other transformations.

	var doc = app.activeDocument;
	var h = doc.hyperlinks;
	for (i = h.length-1; i >= 0; i--){
		var u = h[i].destination;
		var s = h[i].source;
		var uText = u.destinationURL;
		var sText = s.sourceText;
		sText.insertionPoints[-1].contents = "</a>";
		sText.insertionPoints[0].contents = ">";
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = "_blank";
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = " target = ";
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = uText;
		sText.insertionPoints[0].contents = SpecialCharacters.DOUBLE_STRAIGHT_QUOTE;
		sText.insertionPoints[0].contents = "<a href = ";
	app.findGrepPreferences = app.changeGrepPreferences = null;
	app.findGrepPreferences.findWhat = "</a>";
	app.changeGrepPreferences.appliedCharacterStyle = doc.characterStyles[0];

	app.findGrepPreferences = app.changeGrepPreferences = null;
	app.findGrepPreferences.findWhat = "<a href.+?>";
	app.changeGrepPreferences.appliedCharacterStyle = doc.characterStyles[0];

This article is the final in a series of articles on the export of stories from InDesign to html. As a conclusion, I note that all the scripts shown here and their fragments are, let's say, non-commercial versions. It is possible to simplify all the work on exporting to html even more, make all processes even more convenient, make the program perform even more operations, which otherwise you would have to remember and perform manually from time to time. There are no limits, though we can set our own limits, being sure that the possible is impossible. But, if the meaning of everything that has been written here is clear to you, it means that you can break all these limits on your own. If not, there is always "feedback", e-mail and other means of communication that can be used to contact specialists. Ask them questions, value your own time, do not put up with routine work, look for ways to get rid of it and task the computer with it — it’s not for nothing that it has been given so many cores "under the hood"! :)

No comments.