Export to HTML5 - Not following InDesigns crop-box rules

[talented_realist0101]

I am using the Export to HTML5 feature that's now an option under Publish Online.

But does aanyone know how to make the InDesign HTML5 Export crop at the boarder of the InDesign document? For example when you, export an Indesign file normally any overlapping images or shapes that fall outside of the crop box will be cropped. However with export to HTML5 this for some reason isn't happening.

Essentially, I have a few videos that purposely overflow out of the document (for the design asthetic I've gone for). But when I export for HTML5 it has kept everything outside of the crop box, so none of the pages are the same size as it is contained things outside of the boarder.

Any thoughts on how to solve this?

I've attached aa screen shot, and you can see where the border should be cropping (anything with white space should be cropped).

I have the most up to date version of InDesign that was updated this week.

[Robert at ID-Tasker]

There is nothing with white space - to be cropped? 

[talented_realist0101]

Not sure why you can't see the white space?! It's at both the bottom and the right hand sice of the original screenshot I upladed.

For addditional guidanxce, here is an additional screenshot with showing the crop box in InDesign (which is exactluy how I want the file to display when I use the export as HTML5 option).
 

[Robert at ID-Tasker]

You mean white background should be transparent? 

[talented_realist0101]

No the white background shouldn't be there at all. It's outside of the crop box. 

Can you see how on the latest screen shot, everything is cropped.
The grey area outside doesn't show when using the publish online feature.

That's what I'm wanting for the export as HTML5 feature, but for some reason it's exporting everything outside of the crop box too.  It's something that's very basic when exporting for print or normal digital formats, but for some reason the crop box is not working when exporting as HTML5, that's what I'm trying to solve. 

[Robert at ID-Tasker]

You mean it should be cropped to the black "background" area? 

How is it created in the InDesign? One image - or bunch of elements?

Can you show us view in InDesign - in the NORMAL not PREVIEW Mode - with all edges visible? 

[talented_realist0101]

Kind of... even some of the background area overlaps the crop boxes. But it should just be cropped to the width and height or the document.

It's created using multiple elements, costing of backgrounds, text, animated images that move (as it's all interactive and animated for web). 

Sure, attached is a screen shot in normal mode. 

 

[Robert at ID-Tasker]

@talented_realist0101

Looks like export to HTML5 isn't fully finished yet...

Have you tried scale down your project? Maybe it's too complicated? 

There is also in5 - 3rd party solution. 

[talented_realist0101]

In5 is unfortuntly garbage unfortuantly. I gave the free trial a go and the results were all over the place. Alignment of images was all over the place, drop shaddows didn't convert over, animatiions were in correct. Defo wouldn't advise In5 to anyone that's reading this. Appreict the thoughts though... 

If anyone else has any suggestions it would be grand. 

[Robert at ID-Tasker]

@talented_realist0101 

Sorry, never used it - others were quite happy...

There is one more solution - but not finished yet - I'm still working on it.

[BobLevine]

Garbage? You clearly do not understand how it works or how to use it properly. You also don't seem to understand the limits to what can and cannot be done in InDesign that will translate properly to HTML.

[talented_realist0101]

Whilst this is true about not having a knowledge of HTML, it's also the reason I got in touch with in5 directly to explain the problem I was having and to get some guidance on what I was trying to achieve. They talked me through the steps, but the otuput was just really really poor, as mentioned nothing looked like it did on the InDesign file. Nothing aligned, it was really poor.

At least with Adobes Export for HTML5 fuction the export of the file actally looks beautiful and exactly as the designer intends (apart from how it's cropped). The only problem is that it's not following the crop guides and even that is partly a lie as it's using the crop guides on the left and top of the page perfectly, but it's not on the right and bottom of the page for some reason.

I really can't see in5 being around any longer if there sole purpose is to allow InDesign users to connvert files to HTML5, if Adobe is now supporting this directly themselves. 

[Robert at ID-Tasker]

@talented_realist0101

So you want it as a separate elements - or as a flattened image?

[talented_realist0101]

Yeah seprate elements is what I need, as all of the individual frames on my layout screen shot are animated using the InDesign Interactive>Animate fuction. Essentialy each row of images is on an infinity scroling carosell. 

[talented_realist0101 · Accepted solution]

Some one helped me come up with a Solution on Reddit thank god. For anyone that's wanting a solution to the same problem... Duplicate the page, then Select All and Group everything . Then hit Copy. Then hit Cut (which is super important and the stage I was missing previosuly). Then draw a new Frame the full size of your page boarders. Then go Paste Into.

When you export as HTML5 now everyhting will be confined to the page boardes / crop box.

One thing to note is that the HTML5 file still doesnt fit the screen size you're opening it on, but I belive this can be adjusted on the hoasting platform pretty easily another gent was saying.