Back

If your email is not recognized and you believe it should be, please contact us.

  • You must be logged in to reply to this topic.Login

CS6 InDesign to HTML (Font Size)

Tagged: , ,

Return to Member Forum

  • Author
    Posts
    • April 16, 2014 at 12:08 pm #68016
      Brian Kester
      Member

      Hello,

      I have been given the task of taking an InDesign layout from CS6, and building it in HTML/CSS. The challenging part is that it is required to be 1:1 pixel perfect. When I open it in Google Chrome–which is going to be the standard browser it’s opened in–the font raggs differently.

      When I overlay a PNG of the HTML site, and a PNG from the InDesign file it is no where close to pixel-perfect.

      Does anyone have any experience with a similar ask? In CS6 you can’t specify type pixels, I’m not it would matter if you could, because it seems that InDesign is using it’s own conversion for what it considers a pixel.

      Please help!!!

    • April 16, 2014 at 12:34 pm #68017
      David Blatner
      Keymaster

      You need to look at in5 from ajarproductions.com

    • April 16, 2014 at 1:44 pm #68020
      Brian Kester
      Member

      Gotcha. Sorry for the confusion.

      I took a look, but I don’t think this will be the solution. Let me give a little more context.

      We have created InDesign templates that we are going to allow people to build HTML emails with. They will create a low-res comp using modular content from a CMS system. I will need to create the HTML using the modular content from the CMS system and use CSS to stylize the content to match the low-res InDesign comp.

      It appears with in5 that you are generating the HTML content from the InDesign and sending that out. I actually need the CMS to generate the HTML content and use CSS to just stylize/postion it.

    • April 16, 2014 at 1:53 pm #68021
      David Blatner
      Keymaster

      Wow. If you can get html emails out of InDesign, I want to see that solution! :)

      But going back to your original post: There is no way to make live text wrap the same in HTML as it does in InDesign. Just ain’t gonna’ happen. InDesign has a very sophisticated text wrap algorithm and far more typographic formatting than is available in HTML.

    • April 16, 2014 at 2:24 pm #68023
      Brian Kester
      Member

      I’m glad you see my pain point here.

      I have tried really dumbing down the InDesign typo settings. I have removed auto-kerning, composer, and set letter-spacing to word-spacing to 100%. I have only continued down this road because I was informed that it has been done with iPad materials here where they were created in InDesign and recreated in HTML5 with pixel-perfection.

      I just don’t see it honestly, I’m preparing my flag pole to raise my white flag. InDesign in it’s nature was not designed to be creating HTML Emails. Any advice on a better program that could provide templates out to an agency where they could mock up an email and provide back so that I could code it in HTML/CSS?

      Thanks for your advice/knowledge

    • April 16, 2014 at 2:38 pm #68024
      David Blatner
      Keymaster

      “InDesign in it’s nature was not designed to be creating HTML Emails” –> Truer words were never said.

      The “pixel perfect iPad” things you’re talking about are like taking the entire page and exporting as PNG or JPEG (file > export). The whole page is a picture. But not where some of it is a png and some is live editable text.

    • April 17, 2014 at 7:16 am #68025
      Brian Kester
      Member

      Do you think Web Fonts would help resolve this issue, or am I still going to run into the same brick wall? I considered using a Google Font locally on my desktop, and calling upon @font-face through the HTML tactic.

    • April 17, 2014 at 9:10 am #68027
      David Blatner
      Keymaster

      It might help a little bit to make sure you’re using the same font, but you could test that even more easily just using a font that is already everywhere, such as Georgia or Verdana. However, it will not change the problem with text wrap (how the words break from one line to the next).

      This is one of the reasons Adobe invested so much in the Text Layout Framework:
      https://www.adobe.com/devnet/tlf.html
      But that is Flash-only. So it doesn’t really help with HTML.

      Doing high-quality text flow is calculation intensive, and HTML isn’t fully suited for it. There is plenty of work being done to help HTML, but it’s slow going. For example, Google just shot down the CSS Regions and CSS Exclusions project that adobe had been spearheading. https://blogs.adobe.com/jnack/2010/11/adobes-enhancing-webkit-for-better-typography.html

  • Author
    Posts
Viewing 7 reply threads
  • The forum ‘General InDesign Topics (CLOSED)’ is closed to new topics and replies.
Forum Ads