A print stylesheet is a product decision

I added C62Y’s first print stylesheet to remove the dark navigation rail and save ink.

The printed product page looked cleaner and became less useful. Manual links lost their destinations. The comparison showed only the columns currently visible inside its screen overflow region. A compact navigation button printed without the navigation. Product status relied on color. Page breaks separated headings from their values.

I had treated print as a visual cleanup of the screen and not as another presentation of the task.

The catalogue’s subject made paper plausible. A person could carry a product sheet into a workshop, annotate a comparison, or attach a reference page to a maintenance note. Printing was not the primary experience and did not need to imitate the site. It needed to preserve the information relationships that made the page worth carrying.

The paper did not contain interactions

The screen page included controls for navigation disclosure, filtering, comparison selection, image inspection, and opening external manuals. Printing every control produced artifacts with no function. Hiding every control sometimes removed its useful label or destination.

I classified each element by what should survive:

• Pure control: omit the button or input.
• Selected state: print the result the control had produced.
• Navigation destination: print a readable label and, where useful, its URL.
• Expandable content: print the complete relevant content rather than the closed state.
• High-detail media link: include the destination in a reference list.

The distinction prevented print CSS from becoming a collection of display: none rules.

The comparison picker disappeared, while the selected products and complete table remained. The compact menu button disappeared, while a small site identifier and canonical page URL remained. An image-inspection link became a reference entry instead of an underlined phrase with no visible destination.

Print asked what each interactive element meant after interaction was impossible.

At first, printing captured only the expanded or collapsed state visible on screen. A closed reference section disappeared even though the user might reasonably expect the complete product sheet.

I made the print rules expand content sections whose role was document organization rather than user preference. Optional comparison notes printed when they explained a marker. The global navigation stayed omitted because it did not add value to the sheet.

This was a product decision, not a universal rule. A private note deliberately hidden by the user should not reappear in print. C62Y had no such sensitive disclosure. Its sections used collapse only to manage screen density.

The print preview became a review surface. A person could see exactly what would leave the browser and decide whether the content was appropriate.

The exercise exposed a broader issue: UI state does not automatically define export state. A durable artifact needs its own contract.

Later document systems would make that distinction much more consequential. C62Y encountered it through an ordinary disclosure.

URLs needed selective visibility

A page full of raw URLs was unreadable. A page with no destinations made manuals, sources, and related documents impossible to recover from paper.

I divided links by role.

Internal navigation links did not print their URL. The canonical product URL appeared once in the header or footer. External manuals and source documents entered a numbered reference list with descriptive labels and complete destinations. Short, meaningful links could print inline when that improved use.

Fragment links to sections disappeared because the headings already existed on paper. mailto and telephone links printed their human-readable address or number rather than a protocol prefix.

I did not rely only on CSS-generated content for critical destinations because support and formatting varied. The server-rendered print reference list provided a dependable path for the important links, while CSS controlled its screen visibility.

This added markup to the page and made link purpose explicit. The print requirement improved the content model by distinguishing a manual from ordinary navigation.

The comparison table had accepted local horizontal scrolling on a phone. Paper could not scroll.

My first print rule scaled the entire table until every selected product fit. With enough columns, type became illegible. The sheet technically contained the information and failed to communicate it.

I limited the print-friendly selection and explained the limit before printing. For a larger selection, the user could choose a focused subset or produce multiple comparison groups. The screen view remained complete.

The print stylesheet suggested landscape orientation for the comparison where supported and used the page width efficiently. Row and column headers repeated on new pages where browser support allowed. Units and absence reasons stayed visible.

I resisted splitting one product column across a page boundary when possible. CSS print controls helped and varied across browsers, so the layout remained understandable when an inconvenient break occurred.

The constraint was honest: not every screen arrangement maps to one sheet. A responsible export can ask for a narrower artifact rather than reduce meaning to fit.

Page breaks changed hierarchy

On screen, a heading near the bottom of the viewport could be followed by content after a scroll. On paper, a heading stranded at the bottom looked like a mistake.

I added print break rules to keep short headings with following content, avoid splitting small product identity blocks, and allow long sections to flow rather than forcing large blank areas.

Support for break properties was imperfect. I tested representative browsers and kept the document structure robust when a hint was ignored.

Tables received repeating headers where available. Figures tried to stay with captions. Manual references could break between items and not inside a single destination.

The work made HTML hierarchy visible again. A visually styled label that was not a real heading could not receive the same print treatment reliably. Converting those labels into semantic headings improved screen navigation too.

Print did not merely consume the document outline. It tested whether one existed.

Product availability and comparison warnings used color on screen. A monochrome printer reduced them to similar gray text.

I added state words and simple symbols whose meaning did not depend on hue. The print stylesheet removed decorative backgrounds and preserved borders only where they structured data.

Links did not rely on blue. Source markers used numbers. Warning notes included the condition in text.

The changes were not print-only workarounds. The screen interface became more accessible to people with color-vision differences and in high-contrast settings.

The print test exposed meaning that the visual design had stored in one rendering property. Once the meaning moved into text and structure, every presentation improved.

This became a recurring pattern in the project: a constrained medium revealed which layer secretly owned the information.

The screen summary used a modest product image to protect network cost. Printing that derivative at a large physical size made it soft. Loading the inspection image solely for print could surprise the user with a large late request.

I kept the summary image at a bounded print size and treated it as identification, not inspection. The printed sheet linked to the high-detail asset where needed.

Decorative category images disappeared. Diagrams that carried reference information remained with their captions and source.

Background images did not become critical content because browsers often omitted them by default. Important images existed as document content.

The image manifest already described role and dimensions. Print added another consumer of that model rather than a new folder of manually prepared assets.

The result was visually quieter and aligned with the print task: identify the product, read the specifications, and recover the detailed source when necessary.

Typography changed without becoming a second brand

The screen type scale assumed backlit display, responsive measure, and interactive headings. The print version needed efficient use of paper without shrinking everything.

I set a readable body size in physical terms, tightened some vertical spacing, and allowed the page to use paper width within a comfortable line measure. Headings retained hierarchy with less decorative contrast.

I used a dependable font stack instead of requiring a downloaded web font during printing. The fallback changed line breaks, which made fixed-height screen components even more obviously unsuitable.

Code and identifiers used a monospace face with wrapping rules that prevented long strings from forcing the page wider. URLs in the reference list could break at sensible punctuation.

The print design belonged to the same catalogue because hierarchy, tone, and content remained. It did not need to reproduce every pixel of the screen theme.

Consistency meant recognizable decisions, not identical rendering across media.

I wanted every printed sheet to remain identifiable after it left the browser.

The print header included the product identity and a restrained site label. The footer included the canonical URL, print date, and catalogue build identity where the browser’s print capabilities allowed the layout.

The print date said when the artifact had been produced. It did not imply the product data had been verified on that date. The product record carried its own source and update information.

The build identity connected the paper to a release without exposing internal paths. If a specification changed later, I could distinguish an older printout from current catalogue state.

Browser support for custom page margin boxes was inconsistent, so critical identity also appeared in the document content. The artifact did not depend on configurable browser headers being enabled.

This was a modest form of provenance and an early recognition that exports live longer than the session that created them.

Print preview was part of testing

I had rarely opened print preview during ordinary frontend work. C62Y made it a release scenario.

The matrix covered:

• Product page with and without an image.
• Short and long specifications.
• Comparison at the supported print selection limit.
• Multiple-page reference section.
• Monochrome output.
• Links and manual references.
• A browser that ignored some break hints.
• Increased default font size before printing.

I saved representative PDFs for visual comparison, while remembering that the actual browser and printer could differ. The saved output made unexpected changes visible after CSS refactoring.

The test caught global utility classes that hid content under screen assumptions and decorative backgrounds that consumed ink without carrying structure.

It also caught a release defect: a print-only reference list had been omitted from one template. The page looked complete on screen and lost its manual links on paper.

Another medium broadened the definition of complete.

The first test print left almost no room to write. The screen design’s tight reference grid had carried directly onto the page, and every available margin was treated as wasted space.

The people helping me test the catalogue naturally circled values, wrote a part number beside a compatibility note, and checked products off during comparison. The artifact was not only being read. It was becoming temporary working state.

I did not turn C62Y into a printable form system. I adjusted the comparison and reference layouts so important rows had enough vertical rhythm for scanning and brief marks. The page margin remained usable. Dense legal-size output was not the goal.

A small notes region appeared only on the focused comparison sheet. It was labeled plainly and contained no fake ruled-paper decoration on the screen page. A product sheet kept its space for content.

This changed my evaluation of “efficient” print. Maximum information per sheet can increase the work required to use the information. A second page was sometimes a better product than smaller type and no annotation space.

The test also reinforced that an exported artifact may acquire state the application never sees. Handwritten notes had no synchronization or audit path. The print header’s canonical URL and build identity gave the reader a route back to current data without pretending the paper remained current automatically.

Forms became results, not empty controls

The catalogue’s filter form printed as empty boxes in one browser because the base form styles remained. In another, selected checkboxes appeared without their labels after a layout rule moved the label text.

I hid forms whose only purpose was to change the screen view and rendered a print summary of the active choices. A category result page printed “Category: Measuring equipment” and the active availability constraint rather than a disabled dropdown.

The comparison page printed the selected product identities. Search results printed the query and result count. Empty optional filters disappeared instead of producing a row of blank fields.

This required the server template to know the normalized query state and expose it as content. CSS alone could not reliably turn every control into a durable statement.

The approach improved screen accessibility as well. An active-filter summary gave users a single place to understand and remove constraints. Print had exposed that the form was an input mechanism and not the best representation of its result.

The distinction returned later in workflow interfaces: controls express a possible action; durable artifacts should usually record the decision or state that resulted.

My first CSS scattered print overrides beside each screen component. It was easy to add one and difficult to see the complete artifact policy.

I kept component-specific adjustments near their components and added a short print layer organized around document regions: site chrome, identity, content sections, references, comparison, and artifact metadata.

The layer used explicit classes for print-only summaries and screen-only controls. Generic names such as hide had already caused one reference list to disappear in both media.

The separation made review possible. I could read the print layer and understand which parts of the product survived, rather than discovering policy through hundreds of local declarations.

It also limited specificity. Print rules did not need to fight every screen selector with !important; the stylesheet architecture gave the later media layer a predictable place in the cascade.

I considered generating a bespoke PDF for every product. That would have offered more control over pagination, fonts, and headers. It would also have introduced a second rendering engine and another artifact to keep synchronized.

For C62Y’s needs, a print-aware HTML page was enough. The same content, headings, measurements, and source references served screen and paper. The browser handled the final pagination with documented limitations.

A generated PDF would be justified if the artifact required fixed regulatory layout, offline distribution, signing, or guaranteed pagination. The personal catalogue did not.

Choosing print CSS over a PDF pipeline was not a claim that one approach was superior. It matched the artifact’s stakes and maintenance capacity.

The decision echoed the rejection of a separate mobile site. A second output system should exist because its contract is genuinely different, not because the first system needs disciplined presentation.

The first stylesheet removed navigation chrome and called the result printable. It did not preserve destinations, expanded content, or comparison scope.

I printed only visible screen state and lost collapsed reference sections. Print received its own explicit content policy.

I appended every URL inline and made the page unreadable. Selective reference lists preserved useful destinations.

I scaled an oversized comparison until the type fit. A print selection limit and landscape layout preserved readability.

I let color own availability and warnings. Textual states improved both print and screen.

I considered a separate PDF renderer before proving the browser output was insufficient. Keeping one document model avoided another synchronization problem.

Each mistake came from treating paper as a screenshot destination. The corrected design treated it as a durable artifact with its own constraints and use.

The product existed beyond the viewport

Print changed how I understood responsive design. The page did not only respond to narrower and wider screens. Its content could move into a medium with no interaction, fixed physical boundaries, different color, delayed use, and no guarantee that the surrounding site remained available.

The stable parts were the same ones C62Y had been learning to name: identity, hierarchy, complete reference information, explicit state, source, and URL. Screen controls and layout arrangements were temporary expressions of those relationships.

A print stylesheet became a product decision because it answered which parts of the product survive when the browser can no longer behave like the browser.

That question later returned in exports, offline snapshots, immutable releases, evidence sets, and document manifests. Durable artifacts need more than a clean appearance. They need enough context to remain interpretable after leaving the live system.

The final 2012 article follows that thread into deployment. A responsive page could be carefully designed and still arrive as a mixture of old templates and new assets if release activation remained a sequence of file copies.