skiFFie Making Drupal Mobile!

This simple extract show how you can format your text to prevent it from breaking when served as application/xhtml+xml. This is pretty important as malformed XHTML can really maul your site. Although the built-in corrector helps the automatic line breaking input type setting can be a killer.

For the most part I use the input format filtered HTML:
Web page addresses and e-mail addresses turn into links automatically.
Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br />
Lines and paragraphs break automatically.

I begin this a teaser text and follow immediately with my "page break character for mobile devices": in this case <br class="mobi" />. I would then insert a couple of line breaks. It seems that adding the <br class="mobi" /> directly after any HTML formatting reduces the risk of errors.

An example of this would be:

Welcome to skiFFie.com. Home of the accessibility module. Making Drupal Mobile!<!--break--><br class="mobi" />

For example a list followed by the mobile break directly after could look like this:

<ul>
<li>One</li>
<li>Two</li>
</ul><br class="mobi" />

Same applies for <code></code> blocks.

I use number of techniques to embed PHP into pages where applicable. Here is a very simple example:

<?php
$code1 = '<?php
echo "some come";';
# COMMENT TO PREVENT CORRECTOR ENDING PARAGRAPH </p>
echo "<div class=\"code_block\">";
highlight_string($code1);
echo "</div>";
?>

I am using < to display the code in this page. A very important factor to eliminate within code blocks is empty lines. If you wish to space your code text out make sure that there is a tab (\t) in the empty (# comments work too).

That's about it. It is quite complicated and very annoying when you are trying to trouble shoot the XHTML errors. Easy option of course is to turn off the "lines and paragraphs break automatically" option.

Remember to close <hr />, <img /> and <br /> tags too!