The Browser Problem - PHP

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';
    else
     $browser = 'MOZILLA';
  } else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ) {
    if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') )
     $browser = 'OPERA';
    else
     $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;
   break;
   
   case 'OPERA':
    $line_height  = 7.5;
    $letter_spacing = -1;
    $font_size   = 10;
   break;
   
   case 'SAFARI':
    $line_height  = 7.75;
    $letter_spacing = -2;
    $font_size   = 11;
   break;
   
   case 'INTERNET_EXPLORER':
   default:
    $line_height  = 8;
    $letter_spacing = -1.5;
    $font_size   = 11;
   break;
  
  } # 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!