One of the biggest challenges with building a WYSIWYG HTML editor is handling the fact that HTML doesn't provide any guarantees for how things will be displayed. Different browsers and different platforms all render things slightly differently and nearly all browsers provide preferences that let users adjust the way pages display. While this can be frustrating if you're trying to make your site pixel-perfect, it's actually a really important feature as it allows users with limited vision to increase the font size for web pages or to choose a font that's easier for them to read. Fortunately, EditLive! provides a number of options to help your users create content that works well for everyone and fits into your site design.

Since the most common difference between browsers is the size of text, let's take a look at EditLive!'s font size options. If you haven't changed the default configuration file, the font size options are most likely 7pt, 8pt, 10pt, 12pt, 14pt, 18pt and 24pt. These are familiar font sizes for users and make them feel at home, but if the pt sizes were actually used in the HTML it would negate all the accessibility benefits of HTMLs variable font sizing. Instead, the sample configuration inserts relative font sizes that for the vast majority of users render at about those point sizes. Users who have adjusted their browser preferences will still get the benefits of the text being sized so they can read it easily. The configuration to achieve this is:

<toolbarComboBox name="Size">
  <comboBoxItem name="1" text="7pt"/>
  <comboBoxItem name="2" text="8pt"/>
  <comboBoxItem name="3" text="10pt"/>
  <comboBoxItem name="4" text="12pt"/>
  <comboBoxItem name="5" text="14pt"/>
  <comboBoxItem name="6" text="18pt"/>
  <comboBoxItem name="7" text="24pt"/>
</toolbarComboBox>

If you'd like your users to be aware that the font sizings are relative, you can easily change the way the options display just by changing the "text" attribute. For example:

<toolbarComboBox name="Size">
  <comboBoxItem name="1" text="Tiny"/>
  <comboBoxItem name="2" text="Rather Small"/>
  <comboBoxItem name="3" text="Normal"/>
  <comboBoxItem name="4" text="A Bit Bigger"/>
  <comboBoxItem name="5" text="Kinda Big"/>
  <comboBoxItem name="6" text="Large"/>
  <comboBoxItem name="7" text="Gigantic"/>
</toolbarComboBox>

If however, we want to change what gets inserted into the HTML when on of the options is selected, we change the "name" attribute. So to use specific pt sizes:

<toolbarComboBox name="Size">
  <comboBoxItem name="7pt" text="7pt"/>
  <comboBoxItem name="8pt" text="8pt"/>
  <comboBoxItem name="10pt" text="10pt"/>
  <comboBoxItem name="12pt" text="12pt"/>
  <comboBoxItem name="14pt" text="14pt"/>
  <comboBoxItem name="18pt" text="18pt"/>
  <comboBoxItem name="24pt" text="24pt"/>
</toolbarComboBox>

You can put whatever options your users need, including a mix of relative and absolute font sizes and you can always add extra items or remove items that you don't need.

This entry is filed under User Experience. You can follow any responses to this entry through the Atom feed. You can leave a response, or trackback from your own site.