Netscape, MSIE, Opera and DIV positioning

Fixed up two of the issues in regards into cross-browser compatibility with CSS positioning. It seems that Netscape and Opera take the width property as a starting point, then add the padding and border to this width; whereas MSIE reduces the content by these amounts. The end result is that each of the browsers rendered the page differently from the same content. On the front page, the main content box that this text appears in was about 12 pixels wider and overshot the edge of the topmost image.

The first possible way of solving this is to write some client-side Javascript to change using document.write or leverage some preexisting code in the mungenetengine. This code permits me to have PHP interpretted from within the MungenetCMS and rendering content conditionally. I look at the browser and render the CSS entry differently for the different browsers.

As a side result of this, Netscape 6 and Opera 6 users will also see PNG-24 graphics with transparency (check out the menu text to the left between the two browsers.)

In another subtle way, this is another reason to use server-side scripting and dynamically generated content. All it took to implement were some extra content holders with PHP to read the $HTTP_USER_AGENT.

Netscape seems stricter in its interpretation of the CSS positioning. For instance, in the original navigation box to the left I had placed a height: 430px; command. MSIE ignored this when the content grew larger than 430 pixels. Netscape didn’t expand the box and closed the box (resulting in a bogus looking clip). This is an advertisement for looking at sites with more than one browser to ensure you are writing clean code.

Another issue is that Opera seems to render my footer very differently and interpreting the offset from the content area wrong. Netscape and MSIE get it correct. So I’ve written a visible: hidden; for Opera. Sorry, no footers for Opera.

Small clean ups on the CSS to further remove tables, and reduce the size of the CSS download. Apart from some mis-written URLs (which I think are valid according to RFC1738) this site also passes the W3C Validation for HTML4.01 Transitional.

From what I can ascertain, MSIE is wrong in its calculation of ‘content width’ and NS6 and Opera are correct. (If you are really, really interested in reading specification documents: W3C on CSS content width) Either way, it’s still the designer’s responsibility to ignore the incompatibility (and upset Netscape/Opera users? wrong answer) or workaround/fix using server or client side scripting (correct answer).


Update: Opera 7 correctly renders the CSS margins and relative positioning. Fixed my code to catch this, server side. This fix breaks old Opera; but I suspect Opera users will upgrade. Safari seems to be close, at least in their build 48. From what I have read, it will get way better in the release version.

InDesign 2.0: Adding Tab to Table Cells

Stephen Canning from Creative Consultants asked if there was a Windows version of the Add Tab to Cell Contents Script (MacOS .sit from adobeevangelists.com).

I found an hour spare, quickly relearnt Visual Basic, and managed to pop this out:

Add Tab to Beginning of Cell (zip downloadable)

Just download, unzip and place the .exe into your InDesign 2.0 Scripts folder.

Select Table Cells you would like to insert a Tab Character into, then run this by double clicking on the script in the Window>Scripts palette.

InDesign 2.0: Pasting As Text Only on Windows

Tim Cole has been hassling me to do this for 12 months. Today he found me in a receptive, VB mode, so here it is.

Paste as Text Only (Windows zip downloadable)

Just download, unzip and place the .exe into your InDesign 2.0 Scripts folder.

Instead of using Edit>Paste, select the insertion point or textframe you wish to paste into, and using the Windows>Scripts palette, double click on this script. It will then paste as text only — no formatting, into relevant item.

For MacOS users, Tim has a MacOS version here: Paste as Text Only (MacOS .sit from adobeevangelists.com).

InDesign 2.0: Photoshop to InDesign workflow

[1546] InDesign CS LogoVisit the new InDesign Prepress Section: Adobe InDesign: Prepress Techniques

There are a variety of methods for taking a Photoshop file and placing to into InDesign. After over a year of InDesign 2.0 in production use, I thought it opportune to expose another workflow choice taken by these customers. It directly relates to the placement of files from Photoshop into InDesign 2.0 layouts.

Apart from supporting the traditional TIFF (.tif) file format, InDesign also permits the placement of JPEG (.jpeg, .jpe, .jpg), Macintosh PICT, GIF, Portable Network Graphics (PNG) and other bitmap-style formats.

The most commonly touted method is to save an Adobe Photoshop .psd file, and place this into InDesign 2.0. Transparency, otherwise known as alpha channel support, is fully supported in InDesign 2.0. What does not work, however, are vector layers. When placed into InDesign 2.0, vector layers including text layers are rasterised at the resolution of the Photoshop file (or transparency flattener, depending on the mechanics of the file).

[1340] 01_transfile.jpg

Example 1: Photoshop image, containing Transparency as shown by the checkerboard pattern.

[1341] 02_transplaced.jpg

Example 2: The same Photoshop image, containing Transparency, placed into InDesign. The transparency is respected.

With Photoshop 6.0, and included in Photoshop 7.0, Adobe added the ability to save a Photoshop PDF file. Photoshop PDF has many benefits, and also shares many of the features of the Photoshop PSD format.

This format, like the Photoshop PSD format, has the following features

  • Transparency support.
  • Photoshop layers. including text layers, adjustment layers, layer masks etc are saved in the same file

Additionally, Photoshop PDF has the following features that Photoshop PSD does not have:

  • Its PDF. can be displayed in the free Adobe Acrobat Reader
  • Vector layers. keeping text/vector shapes kept as vector shapes for crisp printing and screen viewing)
  • Security. using the security features of Adobe PDF, your images can be locked from viewing/editing by other people.
  • Compression. images can be compressed using ZIP(lossless: no pixels are hurt) or JPEG (lossy: image data is changed)

With InDesign, Adobe has added support for the placement of PDF files without having to resort to “making and EPS” to ensure quality output. InDesign 2.0 also permits the placement of PDF files that contain transparency information – and holds the transparency information.

To save a Photoshop PDF for placement into InDesign, the go to File>Save As.

[1342] 03_pdf.jpg

Example 4: File>Save As. Choosing Photoshop PDF, here I am saving the layers (permitting late stage editing of the text layer if I wish)

[1343] 04_pdf.jpg

Example 5: File>Save As. Choosing Photoshop PDF: a subsequent dialog box permits the saving of Transparency, applying security and in this particular file: retain the vector data as vector.

This Photoshop PDF can be placed into InDesign – the the same as any PDF. When placed into InDesign 2.0, the file looks similar to the following. Notice I am only seeing the Proxy View of the image:

[1344] 05_lrplaced.jpg

[1345] 06_hrplaced.jpg

In the above example, I have turned on “High Quality Display”. The vector quality of the text, and any vector shape layers (including vector clipping groups) are respected; just as they are respected when printing or exporting as PDF or EPS.

Additionally, it is worth noting that the file extensions supported by Photoshop PDF are .pdf and .pdp

[1346] 07_pdf.gif

What is the difference? Nothing, apart from the file extension. The contents are exactly the same. The reason why there are two options is for the Windows platform. On Windows, the extension is used to associate a file with an application. .pdf is associated with Adobe Acrobat. When you double click on a file, this dot extension is used to assist Windows in determining which application to launch to view the file. With InDesign 2.0, when using the contextual menu “Graphics>Edit Original“, this association is also used. As this is a Photoshop PDF, and normally when editing/viewing the file – you would like to show it in Photoshop, an additional extension is permitted: .pdp, or Photoshop PDF.

I would recommend using the .pdp extension when saving a file from Photoshop as a Photoshop PDF. There were changes in InDesign 2.0 and 2.0.1 to support .pdp as equivilent to .pdf.

For MacOS users, the extension for InDesign 2.0 files is .indd

In fact, I would always use Photoshop PDF as the primary format when taking files from Adobe Photoshop to InDesign. There are no downsides: the file size is smaller, vector text and layers are supported and kept as vector.

InDesign 2.0: Export or Distill PDFs?

[1546] InDesign CS LogoVisit the new InDesign Prepress Section: Adobe InDesign: Prepress Techniques

InDesign: Use the Distiller or Export PDFs?

This was originally posted to the InDesign-Blueworld mailing list on 14-October-2002

Firstly, there is nothing technically wrong with Exported PDFs from InDesign. At all. I (personally) have had great success with exported PDFs from InDesign RIPping to Prinergy and various other imagesetters/platesetters in production in the field.

When you send, or you have received an Acrobat 5.0/PDF 1.4 – directly exported from InDesign 2.0, the workflow choices are a little different: Printing Acrobat 5.0/PDF1.4 Generated by Adobe InDesign 2.0

In either workflow, you will get a high quality PDF that will generate great output.

However, I do recommend using a Print to Postscript-Distill workflow in the following situations:

  1. When you are sending a PDF “blind”.

    In other words, where you are not sure of the provenance/age/version/vendor of your printer’s RIP — they will more than likely have determined an internal workflow for Distiller-made PDFs. They will have .joboptions available for your use, and have tested Distiller made PDFs from QuarkXpress, InDesign and other sources. If they use tools like Pitstop, they probably have created preflight checks based on Distiller-made PDFs.

    This is especially the case if you are sending advertisements, sending files to remote countries or doing work for a client where your client nominates a printer and it is not your choice. In these style workflows, there is a blind handoff.

    Therefore, Creating Postscript and Distilling is the safest path.

  2. Your Printer’s RIPs are Harlequin < 5.3

    This is the CID font encoding issue. As you probably know by now, InDesign to accurately represent glyphs like ligatures, InDesign encodes the text in its PDFs in a form known as “CID”.

    THERE IS NOTHING WRONG, TRICKY, HIDDEN OR EVIL about CID font encoding. It’s a valid part of the PDF specification that certain vendors had not implemented in their software. By Print to Postscript-Distill, there is no CID font encoding, whereas exported PDFs do. Well build (that is: to
    specification) RIPs/Imagesetters work successfully with CID font encoding.

    A large InDesign customer here in Australia have a *very* old Harlequin RIP which is integral in their workflow. This forces the Distiller-route PDF generation: which works flawlessly, day in and day out.

    Again, if you do not worry, understand or even care what your printer is
    using: the Distiller is a common standard method.

  3. Your printer/publisher is conservative, and provides a Distiller-workflow option.

    OK, so your printer accepts PDFs and provides a series of steps and a Distiller 4/5 .joboptions file. In this case, I sometimes recommend people export a PDF from InDesign to see if it works successfully (prepare to be surprised!) — however, to make life easier and have less Prepress technical people getting hot under the collar, use the Print to Postscript-Distill route.

All of this said, Exporting PDFs is a better option. Why?

  1. Its quicker. Much quicker.
  2. There are less translations (InDesign->Postscript->PDF, vs.
    InDesign->PDF)
  3. Once there are more RIPs with InRIP flattening (next revision of Prinergy, Fujifilm etc) are out there, we get even faster output to Acrobat 5 (PDF 1.4). A sight to behold, people!

Therefore, if you have the chance to test Exported PDFs with your
workflow, please do.

Please note that Australia is far, far along the High Quality PDF path. PDF is the industry standard here in Australia (independent study) with a majority of printers getting a majority of their work in as PDF. This involves a plethora of RIPs, workflow software, imposition tools etc. Therefore in Australia, Distiller is a consistent known entity, and why we pragmatically recommend Print to Distiller PDF generation for our InDesign customers here.

InDesign 2.0: Trapping Journey with Prinergy

[1546] InDesign CS LogoVisit the new InDesign Prepress Section: Adobe InDesign: Prepress Techniques

Comments on Creo Prinergy and InDesign 2.0

In Australia, the most common RIP I see in highend platemaking work is the Creo Prinergy series

This particular system takes in Postscript and PDF, and foes through a process of Normalising the input into PDF. As a part of this process, it can preflight and check the incoming stream to ensure a quality printed result.

Prinergy takes natively exported InDesign 2.0 PDFs sucessfully, and the 2.1 version of Prinergy permits in-RIP transparency flattening (not discarding like some competitors!).

However, there are two options in the Refining stage that can create issues for InDesign created jobs. These issues are to do with Prinergy correcting common issues with QuarkXpress generated Composite Postscript (and therefore PDF)

They can be found in the Refine Process Plan section of Prinergy, and specifically inside Color Convert, Overprint Conversion

  • Set Colours to Knockout
    Setting process colours to knockout globally is dangerous. It overrides the overprint setting in the input file and forces the colurs to knockout. As a result, colour printing order affects which separations knocks out.

    You would use this feature for disabling overprint and enabling content colour matching for all objects in a PDF page. When you select this feature, you also let the printed PDF page match the onscreen PDF page only when Overprint Preview is turned off.

    Therefore, you are creating a printed result which only matches the onscreen view in Acrobat 4.0 or the Reader. Not InDesign 2.0 or Acrobat 5.0 with Overprint Preview turned on, or more importantly, as the RIP that you created proofs from probably proofed the job!

    As I understand it, this is turned on in Prinergy to “clean up bad Postscript” eminating from QuarkXpress in Composite style workflows. I am willing to hear other issues it solves.

    One of the very significant impacts of this is in CMYK+Spot colour PDF workflows with PDF 1.3 files. (ref: InDesign 2.0: Spot Colors, Transparency) InDesign’s flattener creates white process-only-knockout boxes where a spot colour needs to print. You may notice these boxes when viewing the PDF in the Reader or Acrobat without Overprint Preview. When this option is turned on, the spot plates will be knocked out by these boxes, and the resulting plates are not printable.

    Another impact is with Composite, Trapped PDFs. ((ref: InDesign 2.0: Generating Composite, Trapped PDFs)
    The trapping created by the referred technique are discarded when this option is turned on.

  • Set Black to Overprint
    All Black elements (where the ink settings are 100%K, 0 CMY) are converted into overprinted black.

My recommendation is to be very, very careful with these options when working with InDesign 2.0 created PDFs with Prinergy

InDesign 2.0: Photoshop with Spots, InDesign and Composite PDF

[1546] InDesign CS LogoVisit the new InDesign Prepress Section: Adobe InDesign: Prepress Techniques

The holy grail with InDesign 2.0 and its support for spot/special colours is the complete replacement of DCS as an input file format.

DCS was invented to permit applications such as Photoshop to create a pre-separated file and place into QuarkXpress. Quark then didn’t need much intelligence to output the separated file: it just passed each of the plates as an EPS in the page stream when generating film/plates.

InDesign 2.0 does support DCS as a placeable file format. In fact, InDesign’s support for DCS is more comprehensive than that of Illustrator. However:

  • Placed DCS elements cannot interact with transparency.
  • Output is restricted to printing as separations; not Composite CMYK or InRIP separations
  • Composite PDF, the most common exchange format today, cannot be exported or distilled.

In a world where composite PDF is the norm, this DCS workflow no longer fits. With simple CMYK work from Photoshop, placing elements and generating separations is simple. The graphic is still held as separate plates, but presents to the user as a composite image.

The problem arises, however, when attempting to take a CMYK+spot(s) file from Photoshop and attempt place into any application – including InDesign 2.0. Ultimately, it would be great to be able to place a single file that contains bitmap and vector information, as well as holding transparency and spot colours. Presently, the only file format that supports this fully is DCS. Whilst you can create Illustrator 10 .ai or .pdf files containing CMYK bitmap and spot colour vector objects, Photoshop is still largely the tool of choice for creation of special effects.

Photoshop allows spot colour channels to be created, but the only supported output formats are EPS, DCS and Photoshop PDF. In all of these formats, any transparency is not retained.

Therefore, this technique (which has been used in production) may assist you in combining the power of Photoshop and extending its spot channel support, and the power of transparency in InDesign to assist us in creating a printable job.

The process:

The overview is: create two Photoshop PDF files, place them on top of each other in InDesign 2.0. The bottom-most file is a CMYK only Photoshop PDF, and the topper-most file is a Spot-only Photoshop PDF. This technique relies on the Transparency Flattener in InDesign 2.0 to weave its magic to generate a composite output.

Step 1: create the source graphic element in Photoshop. In this example, we have a masthead that contains a Bevel&Emboss Photoshop layer style. Our goal is to make the colour of the masthead a special colour. (in the realworld example, this was printed as a metallic silver colour). Don’t create the spot channel yet. Save it as a Photoshop PDF (retaining transparency, vector information and resulting in a compact file).

In this file, the text has a white (or knockout) colour. Its goal in life is to act like a “cookie cutter” and remove the ink from underlying elements at print time. The Bevel&Emboss effect is created using a Black ink, so it will still appear on the black plate at print time.

[1202] sd-1.jpg

Step 2: Take the same Photoshop PDF file:

  • Turn off any effects.
  • Change the white/knockout colour to Black. Choose a % of black that equals the % of spot colour ink you would like. In this example, as the element is a vector text element, it is just filled with 100% Black.
  • double check and ensure where you have black, you want the spot ink to appear
  • Mode>Convert>Grayscale. The will convert the black elements to 100% Black.
  • Mode>Convert>Duotone. This will then permit you to change the Black to a named spot channel. Thankfully in Photoshop 6 or 7, this will be clipped inside the vector text element.
  • For Advanced Users: you can also use other Layer Styles in Photoshop to ‘feather off’ the spot ink to create a highlight effect.

Do not make any position changes to the file. Set the channel in the Duotone to the same spot ink you are going to use in InDesign. This can be “Ink Aliased” at output time.

[1203] sd-2.jpg

Step 3: As you will notice, saving as an EPS or PDF – transparency is not retained in this process. Don’t panic, we’re going to fix this in InDesign.

So we have two files: one being the Composite CMYK object saved as a Photoshop PDF, and another saved as a Photoshop PDF containing a Spot colour. In both files, there is vector data ensuring high quality output. In this example, I am using the .PDP file extension: the data inside the Photoshop PDF file is exactly the same; all I have done is adjust the extension. This will enable InDesign to Edit Original into Photoshop automatically.

[1204] sd-3.jpg

Step 4: Go to InDesign 2.0. Place the file saved in step 1.

[1205] sd-4.jpg

Step 5: Place the file saved in step 3, positioning it exactly over the top of the file placed in step 4. Use the transform palette to get 100% placement accuracy. Don’t worry about the “white” (knockout) colour from the placed file.

[1206] sd-5.jpg

Step 6: set the top object to 100% Multiply using Window>Transparency. Almost magically, the white colour is removed, yet the spot colour remains. Leaving this at 100% Multiply, at output time the spot colour is retained (not converted to process)

[1207] sd-6.jpg

To make the printing process a little more difficult, here the layer which the two elements are placed onto have been moved behind the image.

[1208] sd-6a.jpg

Step 7: Export as PDF, or Print to the Acrobat Distiller. In this example, I printed using Composite CMYK. Its a little difficult to fathom; but spot colours are held in this process (unless you use InDesign 2.0’s Ink Manager to convert them back to process at print time)

[1209] sd-7.jpg

In the above screen dump, I am using Quite Revealing to show the background colour from the Composite PDF. As you can see, the first placed CMYK PDF ‘cuts out’ the colour in the background: in this instance, the PANTONE 264C Spot Colour.

[1210] sd-8.jpg

This above screen dump shows the PANTONE 340 C as created in the second Photoshop file

[1211] sd-9.jpg

Here is the black plate. The Bevel&Emboss added in the first Photoshop PDF is retained, and overprints the spot colour correctly.

How does this work?

The first file you place (CMYK) element acts like a ‘knockout’ element, removing any items underneath. The second file placed (EPS Spot) then overprints the underlying CMYK object. As InDesign’s flattener is smart, it does not knockout underlying elements. It also does not change their colour in the flattening as the top object is a spot colour. Other blend modes such as Lighten or Darken do attempt to change the colours – so the final document may be forced into CMYK.

What’s the Benefit?

What does this provide that DCS does not? The ability to generate a composite PDF. As soon as you place a DCS file into QuarkXpress, InDesign or PageMaker – you are forcing the output to be separations. In modern Postscript 3 or Extreme workflows, recombining preseparated output is difficult, and not the default workflow.

[1222] example of front cover of June 2002 Foxtel

If you are in Australia, you may have seen the June 2002 issue of the Foxtel magazine. It used this technique. Supplied as a composite PDF with Spot colour, it correctly separated, was trapped and printed as a metallic. The Bevel&Emboss in the K plate overprinted the silver-metallic special colour. This plate is still a vector element.

Thanks to: Matt Phillips, Ben Hewitt (who tested this out on a live job!) and Alan Rosenfeld (for listening to my ranting about this in Brisbane). A big thankyou to Aaron Cliff from Foxtel magazine for sending a better quality image – and more importantly, being brave enough to pioneer this technique.

InDesign 2.0: Painting Pictures with Picket Fences

 

18th September 2008: Gary Spedding has an update for later versions of InDesign: http://spedsblog.blogspot.com/2008/09/floating-frames-effect-in-indesign.html

I arrived home today and my cable modem connection to the internet was down. Thanks Bigpond! Bummer. Hmm, may this is a good time to noodle around with compound paths in Illustrator 10 and InDesign 2.

Making/releasing compound paths is a feature that has been in InDesign since the first version, but its something that I use and see rarely used. Its under Objects>Compound Path>Make or Release.

In my noodling, I found an interesting trait of InDesign 2.0 that might make for a cool design effect. I call it “painting picket fence pictures”

Step 1: Create the Picket fence Illustrator. This is a simple rectangle in the background, and 5 equal-sized rectangles placed over the top. The underlying rectangle has been coloured Cyan for easier viewing.

[1274] pf_1.jpg

Step 2: Group top 5 rectangles. By grouping the top objects, this ensures that the top object is treated as one shape, and when we use the Pathfinder palette, they will “cookie cutter” through the rectangle underneath.

[1275] pf_2.jpg

Step 3: Pathfinder, Exclude Overlapping. Using the Window>Pathfinder palette, create a compound path with see through panels. The grouped object above cuts through the rectangle shape underneath.

[1276] pf_3.jpg

Step 4: Object>Expand Appearance. To enable a successful copy and paste from Illustrator to InDesign, we need to expand the appearance into a complex vector shape.

[1277] pf_4.jpg

Step 5: Ensure AICB Clipboard format. The most appropriate format to copy this element from Illustrator to InDesign is Adobe Illustrator Clipboard. Also ensure the paths are preserved. Select the element (best place is the Windows>Layers palette using the meatball on the right) and Edit>Copy

[1278] pf_5.gif

Step 6: Paste into InDesign. Here we see the result of the paste into InDesign. Now for some fun!

[1279] pf_6.jpg

Step 7: Place image Into. File>Place, select your image (or PDF, EPS) and ensure it goes into the new shape. The “loaded cursor” will change have brackets around the place gun, indicating it is placing into the frame. Below you see the result of “patient user mode” – this occurs when moving the image inside the picket-fence shape. The second image below illustrates how the image is “cut out” by the compound shape.

[1280] pf_7.jpg

[1281] pf_7a.jpg

Step 8: Object>Compound Path>Release. This is where the fun starts. When you release a compound path in InDesign where there is an image place, it creates multiple shapes with the same image placed into each shape, each with its own relative positioning. It still looks like one compound image, but appearances can be deceiving!

[1282] pf_8.jpg

Step 9: Move top objects for a surprise! In the example below, the rectangle at the bottom I have applied 50% Normal blend mode. The position of the top frames have been adjusted, and a drop shadow applied to lift them from the background. Obviously, you would adjust this to taste and stricter design constraints – but I think the process is illustrated here. Good luck and happy painting!

[1283] pf_9.jpg

Thanks to: Cari Jansen for the inspiration to revisit compound paths, and Bigpond for 6+ hours of productivity sans-Internet. Not.

Photoshop 7 File Browser Automatic Numbering Technique

The File Browser added to Photoshop 7 is a great tool for managing your digital images. This is especially the case for digital camera photographs and assisting in renaming the files into something more intelligible than the “P100198.JPG” that various operating systems force upon us.

The File Browser permits renaming of photos using typed in text, a date, dot extension and in this instance – a serial number.

In this hidden feature, we can rename images with a starting serial number, that is not “1”.

Step 1: Here we have a collection of images in a particular directory

[1258] fb1.jpg

Step 2: Select the images you wish to rename, rigt click on one of the images (MacOS: control click) and select Batch Rename

[1259] fb2.jpg

Step 3: The magic. Here we use the “File Naming” section to create the style or template of the resulting file name. In this instance, I want my files to start with the text nz July and starting from a serial number of 88. The pound sign at the beginning and end of the 088 indicate I would like this to be a serial number. The extension is substituted with .jpg, .gif — depending on the file type.

[1260] fb3.jpg

Step 4: The final result. As you can see, the images are now renamed using the above rules, and a starting serial number that is not 1.

[1261] fb4.jpg