newsdev / ai2html Goto Github PK

This can occur when text associated with one artboard overlaps a second artboard. The text is rendered on the second artboard, even when it is hidden by a mask.

Is there anyway to make just some text layers clickable? Something like "click here" and the hyperlink in the word?

By the way, awesome tool!

Add this as output: json.
Eventually, this setting should be an array so you can have multiple outputs.

Medium-style progressive image loading: very low-resolution, blurry images that give readers quick-loading visual feedback until the full-resolution artboard loads.

We could probably bake the base64 encoding of artboard thumbnails directly into the html.

Probably by setting the script environment based on the existence of scoop fields in the config.yml, or something like that.

to another library (preferably an npm package) so that other libraries can use it and to single out that feature for community involvement.

I had wanted to write an ai2svg library a while back and may still need to. Using your parser would save me a lot of trouble.

Sometimes, because of site margin and padding, the area containing a 300px graphic is slightly less than 300px, causing a graphic to not load. Might be worth having an option to set the min-width to 280px to protect against that.

1. Duplicate artboard names if user makes copy of an artboard that has ":XXX" notation.
2. Artboards that begin with numbers create id's that are difficult to use in css or may not work at all in html. Add warning or add namespace prefix to all artboards.

This would prevent inadvertent wrapping of point text at the edge of your artboard. This happens because text may be longer in a browser than in Illustrator because of font rendering differences.

The downside of this is that text that is too long will be hidden.

Not sure which way to go on this.

It would be great if this was available in homebrew for people to easily install / work into their deployments.

Great work on this by the way!

If you create a new Illustrator document and run ai2html before saving the document at least once, there's an ugly error message:

Error 21: null is not an object.
Line: 1006
-> if ( parentFolder[0]=="ai/" && publicFolder.exists ) {

Would be better to have it say "You need to save your Illustrator document before you can run ai2html"

To make it easier to target ai2html output.

The Nice Work! dialog is shown twice on running the script.
System Info:
Illustrator Release CC 2015.0.0

move to vw, vh, rem units instead of absolute values for font sizes...
may be tricky but if responsive typography is the goal maybe worth exploring this

file under enhancements

This config block incorrectly includes the resizer script, even though include_resizer_css_jsis set to false:

	ai2html-settings
	settings_version: 0.60
	create_promo_image: yes
	project_name: ai2swiper
	image_format: jpg
	write_image_files: yes
	responsiveness: dynamic
	html_output_path: ../src/slides/
	image_output_path: ../../public/_assets/
	use_lazy_loader: no
	include_resizer_classes: no
	iinclude_resizer_css_js: no
	include_resizer_script: no
	include_resizer_widths: no
	max_width: 
	output: multiple-files
	png_number_of_colors: 128
	jpg_quality: 60
	show_completion_dialog_box: true
	last_updated_text: 
	headline: 
	leadin: 
	summary: 
	notes: 
	sources: 
	credit: By The New York Times
	page_template: nyt5-article-embed
	show_in_compatible_apps: yes
	display_for_promotion_only: false
	constrain_width_to_text_column: false

It looks like something is overriding included_resizer_css_js to yes:

Blanking out responsiveJS in script fixed the issue for this project, but that breaks all resizing:

	if (docSettings.include_resizer_script=="yes") {
		responsiveJs = '\t' + getResizerScript() + '\n';
		responsiveCss             = "";
	}
	responsiveJs        = "";

Moving the resizer settings to the end of the config also fix the issue:

	ai2html-settings
	settings_version: 0.60
	create_promo_image: yes
	project_name: ai2swiper
	image_format: jpg
	write_image_files: yes
	responsiveness: dynamic
	html_output_path: ../src/slides/
	image_output_path: ../../public/_assets/
	max_width: 
	output: multiple-files
	png_number_of_colors: 128
	jpg_quality: 60
	show_completion_dialog_box: true
	last_updated_text: 
	headline: 
	leadin: 
	summary: 
	notes: 
	sources: 
	credit: By The New York Times
	page_template: nyt5-article-embed
	show_in_compatible_apps: yes
	display_for_promotion_only: false
	constrain_width_to_text_column: false
	use_lazy_loader: no
	include_resizer_css_js: no
	include_resizer_classes: no
	include_resizer_widths: no
	include_resizer_script: no

Exporting artwork with text elements that contain a dollar sign ($) character appear to have a bug, unless the text element ONLY contains the character.

The problem seems to remove the dollar sign character AND the very next character in the string, but not affect any other content.

I can resolve the issue by manually replacing each instance of '$' to '$', but am hoping there is a better way to fix it, without manual editting of text inside the .ai file.

I've set up a page showcasing the problem here.

Here's how each artboard in the .ai file that page is out put from looks:

Any help would be hugely appreciated.

I've been seeing some tracking misalignment in my html exports, and found this line

// pHash['tracking'] = pHash['tracking']/1000;
pHash['tracking'] = pHash['tracking']/1200;

(https://github.com/newsdev/ai2html/blob/master/ai2html.js#L1626-L1627)

When I instead use the /1000 line, things start lining up again. Is there something i'm missing why this was commented out? Thanks.

• Set an aspect ratio or height to the container before the image loads
• Fire resize event on image load, as well as initially
• Ensure that orientation change triggers resize

Need to add "-box" to the css selector.

Minor bug...

when exporting the HTML the complete dialog pops open twice confirming the operation completed successfully

Possible solution: ai2html-fonts text block. Will need to determine easiest way to enter all the elements of the hash that are needed.

http://antirez.com/news/99

This script keeps throwing these warnings when I'm using swatches I've defined (which are really just RGB colours).

This will also involve making sure the width of the text block in html matches the width in ai.

Especially for mobile sizes on short deadlines, it would sometimes be preferable to just have a flag that bakes all text into a responsive image instead of worrying about alignment, text wrapping, etc.

Hey NYT!

I just wanted to let you know the Delicious links on http://ai2html.org are no longer working. Looks like the new syntax is:
https://del.icio.us/archietse/ai2html,nyt

Thanks so much for this great script!

Would be useful in some situations to be able to decouple generated filenames from the filename of the parent AI file.

Right now an AI file with the filename iraq-and-syria-maps-from-may-15.ai and with artboards big and small will (with the output: property set to multiple-files) generate html files named:

iraq-and-syria-maps-from-may-15-big.html
iraq-and-syria-maps-from-may-15-small.html

It would be nice to be able to set something like generated_files_prefix: maps in the ai2html-settings block so that in this situation we can instead generate:

maps-big.html
maps-small.html

Safari executes the else statement in this block of the resizer script for a clickable link promo because the parent node is an anchor tag with the default display of inline and width reports as 0:

if (+minwidth <= width && (+maxwidth >= width || maxwidth === null)) {
    var img = el.querySelector('.g-aiImg');
    if (img.getAttribute('data-src') && img.getAttribute('src') != img.getAttribute('data-src')) {
        img.setAttribute('src', img.getAttribute('data-src'));
    }
    el.style.display = "block";
} else {
    el.style.display = "none";
}

Explicitly setting display: block for .g-ai2htmlLink fixes the issue.

Hello NYT devs,

Why does this limitation appear in AI2HTML...

The script currently only sets one style per paragraph, so custom styled words or characters within a paragraph are ignored. Each paragraph’s style is determined by the middle character in the paragraph.

Thanks,
/t

If you run ai2html while editing an opacity mask, the script behaves as though the contents of the mask is the graphic: ai2html creates a new settings block (within the mask), ignoring any that are in the "wider world" of the ai file outside the mask. If you run the script again, it renders the mask as your graphic.

This meshes intuitively with how AI itself handles edits to opacity masks: while you're in "Opacity Mask" edit mode, your layers panel is replaced with the objects that exist within the mask you're editing.

Hopefully there's a way to check whether the user is editing an opacity mask when the script is run.
This problem is similar to #35, relating to isolation mode.

Will probably make this a setting in which you put a url and that becomes the href. If the setting is blank, then it won't add the anchor tag.

... this will help catch typos and version compatibility problems.

Should add a check to make sure isolation mode is off.

Is it possible to use the script in CC 2015?
I installed the script, found it inside the scripts folder but it does not produce any output.

type object that is rotated and has a layer style applied (drop shadow) is within a group with a css property defined -

doesn't happen with render_rotated_skewed_text_as: image is set.

not essential, but type on a path to html text would be handy

we sometimes use straight, not curvy, lines as the baseline for type

For some charts we just have to acknowledge that there is no way to make a 300px version for phones. instead, we need an option to display a zoomed-out version of the desktop chart with a note saying "pinch to zoom".

ai2html should be aware of this option and display the note and add this code snipped to re-enable pinch-zoom:

<script>
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0');
</script>

To speed up work when an image has already been created and you only are editing the labels.

If we are encoding base64 versions of artboard thumbnails per #59, it might also be possible to bake small symbols into the output, as well. Those baked-in symbols could then be applied as background images for free-floating divs.

This would let us have, say, an "explosion" symbol on a map that stays the same size as its artboard resizes.

Sometimes, after pasting text into the settings box, running ai2html causes a "can't paste type" error, presumably because of some special character or encoding issue:

I added the file "sample files/text-placement-test.ai" for testing text placement. The current release version doesn't handle text with large leading very well:

Encountered a display bug that only appears when trying on a physical device (not showing upon inspection on Dev Tools). Text that should be the same size sometimes appears larger, despite having the same markup, applied styles.

Take this page on an iPhone SE or 6: https://www.bloomberg.com/politics/graphics/2017-wef-global-risks/

We actually used a JS fix to correct the problem on regular portrait view, seen by most readers. But if you view the page with your phone turned to landscape, the display inconsistency that we encountered will show up, where the font size in boxes with more text (from my guess, when its originating text box in AI is larger than its parent in the original AI file) becomes enlarged. If you code inspect with the Safari debugger, with the page on the phone, the computed size of the <p> is sometimes 18px, sometimes 14px (the correct size). Markup is the same and the same classes are being applied to both. We also tried dropping all of our custom classes from our environment (in fact, the bug will appear even on the ai2html output, prior to injection in a template).

So, am not sure what's happening, but thought it was good to just point out! It might be some very fringe way of using Illustrator (tables aren't probably the best to use with ai2html...). Can provide more infos later if this is a familiar problem.

But only show if there are errors.

It would be fantastic if there could be a way to allow for dynamic text resizing in responsively exported graphics.

While it might seem like this goes against the spirit of the project, I would argue it still provides functionality over SVGs as the text is selectable and screen-reader friendly.

In terms of implementation, we could use font-size: *vw. It would be an interesting challenge to translate font size to vw units...

Let me know your thoughts :)