Overview.bs

<h1>CSS Zoom Module Level 1</h1>

<pre class='metadata'>
Status: UD
Shortname: css-zoom
Level: 1
Group: csswg
ED: None
Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com
!Issues list: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?query_format=advanced&amp;product=CSS&amp;component=Zoom&amp;resolution=---&amp;cmdtype=doit">in Bugzilla</a>
Abstract: CSS Zoom defines a behavior for controling the layout size of an element's box. CSS Zoom can be defined on any CSS block-level element.
Ignored Terms: div, dl, dfn
Link Defaults: css-transforms-1 (property) transform
</pre>

<h2 id="intro">
Introduction</h2>

  <em>This section is not normative.</em>

  This specification defines features that allows zooming of elements and their
  content. Through 'zoom' authors can magnify or reduce the size of rendered
  elements. Unlike the 'transform' property, 'zoom' does have an effect over the
  layout inside and around the element's box.

<h2 id="controling zoom">
Controling Zoom</h2>

  An element becomes zoomed when the 'zoom' property has a positive computed value
  different than 1. 'Zoom' affects computed property values. The computed value of
  'zoom' is applied as a scalar to all &lt;length&gt; property values resulting
  in a magnification or minificaiton effect. Unlike 'transform' scaling the
  'zoom' property affects layout.

  Nested values of 'zoom' accumulate resulting in additinal scaling of &lt;length&gt; values.

  The 'zoom' property has no effect to &lt;length&gt; property values with computed
  value is ''auto'' or &lt;percent&gt;.

  <p class="note">
    The computed value of 'font-size' is never &lt;percent&gt; thus 'zoom' always applies.

  <p class="note">
    'zoom' does not affect or prevent 'transform' scaling.

  <p class="issue">
  There is no real reason why &lt;percent&gt; values shouldn't be affected by 'zoom', however
  this is dictated by current interop behavior. To achieve this the 'zoom' should
  &lt;percent&gt; values should be scaled only by the 'zoom' value specified on the the
  element itself and not the accumulated value.

<h3 id="zoom-property">
The 'zoom' property</h3>

  <pre class="propdef">
  Name: zoom
  Value: &lt;number&gt;
  Initial: 0
  Applies to: all &lt;length&gt; property values of block-level elements
  Inherited: no
  Percentages: Refer to all &lt;length&gt; property values
  Media: visual
  Computed value: as specified except for element's whose 'float' computed value is not ''none'', in which case the computed value is '''auto'''.
  </pre>

  The values of this property have the following meanings:

  <dl dfn-for="wrap-flow" dfn-type=value>
    <dt><dfn lt="'zoom'!!'number'">number</dfn>
    <dd>
      Positive floating point number indicating a zoom factor. Numbers smaller
      than 1.0 indicate a "zoom out" or minification effect, while numbers
      greater than 1.0 indicate a "zoom in" or magnification effect.

    <dt><dfn lt="'zoom'!!&lt;percent&gt;">percent</dfn>
    <dd>
      Positive floating point number, followed by a percentage character ("%")
      which indicates a zoom factor. Percent values smaller than 100% indicate a
      "zoom out" or minification effect, while numbers greater than 100%
      indicate a "zoom in" or magnification effect.
  </dl>

  Negative values for 'zoom' are illegal.

<div class="example">
  Example of 'zoom' property applied during hover for magnification effect.

<pre>
&lt;div class="messageBox"&gt;
    &lt;div class="label"&gt;Text of the label&lt;/div&gt;
&lt;/div&gt;

&lt;style type="text/css"&gt;
.messageBox {
    width: 10em;
    padding: 2em;
    border: medium solid lightblue;
}

.messageBox:hover {
    zoom: 150%;
}

.label {
    background: lightgrey;
    padding: 1em;
    text-align: center;
}
&lt;/style&gt;
</pre>

  Illustration of the before and after hover state of the message box element.
  <img src="css_zoom_hover_example.png" />

<h2 id='dom--cssom-interactions'>
  DOM and CSSOM interaction</h2>

  The current interoperable behavior of 'zoom' affects DOM and CSSOM interface serialization in two ways; removing or preserving the scaling of the accumulated 'zoom' value.

<h3 id='scaled-om-serialization'>
  Scaled interface serialization</h3>

  The following API preseve the accumulated scaling effect of 'zoom'
  resulting in serialization of values that are the result of layout.

  <ul>
    <li>offsetTop
    <li>offsetLeft
    <li>clientRects
    <li>scrollTop
    <li>scrollLeft
    <li>boundingClientRect
  </ul>

<h3 id='unscaled-om-serialization'>
  Unscaled interface serialization</h3>

  The unscaled serialization is performed by applying the inverse accumulated
  'zoom' value to the following OM API. The results of such of serialization
  are values approximating the computed values if 'zoom' didn't apply at all.

  <ul>
    <li>All used values from getComputedStyle properties
    <li>offsetHeight
    <li>offsetWidth
    <li>scrollHeight
    <li>scrollWidth
    <li>clientHeight
    <li>clientWidth
    <li>scrollTop
    <li>scrollLeft
  </ul>