Constant Object Proportion Rendering

COPR (/ˈkɒpər/; Constant Object Proportion Rendering), is 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.

Constituent technologies

COPR uses a combination of:

• XHTML (or HTML) and CSS for marking up, styling and relative size information.
• The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript.
• JavaScript, to dynamically detect user re-size and other events.
• Elastic Design the use of ems instead of pixels for sizing.

Advantages of COPR

Prior to the development of COPR, 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.

Accessibility

COPR-style pages can be scaled to fit on devices with screen resolutions with as few as 300 pixels or as many as 1920 pixels while keeping the same relative size and placement of text and graphics. The same page can be displayed without distortion on devices as small as a wrist watch or as large as a projection screen. It also allows for almost unlimited zooming with little or no pixelation. This allows pages to be zoomed in for easy viewing without losing page cohesion and/or quality.

External links

• A formal description of these concepts in very precise terms
• The amazing em unit and other best practices
• The Incredible Em & Elastic Layouts with CSS