Home arrow PHP arrow Page 4 - An Image is Worth a Thousand Words in PHP

The Browser Problem - PHP

This article, the first of two parts, describes a fun little project that will help you sharpen your image manipulation skills. The completed application takes an image and converts it to a string of text that resembles the original image. Brian Vaughn gets you started.

  1. An Image is Worth a Thousand Words in PHP
  2. Project Overview
  3. Setting Up Our Class
  4. The Browser Problem
By: Brian Vaughn
Rating: starstarstarstarstar / 9
December 14, 2005

print this article



There are a couple of major hurdles we’ll need to overcome in order to develop our application. One of the largest is the issue of browser compatibility. Developers and designers have dealt with this issue for a very long time – and I’m sure that most of you have probably had your fair share of experiences with it as well. The good news for our app, though, is that the browser compatibility issue really only pertains to CSS, and even then is relatively simple. Let’s add the following method to our ‘img_to_txt’ class and then we’ll talk a bit about it:

 # return browser-specific, CSS code for text formatting
 function get_css() {
  # first, properly detect user's browser-type
  if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ) {
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Netscape') )
     $browser = 'NETSCAPE';
    else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') )
     $browser = 'FIREFOX';
    else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') )
     $browser = 'SAFARI';
     $browser = 'MOZILLA';
  } else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ) {
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') )
     $browser = 'OPERA';
     $browser = 'INTERNET_EXPLORER';
  } else {
    $browser = 'OTHER';
  # next, return appropriate browser-specific CSS code
  switch( $browser ) {
   case 'MOZILLA':
   case 'FIREFOX':
   case 'NETSCAPE':
    $line_height  = 7.5;
    $letter_spacing = -2.5;
    $font_size   = 13;
   case 'OPERA':
    $line_height  = 7.5;
    $letter_spacing = -1;
    $font_size   = 10;
   case 'SAFARI':
    $line_height  = 7.75;
    $letter_spacing = -2;
    $font_size   = 11;
    $line_height  = 8;
    $letter_spacing = -1.5;
    $font_size   = 11;
  } # END browser switch-case
  # return CSS
  return 'style="line-height: ' . ( $line_height * $this->aspect_ratio ) . 'px; letter-spacing: ' . ( $letter_spacing* $this->aspect_ratio ) . 'px; font-family: Courier New; font-size: ' . ( $font_size* $this->aspect_ratio ) . 'px;"';'px;';

 } # END get_css()

Our main concern here deals with our image's aspect ratio. In other words, if we are converting an image that is 100 pixels wide by 50 pixels tall, we would like our resulting text image to be approximately those same dimensions. If we’re a little off it won’t make a big difference, but it would obviously not suit for our converted image to end up being 50 pixels wide by 100 pixels tall.

So how do we solve this? Simple, right? Wrong. Many of you may guess that by using a monospace font (such as Courier New) we would eliminate this issue. And you are partially correct. Using a monospace font will help greatly, as it will keep each of the text characters approximately the same width (an important fact to consider for our app). However, we still have to face the fact that most browsers will render a block of text that is 6 chars x 6 chars to be much taller than it is wide. This is due to a property known as “line-height” (or the amount of space between different, horizontal lines of text). For our purposes, many browsers will also render characters a bit too far apart from each other within lines. To correct this we can specify another display attribute, “letter-spacing”.

Unfortunately, this is not enough. Even on the same computer, each of the major browsers will render a block of text slightly differently. Our function, ‘get_css’, compensates for this by returning a string of CSS text that is appropriate for the browser being used to display our text-image. This means that our image should be roughly the same size (and aspect ratio) when viewed in each of the major web browsers.

(Note: for the purposes of this application, CSS has been given for Firefox, Netscape, IE, and Opera (Windows OS), as well as Safari and Firefox (Mac). If you wish to add additional browsers, however, you may do so easily, simply by modifying the ‘get_css’ method.)

What Have We Done So Far?

Admittedly, we haven’t started any actual conversion yet – but what we have done has been important just the same. So far we’ve set up our basic image conversion class, and defined its accessor methods. This is a good beginning, although a bit of a cliffhanger. Fortunately, it will allow us to jump right into the fun stuff when we pick up with part two of this lesson.

If you have any questions about the material we have covered so far, please feel free to contact me. Otherwise I hope to see you again in part two!

>>> More PHP Articles          >>> More By Brian Vaughn

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates


Dev Shed Tutorial Topics: