mobile/graphics.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Graphics and Layout</title>
  </head>
  <body>
    <header>
      <h1>Graphics and Layout</h1>
      <p>Content on the Web can be styled using <a href="https://www.w3.org/Style/CSS/">CSS</a> (Cascading Style Sheets); in particular, CSS Level 3 (and beyond) is built as <a href="https://www.w3.org/TR/CSS/#css">a collection of specifications</a> that progressively override and extend the core CSS 2.1 specification. Besides CSS, the Web also has the ability to embed raster or vector images, and draw/manipulate 2D or 3D graphics.</p>
      <p><b>Note:</b> Technologies specifically tailored to optimize rendering performances are rather listed in <a data-page="performance"></a>.</p>
    </header>
    <main>
      <section class="featureset well-deployed">
        <h2>Well-deployed technologies</h2>

        <p>Features in CSS 3 and beyond define simple yet powerful features to create graphical effects, such as <span data-feature="Borders and background Effects"><a data-featureid="css-border-radius">rounded corners</a>, <a data-featureid="css-box-shadow">shadow effects</a></span>, and <span data-feature="Transformation Effects"><a data-featureid="css-2d">rotated content</a></span>.</p>
        <div data-feature="Animations">
          <p>Animations can be described declaratively via <a data-featureid="css-animations">CSS Animations</a> and <a data-featureid="css-transitions">CSS Transitions</a>.</p>
          <p>Scripted animations can be resource intensive, especially on constrained devices. The possibility offered by the <a data-featureid="animation-frames">Animation Frames</a> to manage the rate of updates to animations can help to keep them under control.</p>
        </div>
        <div data-feature="Complex layouts">
          <p>By default, the box model in CSS specifies that any padding and border of an element are to be laid out and drawn outside of the specified width and height for the element. The effective external size of a box thus varies with the padding and border used, which complicates the design of responsive layouts where developers want to vary box sizes based on the size of the screen. The <code>border-box</code> value of the <a data-featureid="css-ui-box-sizing"><code>box-sizing</code> property</a> tells the user agent to lay out and draw padding and border inside the specified width and height for the element, which usually simplifies the design of responsive layouts.</p>
          <p><a data-featureid="css-flexbox">CSS Flexbox</a> and <a data-featureid="css-grid-1">CSS Grid</a> introduce two new layout modes, designed for laying out more complex applications. Notably, they make it possible to preserve a clear separation between the content itself (HTML, SVG) and its layout by allowing re-ordering of elements on screen, without having to change the underlying HTML. This is particularly relevant on mobile devices where the user interface and user experience need to be adjusted to fit the screen and available interaction mechanisms (see also <a href="adaptation.html">Device Adaptation</a>).</p>
          <p>Flexbox focuses on space distribution within an axis, and uses a simpler bottom-up approach to layout, while Grid enforces 2-dimensional alignment, and uses a top-down approach to layout. It is expected that both will be valuable and complementary tools for web developers.</p>
        </div>
        <div data-feature="Downloadable fonts">
          <p>Fonts play also an important role in building appealing graphical interfaces, but mobile devices are in general distributed with only a limited set of fonts. <a data-featureid="woff2">WOFF</a> (Web Open Font Format) addresses that limitation by making it easy to use fonts that are automatically downloaded through style sheets, while keeping the size of the downloaded fonts limited to what is actually needed to render the interface. WOFF is particularly friendly to mobile devices, thanks to a font data preprocessing and optimization step that reduces redundancy of font data structures, and a dedicated entropy coding scheme for compression that does not require excessive CPU or memory usage for decoding, even on lower-end mobile devices.</p>
        </div>
        <div data-feature="2D Vector Graphics">
          <p><a data-featureid="svg11">SVG</a>, Scalable Vector Graphics, provides an XML-based markup language to describe two-dimensions vector graphics. Since these graphics are described as a set of geometric shapes, they can be zoomed at the user request, which makes them well-suited to create graphics on mobile devices where screen space is limited. They can also be easily animated, enabling the creation of very advanced and slick user interfaces.</p>
          <p>The integration of SVG in HTML5 opens up new possibilities, for instance applying advanced graphic filters (through SVG filters) to multimedia content, including videos. <a data-featureid="svg2">SVG 2</a> is set to facilitate that integration and complete the set of features in SVG.</p>
        </div>
        <p data-feature="2D Programmatic API">In complement to the declarative approach provided by SVG, the <strong><code>&lt;canvas&gt;</code></strong> element added in HTML5 enables a <a data-featureid="canvas">2D programmatic API</a> that is well-suited for processing graphics in a less memory intensive way.</p>
        <p>Another important aspect in graphics-intensive applications (e.g. games) is the possibility to use the entire screen to display the said graphics; the work on a <a data-featureid="fullscreen">Fullscreen API</a> to request and detect full screen display, now done in the <a href="https://whatwg.org/">WHATWG</a>.</p>
        <p><strong>NB:</strong> a <a href="https://www.khronos.org/webgl/">3D graphic API for HTML5 <code>canvas</code>, called WebGL</a>, has been developed outside of W3C, as part of the <a href="https://www.khronos.org/">Khronos Group</a>; this API has been built to be compatible with <a href="https://www.khronos.org/opengles/">OpenGL ES</a>, i.e. for embedded systems, and is intended to work on mobile devices. The <a href="https://www.w3.org/community/gpu/">GPU for the Web Community Group</a> also started to design a new Web API to expose modern 3D graphics and computation capabilities in a performant, powerful and safe manner, with a goal to be agnostic of and compatible with existing native system platforms (such as Direct3D, Metal, or Vulkan).</p>
      </section>
      <section class="featureset in-progress">
        <h2>Technologies in progress</h2>
        <div data-feature="Animations">
          <p>Animations can also be managed via scripting through the API exposed in <a data-featureid="web-animations">Web Animations</a>.</p>
        </div>

        <div data-feature="2D Programmatic API">
          <p><a data-featureid="css-paint-api">CSS Painting API</a> allows web developers to generate a 2D image for CSS that can respond to style and size changes, without having to create DOM elements and without blocking the main thread during repaint, thus preserving memory, CPU, and responsiveness.</p>
        </div>

        <div data-feature="Downloadable fonts">
          <p>Given the time required for downloading fonts over mobile networks, authors need to adapt their content to the progressive availability of fonts. <a data-featureid="css-font-loading">CSS Font Loading</a> gives the necessary events and interfaces to developers to enable that adaptation. The <a data-featureid="css-font-display"><code>font-display</code></a> descriptor for <code>@font-face</code> and <code>@font-feature-values</code> rules can also be used to control how a downloadable font renders before it is fully loaded.</p>
          <p>Font variations along different axes (width, weight, optical size) can be encoded in a single font file. The <a data-featureid="css-fonts-4/variable">font variation properties</a> in CSS allow finer control over usage of font variants and can further help developers avoid unnecessary network requests to fetch additional variants of a font.</p>
        </div>
      </section>

      <section class="featureset exploratory-work">
        <h2>Exploratory work</h2>
        <div data-feature="Animations">
          <p>Content rarely fits on screen on mobile devices, requiring users to scroll down. Applications may want to adjust their user interface based on the current scroll position, for example to shrink the top navigation menu as the user starts scrolling or to display a progress bar. This requires scripting for now. The <a data-featureid="scroll-animations">Scroll-linked Animations</a> specification proposes a declarative mechanism based on CSS properties.</p>
        </div>
      </section>
    </main>
    <script src="../js/generate.js"></script>
  </body>
</html>