7 Replies Latest reply on Apr 20, 2014 4:40 PM by rob day

    HTML/CSS match to InDesign layout

    BeekGeek82

      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. The text wrapping differently is the main issue at hand. I have tried every CSS hack possible to adjust letter-spacing and word-spacing, I've also explored Google Fonts to attempt to get a better match.

      Does anyone have any experience with a similar ask? In CS6 you can’t specify type pixels, I’m not sure 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!!!

        • 1. Re: HTML/CSS match to InDesign layout
          John Mensinger Adobe Community Professional & MVP

          True about the conversion. The best InDesign does in that area is 1pt = 1px, which mechanically cannot be an actual 1:1 relationship, seeing as 1px is not a constant.

           

          Furthermore, due to the nuances of its type engine, it's pretty safe to say attempts to replicate InDesign's paragraph composition in any other environment will certainly fail. Whoever it is insisting you do so simply isn't aware of what's involved. You'd have a better chance the other way around; using InDesign's controls to dumb down the composition to levels more typical of HTML/CSS, then promising to replicate that with HTML/CSS.

          • 2. Re: HTML/CSS match to InDesign layout
            [Jongware] Most Valuable Participant

            Agreed, it's way too optimistic. InDesign is a typographic design application, under development since 1999. Already in its very first version, its type engine came "fully grown and armed, with a shout", supporting enough advanced features to squash all but the very stubbornest competition (I'm looking at you, TeX).

             

            HTML/CSS, on the other hand, has had problems displaying "plain text" since its very beginnings. Only the very latest version of CSS finally addresses some typographic features (probably unnecessary to add, but anyway: with mixed results for different browsers).

             

            " ..it seems that InDesign is using [its] own conversion for what it considers a pixel", you bet it does. After all, there was a web crowd that outright demanded "pixels" to be a measurement unit in InDesign. Adobe did a have a stab at adding pixels, and if one would ask me, they did it the wrong way. But that's no fault in InDesign. ID has its roots firmly in the "real world", that is, you can design a document with a precision right up to the wavelength of visible light; and ID will happily produce output for it. Your "pixel", on the other -- Darker -- Side, "is" not a real thing. It has no width or height. If you think it does, it goes only for your screen. You may say, "but if necesasry I can hold a magnifier to my screen and count the itty bitty lights!" What if you do so, and discover that your screen does not consist of square pixels, but round ones, or hexagonal, or elongated rectangles? And any measurement would only be value for just your screen. What about mine, your bosses', or your client's?

             

            Following John's advice, here is a list of features you would need to switch off (as most are enabled by default) before you can even think of mimicking ID's sophisticated text engine in HTML:

             

            • ligatures
            • alternate characters
            • real small capitals
            • tabular or oldstyle figures
            • .. wait -- better switch off *all* OTF features
            • Paragraph composer. Use the dumb One Line At A Time And We'll See How Far We Get Composer.
            • Language based hyphenation.
            • Minimum/Optimal/Maximum Word Spacing (CSS must be using this internally, else it could not show justified text; however, I don't think you can set its parameters)
            • Letter Spacing and Glyph Scaling (although to be fair, these seem to be already off by default).
            • ~16 decimals of precision for every object, line width, text size, spacing, et cetera
            • any real-world based measurement unit.

             

            I probably forgot a few too.

             

            --- add.

             

            • Advanced character/class kerning
            • Optical kerning (not enabled by default)

             

            -- add2.

             

            • Balance Ragged Lines (off by default; but you can't use it)
            • Optical Margin Alignment (as above)
            • Align to Baseline grid
            • last line indent
            • Align to spine
            • justify last line (can only be achieved with span/div tricks)
            • tabs
            • about all internal hyphenation settings (CSS allows 'none', 'manual', and 'auto')
            • live text color outline (I may be mistaken, but I bet if it were possible literally everybody would be using it by now -- just like the dreaded "blink" tag did, before it was deemed illegal by federal law)
            • skewed text. I know, nobody with a grain of sense uses it in ID.[*] Still, you can't do it in CSS so I'm gonna list it anyway.

             

            [*] Except myself, by the way. But I don't use it willy-nilly, only after exhausting all the good and the bad options; then yes, I go for the Ugly look.

             

            Message was edited by: [Jongware]

             

            Message was edited by: [Jongware]

            • 3. Re: HTML/CSS match to InDesign layout
              [Jongware] Most Valuable Participant

              (ct'd)

               

              • stroke styles. You have a couple in CSS but ID allows "Wavy", "Feet", and "Woof".
              • tints of colors. CSS needs absolute values.
              • custom line ends, stroke alignment, corner options, and line end adornments
              • vertical justification (how could any page or frame based option work, on a continuous scrolling HTML "page"?)
              • anything involving live overprint (per definition a Real World Effect only)
              • 4. Re: HTML/CSS match to InDesign layout
                [Jongware] Most Valuable Participant

                (ct'd)

                 

                • any font inside a larger font family. ID is not limited to "Roman, Italic, Bold, Bold Italic".
                • any character (more correctly: glyph) inside any of those fonts, even if it doesn't have a Unicode
                • Type On A Path
                • Right Indent Tab
                • 5. Re: HTML/CSS match to InDesign layout
                  John Waller Adobe Community Professional & MVP

                  The challenging part is that it is required to be 1:1 pixel perfect.

                  Can I ask why that matters for this project?

                   

                  Print and web are two different media with different strengths/weaknesses and audiences.

                   

                  People read print. They scan the web.

                   

                  Usually print content (text/images but not formatting) is re-purposed for the web. It's not usually mission critical to reproduce print layouts to pixel perfect accuracy. It's somewhat akin to language translation - meaning and context is more important than literal word-for-word translation.

                  • 6. Re: HTML/CSS match to InDesign layout
                    rob day Adobe Community Professional & MVP

                    because it seems that InDesign is using it’s own conversion for what it considers a pixel.

                     

                    In CS6 and later double click the Zoom Tool to get a 1:1 ratio—the view will be the same as Photoshop's 1:1 (100%). In earlier versions the 1:1 ratio was at the 100% view.

                     

                    Here I have 800x600 pixel documents opened in both ID and PS:

                     

                    Screen Shot 2014-04-18 at 4.50.44 PM.png

                     

                    If you want to keep objects on pixel increments, set your Grid prefs to something like Gridline every 1px with 100 px subdivisions and turn on View>Grids&Guides>Snap to Doc Grid.

                     

                    As others have pointed out the typographic limitations are with HTML not ID.

                    • 7. Re: HTML/CSS match to InDesign layout
                      rob day Adobe Community Professional & MVP

                      In CS6 you can’t specify type pixels,

                       

                      Also, ID's points match Photoshop's pixels when the Photoshop document's resolution is set to 72ppi.

                       

                      Screen Shot 2014-04-18 at 5.17.30 PM.png

                       

                      Here with HTML 28 px in Firefox:

                       

                      Screen Shot 2014-04-18 at 5.59.19 PM.png