HTML/CSS match to InDesign layout

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!!!

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]

Similar Messages

How to 'Publish' layout or extract the HTML/CSS?

OK, I created a nice layout, how do I "Publish" it -- i.e. extract the HTML/CSS so I can use it on an actual web site page? The "Reflow Overview" and other such Adobe "Getting Started" videos don't say and when I looked for such a thing as "Extract" or "Publish" or even "Upload" [ala Flash and/or Dreamweaver), all I found was "Save" and "Save As" which saves the Project as an arcane RFLW file.
Since I found no other question like this on the Forum, I'm beginning to wonder if I'm missing something obvious!

There was a recent update to a thread on this:
How to export Edge Reflow work file to Dreamweaver
Long story short, it will be easier to export code in the next release of Reflow. Until then you can get the HTML and CSS from the preview folder or you can get just the CSS from the code popover by clicking on the "<>" button on the bottom bar:
Hope that helps and thanks for using Reflow,
Chris

HTML+CSS conversion issue with nth-child() selector

Why doesn't Adobe Acrobat XI Pro convert the below HTML code correctly when I try to create a PDF from it?
I've simplified the actual code significanly in order to present the problem in its simplest possible form. The code below uses the CSS "counter" feature to modify <li> elements according to a specific pattern. This code enumerates and indents every third line in the progression 1,4,7,10,13, ...
In Firefox and Internet Explorer, this code is displayed correctly, but Acrobat XI Pro ignores the lines with the "nth-child(3n+1)" selector which contain directives to hide line enumeration on non-matching lines and to indent text on matching lines. Acrobat XI Pro instead displays line enumeration for all lines and doesn't indent text on any line, as if the two directives containing the "nth-child(3n+1)" selector were not present at all.
Is this a bug or is it an unsupported feature in Adobe Acrobat XI Pro?
Whichever the case, any suggestions on a not too labourious alternative method to achieve the same result?
As things are, I've been forced to resort to using the so called "poor man's nth-child selector" workaround (abouthalf.com/development/poor-mans-nth-child-selector-for-ie-7-and-8/), which requires manual specification of each line's content with ever-increasing code extension/repetition. It gets the job done, but in a very messy and time-consuming way, and it only works with pre-defined static content. In terms of size, the difference is that of less than 1kb CSS file size when using the nth-child() selector vs more than 75kb CSS file size when using the above mentioned workaround, for a 250 line predefined stylesheet.
Surely there has to be a better way to deal with this issue? Support for a core HTML/CSS feature that generates ordered layout patterns for line enumeration, indentation, etc, would seem like a top priority feature to support in a product such as Adobe Acrobat Pro, given its focus on page layout...
<html>
<head>
<style type="text/css">
body { margin: 75px 90px; }
li { list-style-type: none; counter-increment: listing; }
li:after { content: counter(listing); float: right; margin-right: -2em; visibility: visible; }
li:not(:nth-child(3n+1)):after { visibility: hidden; }
li:nth-child(3n+1) { text-indent: 25px; }
</style>
</head>
<body>
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
<li>Line Four</li>
<li>Line Five</li>
<li>Line Six</li>
<li>Line Seven</li>
<li>Line Eight</li>
<li>Line Nine</li>
<li>Line Ten</li>
</body>
</html>

Any suggestion what the issue and/or solution might be?

CSS - Table width breaking layout

I have a CSS issue with page layout. I have created a layout where I have a main wrapper that encompasses the page. Inside the wrapper are three sections: header, content, and footer. These all adjust 100% to the width of the browser. I will have tables of varying sizes within the content area. My issue is that when the browser goes to a size smaller than the width of the table, the content area will scroll to the right, but the rest of the areas will not stay at the same width as the content area. The result is that the header and footer will remain at 100% in the viewable area, but you have to scroll to the right to see the rest of the information. This breaks the layout. What I would like to see is that the header and the footer will always match the width of the content area and so if a table happens to push to the right, the header and footer will always match it. Here is a link to an example: http://www.artomicblast.com/csstest/interior.html.
You'll see that if you have the browser filling up the whole screen, everything looks fine. As you start adjusting the size down, the center section will reach a point where you get a scrollbar and it breaks out of the width of the screen so that you'll see the header and footer to the left, and it sticking out to the right.
Is there a way to make it to where the outside wrapper will keep everything contained no matter the size of the table in the content area?
Thanks!

I have a CSS issue with page layout. I have created a layout where I have a main wrapper that encompasses the page. Inside the wrapper are three sections: header, content, and footer. These all adjust 100% to the width of the browser. I will have tables of varying sizes within the content area. My issue is that when the browser goes to a size smaller than the width of the table, the content area will scroll to the right, but the rest of the areas will not stay at the same width as the content area. The result is that the header and footer will remain at 100% in the viewable area, but you have to scroll to the right to see the rest of the information. This breaks the layout. What I would like to see is that the header and the footer will always match the width of the content area and so if a table happens to push to the right, the header and footer will always match it. Here is a link to an example: http://www.artomicblast.com/csstest/interior.html.
You'll see that if you have the browser filling up the whole screen, everything looks fine. As you start adjusting the size down, the center section will reach a point where you get a scrollbar and it breaks out of the width of the screen so that you'll see the header and footer to the left, and it sticking out to the right.
Is there a way to make it to where the outside wrapper will keep everything contained no matter the size of the table in the content area?
Thanks!

2 CSS Questions on my layout

Hi everyone, I have two CSS questions regarding my layout.
First off, it is located at:
http://robles.clunet.edu/~ssmi/tsr9/tsr9template.html
The CSS is embeded in the file (it will linked from a
different file once I am done with this design, but beside the
point)
My first question is about how I can keep the right top image
from being bumped down to the next line when the window is resized.
I want it to squeeze into some, but then at a point have the scroll
bars kick in.
My other question is how I could make the title image "The
Scott Report" centered between the two left and right images up
top.
Could anyone help out?
Thanks a lot!

Check the AppleCare number for your country here:
http://support.apple.com/kb/HE57
Call them up, and let them know you would like to be transferred to the Account Security Team.

CSS Centered & Fixed Width Layout

I'm trying to use CSS for building a new layout and do so without resorting to the old methods, like using tables. But I can't even get past a very basic thing using Dreamweaver CS5.5. I want the page layout to be a fixed width yet centered in the browser window instead of stuck to the left. Lots of web sites do this (even Adobe's main site).
In the past I would just create a parent table and simply give it a center alignment then build everything else inside of it. Easy. Unless I'm overlooking something obvious there appears to be no way at all to apply the same sort of alignment property to a DIV-based container. Dreamweaver provides lots and lots of other formatting options, but page alignment for that DIV object isn't there.
If I could just get the first big overall DIV centered on the page where I want it I think I could use absolute positioning on the DIVs inside of it.
I've searched around for examples on how to code CSS to make this work, but haven't been able to simply cut and paste the code into Dreamweaver to make it happen. I need to learn how to do this correctly using Dreamweaver's own CSS property dialog boxes.

If I could just get the first big overall DIV centered on the page where I want it I think I could use absolute positioning on the DIVs inside of it.
OMG no. You don't want to use absolute positioning at all, until you understand CSS positioning fully.
Read this to get an idea how to do your layout -
http://www.apptools.com/examples/pagelayout101.php
HTML & CSS Tutorials - http://w3schools.com/
How to Develop with CSS?
http://phrogz.net/css/HowToDevelopWithCSS.html
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
========================================
PRE-BUILT CSS LAYOUTS
For rock solid, commercial products that perform well in all browsers/devices, visit Project Seven:
http://www.projectseven.com/products/index.htm
Not Just a Grid CSS Framework (free)
http://www.notjustagrid.com/demo.asp
Ultimate Multi-Column Layouts (free)
http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layout s-em-and-pixel-widths
EZ-CSS Templates (watch the screencast to see how it works)
http://www.ez-css.org/css_templates
Dreamweaver CSS Templates for beginners (free)
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_te mplates.html
New DW Starter Pages (free)
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_l ayouts.html

Classic/static html+css export

Unfortunately i've never really figuerd out all that div-floating margin-and-padding-overlaping css mambo jumbo
I always prefered flash over html+css becouse of its logical visual approach and I even developed my own little news cms and we suppose to live happily ever after but apple crew that all up ;(
is it posible to make nice and clean layout in flash and then convert it to html+css?
with semantics like container symbol -> container div and buttons become functional links?
that would get smile back on my face :/
i would appreciate any help!

Unfortunately i've never really figuerd out all that div-floating margin-and-padding-overlaping css mambo jumbo
I always prefered flash over html+css becouse of its logical visual approach and I even developed my own little news cms and we suppose to live happily ever after but apple crew that all up ;(
is it posible to make nice and clean layout in flash and then convert it to html+css?
with semantics like container symbol -> container div and buttons become functional links?
that would get smile back on my face :/
i would appreciate any help!

How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
 <li><a href="/home" class="three-d">
 Dynamic
 DynamicArtisans
 </a></li>
 <li><a href="/demos" class="three-d">
 Work
 WorkWork
 </a></li>
 <li><a href="/deals" class="three-d">
 Blog
 BlogBlog
 </a></li>
 <li><a href="/about" class="three-d">
 Profile
 ProfileProfile
 </a></li>
 <li><a href="/about" class="three-d">
 Contact
 ContactContact
 </a></li>
 </ul>
</div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
 <title>Untitled</title>

 <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
 <style>
 .edgeLoad-EDGE-57204389 { visibility:hidden; }
 .block-menu {
 display: block;
 background: #000;
 .block-menu li {
 display: inline-block;
 .block-menu li a {
 color: #fff;
 display: block;
 text-decoration: none;
 font-family: 'Passion One',Arial,sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 font-smoothing: antialiased;
 text-transform: uppercase;
 overflow: visible;
 line-height: 20px;
 font-size: 24px;
 padding: 15px 10px;
 /* animation domination */
 .three-d {
 -webkit-perspective: 200px;
 -moz-perspective: 200px;
 perspective: 200px;
 -webkit-transition: all .07s linear;
 -moz-transition: all .07s linear;
 transition: all .07s linear;
 position: relative;
 .three-d:not(.active):hover {
 cursor: pointer;
 .three-d:not(.active):hover .three-d-box,
 .three-d:not(.active):focus .three-d-box {
 -moz-transform: translateZ(-25px) rotateX(90deg);
 -webkit-transform: translateZ(-25px) rotateX(90deg);
 -o-transform: translateZ(-25px) rotateX(90deg);
 transform: translateZ(-25px) rotateX(90deg);
 .three-d-box {
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
 transition: all .3s ease-out;
 -webkit-transform: translatez(-25px);
 -moz-transform: translatez(-25px);
 -o-transform: translatez(-25px);
 transform: translatez(-25px);
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 transform-style: preserve-3d;
 pointer-events: none;
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 .front {
 -webkit-transform: rotatex(0deg) translatez(25px);
 -moz-transform: rotatex(0deg) translatez(25px);
 -o-transform: rotatex(0deg) translatez(25px);
 transform: rotatex(0deg) translatez(25px);
 .back {
 -webkit-transform: rotatex(-90deg) translatez(25px);
 -moz-transform: rotatex(-90deg) translatez(25px);
 -o-transform: rotatex(-90deg) translatez(25px);
 transform: rotatex(-90deg) translatez(25px);
 color: #FFE7C4;
 .front, .back {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background: black;
 padding: 15px 10px;
 color: white;
 pointer-events: none;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
 <li><a href="/home" class="three-d">
 Dynamic
 DynamicArtisans
 </a></li>
 <li><a href="/demos" class="three-d">
 Work
 WorkWork
 </a></li>
 <li><a href="/deals" class="three-d">
 Blog
 BlogBlog
 </a></li>
 <li><a href="/about" class="three-d">
 Profile
 ProfileProfile
 </a></li>
 <li><a href="/about" class="three-d">
 Contact
 ContactContact
 </a></li>
 </ul>
</div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
 targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
 targetComp.getStage().play();" class="three-d">
 Dynamic
 DynamicArtisans
 </a></li>

Need help with getting images to look smooth (without the bitmap squares) around the edges. When I transfer the image from pictures, it sets itself into the InDesign layout, but with square edges. I need to find out how to get it to look smooth?

Need to find out how to get my images transferred into an InDesign layout without the rough edges, as with a bit map image, but to appear with smooth edges in the layout. I can notice it more when I enlarge the file (pic). How can I get it to appear smooth in the finished layout. Another thing too that I noticed; it seems to have effected the other photos in the layout. They seem to be
pixelated too after I import the illustration (hand drawn artwork...)? Any assistance with this issue will be greatly appreciated. Thanks in advance.

No Clipboard, no copy & paste, as you would not get the full information of the image.
When you paste you can't get the image info from the Links panel, but you can get resolution and color info either via the Preflight panel or by exporting to PDF and checking the image in Acrobat.
Here I've pasted a 300ppi image, scaled it, and made a Preflight rule that catches any image under 1200ppi. The panel gives me the effective resolution of the pasted image as 556ppi. There are other workflow reasons not to paste—you loose the ability to easily edit the original and large file sizes—but pasting wouldn't cause a loss in effective resolution or change in color mode.

Inserting HTML/CSS in a Tabbed Panel

I've been having trouble inserting HTML/CSS into a Tabbed Panel widget. In this case, the HTML/CSS is creating a text box with scroll bars (as described in an excellent workaround for getting scroll bars to work).
Has anyone else come across this situation?
Thanks!

I'm not seeing the same problem (the scrolling text box displays fine in the tabbed panel for me).
Does your HTML container fit within the content area of the panel?
Here are screenshots from Muse Design view:
and Preview in Browser (Firefox):
When you say it's not working, what exactly do you mean? What's happening?
Best regards,
Corey
Edited: Adding topic on creating scrolling text box for reference: http://forums.adobe.com/message/4327943#4327943)

When exporting my Indesign Layout with Images, the images disappear ?

When exporting my indesign layout the images disappear once exporting as a PDF print.
I have had several information bubbles appear claiming I need to alter my blend space due or colour settings ?
I have altered the blend space to rgb and still it does not work.
I have also unlocked all the layers in attempt for this to work.
My assignment is due in tomorrow and still I cannot get this feature to work
any help would be great !

CharlieLDavis1992 wrote:
When in preview mode they do not appear either.
If you understood my question and the images also disappear in InDesign when switching the screen to Preview mode, or Overprint Preview, that means they are set to non-printing in some way. Either they are on a layer set to non-printing, or they're set to non-printing on an individual basis in the Attributes panel.
>I am using the latest OS,
Not really helpful. OS X? Windows? Probably not relevant, as it turns out, for this problem, but you should be specific.
>The pdf appears in preview
Does that mean you are trying to use Mac Preview to view the PDF? If so, it may give you bad results. Mac Preview is not a godd general-purpose PDF viewer and is incapable of rendering complex PDF.
The first error dialog you show is what you would get when opening a file in ID that has different document color spaces than the default settings in your color settings file. That's not a problem, and to preserve the color appearances you would leave things as they are.
The second warning dialog indicates you are making an interactive PDF, which is RGB. If you are using CMYK images I don't think you'll avoid color shifts no matter what you do if you have transparency, but I don't do interactive PDF, so I can't give good advice here. If you are using RGB images, by all means your transparency blend space should be set to RGB.
Can you post a screen shot of the export dialog?

Indesign Layout and cross media .pdf conversion

I was hoping someone could help me with this.
I have many projects which I design for print that need to be posted to our website to be accessed by our members. We use a web hosting company that has an online web-based application for content management. Our usual method is to generate a .pdf file and post it to our website as a file our members can download.
The problem I have is that many times the final Indesign layout for print doesn't translate to .pdf without a moderate amount of changes to the layout (no bleeds, single 8.5"x11" pages etc.). This causes me to have to do the design and layout twice for a project - once for print and once for web.
Is there something out there (plug-in etc.) that will help me automate this process?

I think that the OP is actually looking to automate exactly what you described; I sometimes gin up some JS because I'll have five brochures in ten languages from which I need to generate three different flavors of PDF (e.g. lowres, print-ready, imposed). The sheer number of keystrokes involved make automation desireable.
Hey OP, how much Javascript do you know?

Installing Outlook 2007 HTML & CSS Validator in CS4

Hi everyone,
I have installed the Outlook 2007 HTML & CSS validator but when I go to look at the target browser list nothing appears.
The path that the tool was installed to is: C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS4\configuration\BrowserProfiles
Does anyone know if it will work with CS4? I have scoured Google and these forums to no avail.

The path is correct. Try restarting DW, then go to the Browser Compability window and see if it is there to enable in the Settings. If DW was running it will not appear until it is restarted.

Html + css editor

I am a java programmer who was told to design a jsp page using html + css.
i dont know css. is there a free WYSIWYG editor out there which takes into an account your css files and lets you use it somehow to make what you need.
keep in mind that when i look at the css style sheet i cant "imagine" how any of the stuffs in there would looks, and i dont know which divs must be inside other divs.

As long as you are able to get away with writing "dirty code" it isn't too much of a pain. When I am knocking a random page up I use 2 methods
1) Set the style for a tag using clas="..."
2) Set the style by adding the tag in your css
The first option allows you to tightly control what style gets applied where. The second option is for global setting of styles. By putting a <style> tag in your header you will find you are very quickly able to change and test your style changes. I am currently, at home, learning php with MySql served from apache. All I have to do is edit my css file in notepad, hit F5 on my browser and voil�, I can see the changes. I can develop my style sheets very quickly with this method. I prefer not to use graphic tools because of all the unnecessary tags they create.
Ted.

Html,css injector for firefox

i found a great math page, but it looks ugly,so i downloaded a css injector plugin for chrome ( https://chrome.google.com/extensions/detail/hiadkoalmmkgennhcldmdlndfgagkcim?hl=en )
after editing the css, it will be applied on all subpages on that math website, i was quite happy but, when i print it, or any webpage, there will always be url, date and tittle, which made it looks ugly and not professional, and there's no way to disable url, date and tittle in chrome.
does html,css injector exist in firefox?

There is no browser specific code for padding because padding is universally supported by all browsers. Why are you using negative margins?
Vendor prefixes are reserved for certain CSS properties that are not universally supported in all browsers yet like box-sizing.
-webkit- = Safari/Chrome
-moz- = Mozilla/Firefox
-o- = Opera
-ms- = IE
Nancy O.

HTML/CSS match to InDesign layout

Similar Messages

Maybe you are looking for