Show unicode HTML objects ruining my style

Question

So this morning, for fun, I grabbed the Unicode character file at http://www.unicode.org/Public/6.2.0/ucd/NamesList.txt and wrote a small tiny PHP script that displays this. It takes a few seconds to load literally thousands of characters and display HTML.

I tried to create a very simple grid using hidden div blocks with hidden overflow. But when I view a page in Chrome, some of them move down or up from the rest on it. But only occasionally.

http://shawnsworld.ca/chars/fullunicode.php

CSS code: http://shawnsworld.ca/chars/style.css

Any idea why Chrome will display the fields so that they are NOT in a straight line?

Answer 1

In Chrome, div.character defaults to vertical-align baseline .

Try removing height:100px; from div.character to your CSS. You will see that all the boxes are sitting on the baseline of each row.

According to Huangism, changing vertical-align to top fixes the problem.

Answer 2

Try adding vertical alignment to your div

 div.characters { vertical-align: top; } 

Answer 3

Something to compare: http://www.unicodeblocks.com/block/Dingbats

Is this what you are looking for? If so, I can give you some advice.

... other things, there are many errors, for example:

 <div class="character"> <span class="entity">&# x@ @;</span><br> <span class="unicodeNumber">@@ </span><br> <span class="name">07C0</span> </div> 

just skip any line starting with @