Things HTML is not designed to do.

Here is yet another day in the IT biz where I have lost 4 hours trying to accomplish something that would seem very simple but turns out not do be, due to a shortcoming in how HTML works. I am working on a project where I had text in two different sizes and I needed to vertically align the top of the text in the two different font sizes.

Easy you say? You have seen it all the time. Odds are, when you see text in different font sizes aligned like that, What you are looking at is a graphic, not actual text. Or if it is actual text, as you scale the text larger or smaller the alignment breaks.

Here is the text as it normally shows up. That is aligned to the baseline, or the bottom of most letters in a font. This is the same as specifying align-text: baseline in css. I selected the text with the mouse and the highlight around the text shows us several things. Each letter has several attributes to it. The baseline, the standard height of the letter, which is where the top of the letter L goes to. There is also the descenders, where the bottom of the letter g goes to. In addition to that there is leading (or blank space) above the the top of the letters and descending bellow the bottom of the letters. That leading is a different size depending on the size of the font.

Here we are using the css vertial-align: bottom. The bottom of both fonts, where the leading ends below the font are lined up. Because the text in the smaller size has less leading, it shows up vertically aligned lower then the text in the larger font face which has more leading.

Here we are using the css vertial-align: top. The top of both fonts, where the leading ends above the font are lined up. Because the text in the smaller size has less leading, it shows up vertically aligned higher then the text in the larger font face which has more leading.

Here is a page at w3org which shows a graphic and text in two different sizes. Notice that it very easy to align text so the baselines are the same. What you will not find here is an example where the top of the letters in the fonts in different sizes are aligned.

I tried dozens of different ways to fix this. A table with each word in a different cell is no good. You still align to the top of the leading, not the tops of the letters. I found out I needed to wrap the word I want to change the location of with a <span></span> tag. I kept going back to the reference material on vertial-align. You can raise or lower the vertical alignment by percent. Positive numbers moves the text up, negative numbers move the text down. You can specify the number in pixels, percents and EMs.

If use pixels so that we can bump the text up 5 or 6 points lets say. When we zoom the page in the browser it may or may not look right. Different browsers handle that different ways. Usually in situations like this using the em is a good measurement. Since it is based on the size of the font. For the text I am working with here. .3em moves the text up from the baseline enough to make it look right.

The paragraph had the font size set to the larger text at 56 points. Here we are with the text properly aligned. the HTML for this looks like:

<span style="vertical-align: .3em;font-size: 36px;">GO</span>DEEP

x2engine on shared hosting without PDO

I have a friend who was interested in playing with a web based CRM (Contact Relational Management) on their own shared hosting webserver. I looked around and eventually arrived at x2engine. The x2engine is built on top of the YiiFramework and only requires MySQL 5 and PHP 5.1 or greater. Since he had PHP 5.2 I thought we would be all set.

I uploaded the x2engine.zip file via my friends cpanel page and installed it into his /public_html folder. Created MySQL databse via phpMyAdmin. vistited the /x2engine folder with my webbrowser and put in my database information and then got this error

include(PDO.php) [function.include]: failed to open stream: No such file or directory

The good news is it takes less than 5 minutes to fix this error. I found the solution in less than 30 minutes of Googling. However it took me almost 6 additional hours to figure out what to do. So in hopes of saving someone else this kind of grief let me explain How to install x2engine or any other YiiFramework on a shared hosting service that has disabled PDO.,

It turns out PHP 5.1 introduces something called PDO (PHP Datatbase Objects). Many hosting servies that provide shared hosting disable PDO where it is not possible to enable it. As it turns out there is a workaround for this called PHPPDO, which is a php library that provides a PHPPDO emulation layer. My problem was that I tried to install the PHPPDO library right from their SourceForge page. It turns out there is a YiiFramework extension that will plug right in to any YiiFramework based app such as x2engine.

In the case of the x2engine you have to visit the webpage and set up the database information for it to create the config/dbConfig.php. The YiiFramework says the file will be config/main.php but the x2enigne uses config/dbConfig.php.

The YiiFramework page for PHPPDO is found at http://www.yiiframework.com/extension/phppdo/ On the right hand side of the page under the search bar it says Downloads and there you will find a link to phppdoextension_1.4.tar.bz2 which links to http://www.yiiframework.com/extension/phppdo/files/phppdoextension_1.4.tar.bz2

Once you have that file in hand here is what you need to do. All of this can be done from cPanel. I will act like your website is at http://example.com

1. Create your mysql database and user/password for accessing the database with phpMyAdmin.
   
2. Upload the x2enginge.zip file to your /public_html folder then extract the x2engine.zip and you will end up with /public_html/x2engine.
3. Vistit http://example.com/x2engine and fill out you admin user password, admin user email address and the information from step 1 for your MySQL server. When done click on the button at the bottom of the page to create the config files. This includes /public_html/x2engine/protected/config/dbConfig.php.
4. Upload phppdoextension_1.4.tar.bz2 to the /public_html/x2engine/protected/extensions folder. Extract the phppdoexentsion_1.4.tar.bz2 file.
5. Edit the file /public_html/x2engine/protected/config/dbConfig.php and insert after the $db=array( the following two line 'class'=>'application.extensions.PHPPDO.CPdoDbConnection', 'pdoClass' => 'PHPPDO', and save the file
6. Visit the page http://example.com/x2engine which will now work.

The dbConfig.php file will look pretty much like this, mind you, the connection information will be specific to your site:

<?php
$db=array( 
 'class'=--> 'application.extensions.PHPPDO.CPdoDbConnection',
 'pdoClass' => 'PHPPDO',
 'connectionString' => 'mysql:host=localhost;dbname=database',
 'emulatePrepare' => true,
 'username' => 'username',
  'password' => 'password',
 'charset' => 'utf8',
);
$appName='X2Engine';
$gii=array('class'=>'system.gii.GiiModule',
 'password'=>'badtad00',
 // If removed, Gii defaults to localhost only. Edit carefully to taste.
 'ipFilters'=>false,
);
$email='user@example.com';
$language='en';