left menu mob button

Thanks to everyone who said "thank you" by clicking the link:

Олег Е.

За полезные скрипты и с Новым годом!

Фёдор Х.

Большое спасибо!


За скрипт для работы с таблицами в Индизайне.

New Video on YouTube:


(13.04.2021 7:33):

Алекс, техническая возможность есть. Под заказ, в индивидуальном порядке.

(Split Text By Paragraphs)

(12.04.2021 11:41):

Здравствуйте. Есть возможность доработать код, чтобы он разбивал на фреймы только по заданому стилю абзаца? То есть во всплывающем окне выбираем название стиля абзаца, скрипт проходит по тексту и если находит абзац с таким стилем, то в этом месте разрезает фрейм и ищет дальше.

(Split Text By Paragraphs)

(05.04.2021 19:55):

Олег, Вы правы, интерфейс стал крупнее из-за изменённого дизайна пользовательского интерфейса в версиях CC. Я говорю об этом в видео. Вероятно, в следующем обновлении я оставлю всего одно общее поле для изменения шага, а все кнопки напротив этого поля сделаю в один ряд. Думаю, это позволит существенно уменьшить размер окна. Спасибо за комментарий.

(Exact Table Alignment)

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.

Leave a comment:

Comment text*:
Security code*: