title: change list direction based on the text
body: <p>I have a list which is generated from user input. The content of the list can be from any language, including RTL languages.</p>
  
  <p><strong>How do I change the list's direction automatically based on the language?</strong></p>
  
  <p>I know <code>unicode-bidi</code> works just fine on any regular old text, and the <code>direction</code> property cant get the "auto" value like the Dir attribute.</p>
  
  <p>eg:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;english&lt;/li&gt;
    &lt;li&gt;left to right&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul&gt;
    &lt;li&gt;עברית&lt;/li&gt;
    &lt;li&gt;ימין לשמאל&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>with only css changes should output 2 lists one floating to the left and with the dots to the left of the text and vice versa</p>