Exercices sur la mise en forme des formules mathématique en CSS

mise en forme d'un tableau simple en CSS

Écrire une page xHTML contenant :

Fichier à produire  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <meta http-equiv="Default-Style" content="bordures cachées"/>
  <title>Test formules marthématiques</title>
  <style type="text/css">
    body {
     font-family:sans-serif;
     font-size:15px;}
 
    h1 {font-size:140%;}
 
    h2 {font-size:120%;}
 
    div.eqn {
     margin:0 3em;
     font-size:200%
    }
 
    div.eqn span {
     text-align:center;
     margin:0;
     padding:0;
    }
 
    div.eqn span.b,
    div.eqn span.l,
    div.eqn span.n,
    div.eqn span.r,
    div.eqn span.d,
    div.eqn span.x {display:block;}
 
    div.eqn span.f,
    div.eqn span.o,
    div.eqn span.u {
     display:table-cell;
     border-collapse:collapse;
     vertical-align:middle;
    }
 
    div.eqn sub {top:0.5em;}
 
    div.eqn sup {bottom:0.5em;}
 
    div.eqn span.n {border-bottom:solid 1px black;}
 
    div.eqn span.oline {text-decoration:overline;}
 
    div.eqn span.l {text-align:left;}
    div.eqn span.l span {margin-left:-0.5em}
 
    div.eqn span.b {font-size:350%;}
 
    div.eqn span.r {font-size:150%;padding:0 0.1em}
 
    div.eqn span.u span.r {padding-top:0.5em;}
 
    div.eqn span.l,
    div.eqn span.x {font-size:70%;}
 
    div.eqn sub,
    div.eqn sup {
     position:relative;
     vertical-align:baseline;
     font-size:70%;
    }
 
    div.eqn span.n::selection {background-color:#8F8;}
    div.eqn span.d::selection {background-color:#F88;}
    div.eqn span.x::selection {background-color:#FF8;}
 
  </style>
  <style type="text/css" title="bordures cachées">
    div.eqn span.f,
    div.eqn span.o,
    div.eqn span.u {border-style:none}
  </style>
  <style type="text/css" title="bordures visibles">
    div.eqn span.f,
    div.eqn span.o,
    div.eqn span.u {border:solid 1px #F00}
  </style>
</head>
<body>
 
  <h1>Test de présentation de formules mathématiques</h1>
 
  <h2>Voici une façon de calculer le nombre &pi; :</h2>
  <div class="eqn">
    <span class="o">
      &pi; =
    </span>
 
    <span class="o">
      <span class="x">n&rarr;&infin;</span>
      <span class="r">&Sigma;</span>
      <span class="x">n = 0</span>
    </span>
 
    <span class="o">
      <span class="n">1</span>
      <span class="d">16<sup>k</sup></span>
    </span>
 
    <span class="o">
      <span class="r">(</span>
    </span>
 
    <span class="o">
      <span class="n">4</span>
      <span class="d">8k + 1</span>
    </span>
 
    <span class="o">
      <span class="r">-</span>
    </span>
 
    <span class="o">
      <span class="n">2</span>
      <span class="d">8k + 4</span>
    </span>
 
    <span class="o">
      <span class="r">-</span>
    </span>
 
    <span class="o">
      <span class="n">1</span>
      <span class="d">8k + 5</span>
    </span>
 
    <span class="o">
      <span class="r">-</span>
    </span>
 
    <span class="o">
      <span class="n">1</span>
      <span class="d">8k + 6</span>
    </span>
 
    <span class="o">
      <span class="r">)</span>
    </span>
  </div>
 
  <h2>Voici la définition du logarithme :</h2>
 
  <div class="eqn">
    <span class="o">
      Log(x) =
    </span>
 
    <span class="o">
      <span class="b">&int;</span>
    </span>
 
    <span class="o">
      <span class="l">x</span>
      <span class="r">&nbsp;</span>
      <span class="l"><span><i>t</i> = 1</span></span>
    </span>
 
    <span class="o">
      <span class="n">1</span>
      <span class="d"><i>t</i></span>
    </span>
 
    <span class="o">
      d<i>t</i>
    </span>
  </div>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>
voir le résultat
pages validées par Valid XHTML 1.1 CSS validé !