Allow class name compilation on the basis of character styles (applied in Illustrator)

[blzzz]

From a perspective of updatability, it makes more sense to use class names referring to "external" style definitions and not being part of the ai2html output. Another benefit doing so is that the HTML output of a ai2html project will generate less CSS code if no more "project specific" paragraph definitions are needed in it.

At the moment, it's already possible to define custom class names for divs containing text. Naming a layer that contains text in Illustrator results in a div with a class name consisting of the "slugged" parent layer name and prefixed by the nameSpace variable. However the class names generated for paragraph elements (wrapped into those divs) are not customizable. Even if a div's class name is customized, it's hard to access/overwrite paragraph style definitions like color or font-family. The reason for this are the generated style blocks making usage of selectors like #g-project-mobile .g-aiPstyle0. For that reason, it's nearly impossible to set paragraph style definitions like color, font-family, font-size or line-height by custom classes.

In this PR we propose the setting property characterstyles_to_classnames that – if set to yes – will..

• use the character style's exact name as the class name for the corresponding div (instead of nameSpace + parent layer name)
• prevent the generic class name that's applied to paragraph elements (i.e. g-aiPstyle0)
• additionally apply text-align as inline style to the paragraph element (as the only text property not controlled by Character Styles)
• prevent the output of the generic class name definitions inside the style tag

Character Styles in Illustrator work really well. As spaces are allowed in Character Style names (which won't get "slugged"), it's also possible set multiple classes per text element, i.e.: s-font-text s-font-text--strong

[blzzz]

I just updated and tested this PR to work with the latest version of ai2html.js.

These are the updates I've done:

• I propose the setting property characterstyles_to_classnames
• If the property is set to yes, the script will ...
  • ... scan the characterStyles of all imported text frame paragraphs's characters resulting in ranges that store the (first) characterStyles name in classNames.
  • ... generate paragraph HTML that translates all ranges into <span />s using the corresponding classNames property as class attribute.
  • ... skips the output of generic class name definitions and AI text style conversion – the only preserved property is text-align (applied in paragraph HTML).

These updates now support multiple character styles in a text field. As mentioned above Character Styles work really well in Illustrator. As spaces are allowed in Character Style names (and won't get "slugged"), it's also possible set multiple classes per paragraph range, i.e.: s-font-text s-font-text--strong.

[mbloch]

Thanks for sharing this code

I wasn't familiar with Character Styles -- we don't use them in our graphics department -- but I can see how they could be useful.

I'm not going to accept this PR in it's current form. My main objection is that the "characterstyles_to_classnames" option doesn't capture all the relevant information about text style. In particular:

• Illustrator users can manually override any of the attributes of the current Character Style (e.g. by changing the font size in the GUI). This PR doesn't check to see if style attributes have been overridden like this.
• Illustrator's Paragraph Styles also contain the full range of character style attributes, but this code doesn't look at whether or not a Paragraph Style has been applied.

This PR has given me some ideas for improving ai2html's default CSS generation:

• If Paragraph or Character Styles are being used, it would be nice to generate corresponding CSS classes (with names based on the original style names).
• If style attributes have been overridden (as described above), these extra styles could be associated with additional CSS classes and given a higher CSS "specificity," to override any relevant Paragraph and Character Styles.