title: CSS progress bar text color for contrast filled and empty backgrounds?
body: <p>I want to have XHTML+CSS progress bar with contrast colors between filled and empty background areas.</p>
  
  <p>I have a problem with text color. Because filled and empty backgrounds are too contrast (this is a requirement), to remain readable the text should be double-colored to be contrast to both of them. The image should explain it better than words:</p>
  
  <p><a href="http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png" rel="noreferrer">Progress bar with dark blue filled area and white empty background http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-example.png</a>
  <a href="http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png" rel="noreferrer">Example of the problem http://drdaeman.pp.ru/tmp/20090703/progress-bar-text-problem.png</a></p>
  
  <p>My current progress bar implementation is trivial, but as example above shows, the text can be hard to read in some cases, which is exactly a problem I want to solve.</p>
  
  <p>My current (simplified) implementation attempt (fails, because <code>overflow: hidden</code> does not work without positioning <code>div.progress</code> which I cannot position because of inner <code>span</code>'s <code>width</code>):</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;Progress bar test&lt;/title&gt;
    &lt;style type="text/css"&gt;
      div.progress_bar {
          border: 1px #ccc solid; position: relative;
          text-align: center; height: 32px;
      }
      div.progress_bar .progress {
          height: 32px;
          overflow: hidden; /* This does NOT work! */
      }
      div.progress_bar .progress div {
          position: absolute; width: 100%; height: 32px;
          z-index: 30; overflow: hidden;
          background-color: #44a;
      }
      div.progress_bar span {
          position: absolute; top: 0; left: 0; width: 100%;
          z-index: 20;
          color: #000;
      }
      div.progress_bar .progress span {
          position: absolute; top: 0; left: 0; width: 100%;
          z-index: 40;
          color: #eee;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- Can be of any (unknown) width. Think of "width: auto".
         The 400px value is just to keep it small on a big monitor.
         DON'T rely on it! --&gt;
    &lt;div id="container" style="width: 400px;"&gt;
      &lt;div class="progress_bar"&gt;
        &lt;!-- div.progress is a dark filled area container --&gt;
        &lt;div class="progress" style="width: 51%;"&gt;
          &lt;!-- Actually dark filled area --&gt;
          &lt;div style="width: 51%;"&gt;&lt;/div&gt;
          &lt;!-- Text (white).
               Does not clip, even with overflow: hidden on parent! --&gt;
          &lt;span&gt;This is a test&lt;/span&gt;
        &lt;/div&gt;
        &lt;!-- Text (black) --&gt;
        &lt;span&gt;This is a test&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Live version of the above: <a href="http://drdaeman.pp.ru/tmp/20090703/test2.html" rel="noreferrer">http://drdaeman.pp.ru/tmp/20090703/test2.html</a><br>
  Previous attempt: <a href="http://drdaeman.pp.ru/tmp/20090703/test.html" rel="noreferrer">http://drdaeman.pp.ru/tmp/20090703/test.html</a></p>
  
  <p>The images are GIMP edited prototypes, and not exactly what this code displays.</p>
  
  <p><strong>Add:</strong> Thank you all, especially Meep3D, Nosredna and Lachlan! However I still have a problem — in my case progress bar should have no fixed width and take all horizontally available space (<code>width: auto;</code> or <code>width: 100%</code> are acceptable). But without <code>width: 400px</code> rule Lachlan's code breaks. And I'd still like to avoid using JavaScript, if that's possible.</p>