0

I am putting together a website that personalises a children storybooks with a wide range of options - text and illustrations.

As we build the website and being new to the design/book space, can you point us towards the best tools/packages to compose these books via our website and automate the composition so we can PDF and render it instantly to the user?

The composition (hiding/showing of different layers based on user choices, text changes based on user choices) will be done on the back-end, create a PDF (small res) to then show to the user through a flip page html book.

We will be receiving all base scenes, characters and personalised illustrations as individual files.

I am thinking of 2 main options:

  • InDesign (or similar) scripting on the back end
  • Using HTML5 canvas to hide/show layers

Thanks!

  • Hi Chris, I'm not entirely sure on what you are asking. Do you want to make a book and display it as is on a website, or do you want to create books and then display the covers on a site, or do you want to create a book and a separate website? Could you edit your question and elaborate on what exactly you want to do? – PieBie Nov 27 '18 at 9:06
  • Thanks, have added more detail on objective - mainly automating the composition (hide/show layers) to create a high res and down res PDF. The down res PDF would be shown to the user through a html5/javascript library – Chris Dec 12 '18 at 11:13
1

Your most professional bet is to purchase and use the Adobe InDesign Server-edition software which is made to handle automatic customer-facing input (in a legal, and non-free way) and render out the result for web and for print, following the world-class Adobe standards.

Or, you can choose to create your own round-about way to create a client-side personalized experience which can still be processed to 'bring' the input into Adobe standards by using the browser-based SVG technology.

With SVGs, (Scalable Vector Graphics) you can take advantage of quick client processing and their counterpart Illustrator's implementation.

Please start with the following principles:

  1. SVGs have a vast browser implementation which only grows and grows as time goes by and browsers get even more advanced in their handling of SVG graphics.

  2. Adobe Illustrator's SVG handling can export and import the format in a consistent way, but using only a limited sub-set of the browser implementation.

Thus you can invest in your proprietary software development to forego the official InDesign server option for your web-to-print needs by leveraging Illustrator's SVG features.

Now what do I mean by highlighting the differences between the browser-Illustrator differences when it comes to SVG? Please check out this linked example on CodePen:

https://codepen.io/VHall/pen/BrdwLz

Business card online SVG template

Open the link and type in some information if you wish. Note how the text is justified as you would expect: the name and title fields are center-justified while the phone numbers are right-justified. Now press the "Submit" button and receive the downloaded SVG file to your "Downloads" folder. Now open the SVG inside of Adobe Illustrator. If you have the appropriate Helvetica font, the Illustrator document created out of the interpreted SVG should look exactly the same as the browser's rendering.

The layer structure inside the opened SVG document in Illustrator

Now, examine the artwork to see various named rectangles around the text and the text itself. You will notice that all of the text is in fact point-text, and all of it is actually left-justified with the text's anchor point all the way on the left side.

The outline view showing the meta-art inside the opened SVG document in Illustrator

Conversely, create a new Illustrator document with area text justified to the right and export it as an SVG. When the document is closed and the SVG is opened in Illustrator, you will see your text turned from area-type into point-type with any indentations resulting from the right-justification being converted to the left-side anchor point at various locations.

What this means:

While in fact we do have an example of a client-side online template which can be opened in Illustrator and further processed for print, with the artwork in places where it needs to be, for some aspects of the art it is necessary to do a whole bunch of extra work inside the Illustrator original template as well as client-side javascript in the browser so as to make it work how you wish. In the base of the business card template, the Illustrator document which was used to create it contained invisible rectangles which signify the bounds of the text and they were named with special names to specify which kind of justification is needed for a particular block.

Furthermore inspect the codepen's javascript panel to see the various code for automatically 'justifying' the browser SVG point text to move left or right whenever the user types something. That's right, what is native and effortless in Illustrator's text handling has to have a bunch of logic in the browser to replicate that look.

Excerpt of javascript in the browser to drive user-interactivity for the online SVG

Yet if you are able to make it work and invest in the proprietary translation logic between web's SVGs and Illustrator documents then it could be a viable solution with no yearly subscription which may help drive your business for years to come. I will also add that this option is only viable if your artwork cases are limited in scope and you can safely rely on the fact that only features which you are comfortable with owning would be represented in your art.

  • 1
    Have you tired apache-fop it free and sortof does the same thing as indesigns xml processing, yeah you dont have adobes type engine but still – joojaa Nov 26 '18 at 19:37
  • Thanks @Silly-V. Good to understand differences. However I am not looking to go from HTML/SVG to InDesign/Photoshop necessarily. Our website would allow the user to select options which could be pushed to InDesign through a json of some sort to input into server side scripts - or options would hide/show layers on the html5 canvas where we will have brought in the base scene and all personalised options switched off. – Chris Dec 12 '18 at 11:19
  • As Illustrator has native support for the kind of svg implementation I describe, it can be used with automation as I wrote about, to achieve a consistency that could be beneficial on the grounds of browser adaptability (so you can forego drawing to canvas as SVG are drawings) as well as SVG's animation & design - it would be easy to find people who can make SVG designs for you in Illustrator and experienced coders who can also manipulate and animate those SVGs. But, as for InDesign - check out this product too: (ajarproductions.com/pages/products/in5) – Silly-V Dec 13 '18 at 0:04
0

You can google for "parallax scrolling storytelling" and you will find lots of good examples and tutorials. It's been popular for some time when telling a story on the web. I can recommend adobe Muse for building the page.

  • Hi Mikael, could you maybe edit your answer and elaborate on how the technique you mentioned can help the questioner solve their problem? – PieBie Nov 27 '18 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.