COPR, Constant Object Proportion Rendering
A web development technique that gives web pages the same zoom in/out and stretch/shrink to fit functionality found in graphic design applications.
Screen size and resolution limitations have little effect on COPR-style pages. Screen objects are rendered in constant proportion to each other as the viewing size and zoom level changes.
This idea started with This page back on June 20th 1998. Originally only armed with percentages for element width specifications. The base page for the page you are viewing now.
My design future changed when I read a page much like This.
Before the invent of the Em in CSS, graphic artists were restricted to a set pixel width when designing web pages. If a page was re-sized in any way, the appearance of the design would be altered. By combining several existing technologies, COPR provides a solution to many problems caused by the mismatch between HTML and scalable graphic formats.
To my amazment, this has not caught on.
UPDATE January, 2004
As CTO at ORCAS, I developed several web applications in the COPR style. These applications never made it into the wild.
These pages looked and felt like applications. All the text and graphics would scale and the page was re-sized. Some of this was done with Flash. Rastor graphics had sizes defined in ems. At the time, em support did not seem to be supported well.
A couple great references for some of the technology that goes into COPR:
Elastic Design and The Incredible Em & Elastic Layouts with CSS.
Both discussions do real well explaining how to make pages scale, but don't have good solutions to raster (bit map) images. I have found a workable solution to scalable raster images. I have a wonderful team currently working with me to role-out a working web page combining existing techniques and bringing it all together with new ones.
- Text and Image objects staying proportional with little or no pixelation
- Content is scaled up when the viewable window is made larger
- Content is scaled down when the viewable window is made smaller
- All rendered objects stay proportional when text is made larger or smaller. Zoom in/out effect
- All navigation stays on the screen. No scrolling the browser window to get to navigation elements
- Once the screen is sized and zoomed for no scroll bars, no intra-page navigation brings them back.
The Zoom in/out effect is accomplished with using the Ctrl-- and crtl-+ key presses. After re-sizing the page the user needs the use the text sizing keys to bring the page back into scale.
These key presses are still virtualy unknown and un-used. On some fixed size pages, this function has been disabled. Pages done this way are cool, but the requirment for this two step process was a non-starter for wide adoption.
UPDATE Spring, 2008
My COPR vision has be completely refactored thanks to the tireless efforts of Stuart Siegrist. It now runs on all major browsers. What has been wrong to date is the unintuitive two-step process to get pages to look correct at any size. I feel this issue has kept it from wide adoption. Stuart has created the final missing feature to make COPR complete. His addition of the magic needed to re-size and zoom as a single, intuitive step, will take COPR from cool, to absolutely essential in future web pages.
WikiPedia COPR or Constant Object Proportaion Rendering.
-Stephen Jazdzewski LinkedIn