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
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
- Create your mysql database and user/password for accessing the database with phpMyAdmin.
- Upload the x2enginge.zip file to your /public_html folder then extract the x2engine.zip and you will end up with /public_html/x2engine.
- 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.
- Upload phppdoextension_1.4.tar.bz2 to the /public_html/x2engine/protected/extensions folder. Extract the phppdoexentsion_1.4.tar.bz2 file.
- 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
- Visit the page http://example.com/x2engine which will now work.
'pdoClass' => 'PHPPDO',
'connectionString' => 'mysql:host=localhost;dbname=database',
'emulatePrepare' => true,
'username' => 'username',
'password' => 'password',
'charset' => 'utf8',
// If removed, Gii defaults to localhost only. Edit carefully to taste.
You might say, "Hey, Eldergeek. Ubuntu is the most popular Linux distribution out there, how can it possibly be a failure?" Just bare with me and allow me to explain my position. By their own admission, Ubuntu creates initiatives to make Ubuntu Linux better and advance Linux. Let's took at their track record. Here are some past initiatives
* Improved audio via PulseAudio
* Seamless video from boot menu to desktop
* 10 Second Boot Times
* Create a better looking desktop than MacOS
* Desktop notification System.
* The Unity Desktop metaphor
And Future Initiatives
* Wayland Video System
* 200 million users in 2 years
What do they have have in common? Ubuntu's track record of half-backed, half-done, left-for broke "improvements". Let's take a look at this list and see where we are.
Pulse Audio is far from perfect. Ubuntu has never lived up to their promise of getting pulse audio working anywhere near seamless for most users.
Ubuntu also said they would perfect going from a graphical boot manager, into a graphical kernel booting with animation into the gdm log in screen. Well, it works for some users and vidoe cards and not for others. Some get blank screens till booting is done. Some cant even boot unless they disable all of the advanced graphic boot stuff. Did it get some love from Ubuntu? Yes it did for 2 or 3 releases. When it turned out the problem was going to take a lot of work to resolve, what did Ubuntu do? Announce another initiative.
Yes, 10 second boot times will come to us in 1 or 2 releases. 6 releases down the road? Some people can boot in 20 seconds. But 10 second boot times have never happened. Canonical/Ubuntu are not working on those issues any more either as a major thurst of where the work is going.
Desktop notifications were going to make interaction with short term status messages beautiful and seamless. It was new, fancy and needed some work. It got it for 2 or 3 releases. Is it anywhere near perfect yet. No? So has that goal been pursued till it was perfected. I think we all know the answer to that question.
Creating a better looking desktop than MacOS. Well there was talk about that. We changed the theme color from orange/brown to purple/orange. A little work in icons and notifications, and of course plenty of changes to make things look more like a mac. But even this goal has been abandoned to chase after a new desktop metaphor.
Unity is getting the love now. But it has had 2 relases to be worked on. And it will get a 3rd release with working on it as the primary focus. But watch out, that will have to stop. There are further initiatives that must be worked on.
Wayland is due for 3 releases of love.
At that point. The 2 years will have passed. Ubuntu COULD have 20 million users right now. With all the half baked work on graphics, sound, boot times, eye-candy and new desktop. Do we really think that Ubuntu is going to gain another 180 million users in the next 24 months? Only if Ubuntu becomes the most popular phone OS ever!
Take a look at this list and ask yourself. Has Ubuntu ever accomplished one of its major long term goals? So far the answer is "No". Ubuntu is a failure. Every time the announce what they are going to fix on the desktop next, I know what system will still be half-done in 2 years time.
Recently in response to this blog post here. Somone made the remarks that shortcut keys are what makes Unity/Gnome Shell 3 usable. To quote them, "HOWEVER, without providing keyboard shortcuts, you might as well shoot the user in the head."
The fact that Gnome Shell 3 and Unity are much better with shortcuts is quite ironic.
Regular users complain that these environments don't work for them. Power users that champion these systems customize them the make them more effective for their own use. One of these customizations is defining and using shortcut keys. Not just the normal CTRL-F for find or CTRL-C for copy. But highly customized shortcuts like CTRL-ALT-1 is go to desktop 1, CTRL-SHIFT-1 is move window to desktop 1 while remaining on the current desktop and SHIFT-ALT-1 is move window to desktop and switchto desktop 1 at the same time.
The big drive from Desktop Environments like KDE 1, KDE 2, KDE 3, KDE 4, Gnome 1 and Gnome 2 is the desire to create a desktop that users can feel productive in without having to memorize shortcut keys. The great equalizer? Everything being quickly and easily accessible with the mouse.
So when the successors to Gnome 2 (both Gnome Shell 3 and Unity) create desktops for regular users that make using the mouse so inefficient that the only way the desktop is usable and productive again is fur the user to learn shortcut keys, I find it rather funny.
Gnome Shell needs shortcut keys and has tried to create a distraction free environment by removing all of the taskbar items and indicators. Unity needs shortcut keys and has tried to create an environment where they have a mega indicator area with custom written indications. If the app you run does not have a plugin to work with it, then it is a second class citizen.
I say try one of the lighter Window Managers and leave the Desktop Environments behind. They stick to desktop.org standards. Applications that take advantage of trays, docks and task lists will fit right in. Most of these desktop environments also have a 10 to 15 year track record of being productive and easy to use...once you learn a few shortcut keys.
- Space is set aside on the hard drive and a copy of the Linux that will be on the live CD is put into a folder on the hard drive.
- Using a special process called chroot, the computer is tricked into thinking the series of folder holding the Linux that ends up on the CD is actually a running system and commands are able to be executed on this system.
- Commands are then executed that download and install software. Software can be removed as well. Settings can be configured and other changed can be made.
- When all the changes are done a program that works very much like zip takes what is usually about 2 gigs of software and compresses it down to one file that is about 680 megs in size.
- The 680 meg compressed file, a copy of the Linux kernel the booted system will use and a special boot loader for starting from CD and booting Linux up are all placed together in one directory.
- A bootable ISO CD image file is created from those files.
- A CD is burned from the ISO image.
- The Slax CD ISO image file is opened up with an ISO editor that allows files to be added or removed from a ISO image. PowerISO or ISO Magic for Windows or ISO Master for Linux.
- Any slax module can be added to the /modules folder or removed from the /modules folder
- Any files that are not in modules can be put into the /rootcopy folder. Example: to put the file README.TXT on the desktop put it in /rootcopy/root/Desktop.
- Files that are to be available on the CD but not copied the the running system can be put in /extra
- Save the ISO image.
- Burn the ISO image to disk.