========================================
How to write ZPT to render correct XHTML
========================================

:Revision: $Id: howto-write_zpt.txt 30254 2005-12-04 01:49:55Z dkuhlman $

.. sectnum::    :depth: 4
.. contents::   :depth: 4


Do XHTML Transitional 1.0 or die
================================

1. Check empty tags.  Change:

   - <meta ...> into <meta ... />

   - <link ...> into <link ... />

   - <br> into <br />

   - <hr> into <hr />

   - <input ...> into <input ... />

   - <img ...> into <img ... />

2. Check unvalued attributes:

   - <... nowrap> into <... nowrap="nowrap">

   - <... selected> into <... selected="selected">

   - <... checked> into <... checked="checked">

   - **But** <... nowrap="1"> is not valid; this must be
     <... nowrap="nowrap">.

3. Use lowercase tag name and attributes.  Change:

   - <form method="POST" ...> into <form method="post" ...>

   - <form method="GET" ...> into <form method="get" ...>

   - All your tags should be in lowercase (this is good for
     compression).

4. Names must be a single token.  Change:

   - <... name="foo bar"> into <... name="foo_bar">

5. Make http://validator.w3.org/ your homepage and use it.

6. Limitation: Some attributes are not available in XHTML:

   - colspan

   - onclick

   - ?

We keep them for the moment until we know how to remove them.


XHTML and nuxeo CSS
===================

1. Give up the following attributes:

   - color=

   - bgcolor=

   - font=

   Even style="" is a problem.  You should think of adding a new CSS
   class.

2. Any form should be like the following:

   All input should be grouped using class="group". Use row/label and
   field classes for the layout.  Example::

       <form method="post">
       <div class="group">

         <div class="row">
           <div class="label">foo</div>
           <div class="field"><input type="text" ... /></div>
         </div>
       ...
         <div class="row">
           <div class="field">
              <input type="submit" class="context">
           </div>
         </div>

       </div>
       </form>

3. Inputs:

   - Radio, checkbox should always use class="noborder".

4. Buttons:

   - Submit can be:

   - The main action of the form should be class="standalone"

   - Sub action should be class="context"

   - A delete action should be class="destructive" with a js
     confirm window Example::

       <input type="submit" value="button_delete"
         class="destructive" i18n:attributes="value"
         tal:attributes="onclick python:'return window.confirm(\'%s\')' %
                        (cpsmcat('description_confirm_delete'), )" />

5. Heading:

   - The title of the page must be in <h1>.

   - Do not jump to <h3> without using <H2>.

6. Table:

   - Always add a summary attribute saying if it is a layout or a
     listing table (shame on you if it is a layout).  Example::

         <table summary="3 col layout">

   - If you have headers, use <th>.

7. To display a list of properties in 2 columns, use something
   like::

       name: ...
       firstname: ...

   Think of using <dd> and <dt>, hope to have an example in CPS
   soon.

8. Copy stuff:

   - For an example, take a look at what was done in
     ``CPSDefault/Document/Schema/Directory``.

9. Miscellaneous:

   - For all other questions ask our local experts: Marc-Aurle
     and Emmanuel.

