Category: Technology

Categories
Technology

XHTML and the Forum

An issue I had with supporting XHTML in my WordPress weblogs is that it can be difficult to control others’ input in comments. I solved the issue with Drupal by not supporting comments directly on posts. Instead, I’ve provided a forum, using the Drupal Forum module, here at RealTech. I’ve only provided the one forum for all of my sites to make it simpler for people to register, as well as follow any active discussions.

To ensure that Forum pages don’t create XHTML errors, I modified the PHP to serve pages as XHTML to exclude URLs that have the word “forum” in them. I realize this will impact on any page with ‘forum’ in the title, such as this page. However, it’s unlikely that I’ll be using inline SVG and the word “forum” in the title for the same post.


header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml"))
    if (stristr($_SERVER["REQUEST_URI"],"forum"))
        header("Content-Type: text/html; charset=utf-8");
    else
        header("Content-Type: application/xhtml+xml; charset=utf-8");
else
    header("Content-Type: text/html; charset=utf-8");

In addition, I turned filtered HTML on for forum entries, as well as installed htmLawed, to ensure that the entries are as clean as possible. Regardless, a problem in the forums won’t take down a post, and that was my main criteria for making this change.

The forums should also provide a much more flexible communication system. You can use your OpenID to register, or just register directly. You can still comment anonymously, though the comments are moderated.

Typically, any person who registered is an authorized user and could create forum topics. Well, I wasn’t quite ready to make that leap of faith. I created a “trusted” user who can create forum topics and will reserve this user classification to people I know. I then adjusted the permissions to enable forum topic creation for trusted users and admins, only.

I’ve created main forum categories. Over time, I imagine I’ll need to adjust the forum categories to be general enough to be useful, without being so general that it’s difficult to find discussions of interest.

Categories
SVG

XHTML and template.php

Since I use inline SVG in all of my sites, I need to serve my pages up as XHTML. I couldn’t find a Drupal module or option that triggers Drupal to serve the pages up as XHTML, so I added the following code at the very top of the page.tpl.php page:

<?php
header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml"))
    header("Content-Type: application/xhtml+xml; charset=utf-8");
else
    header("Content-Type: text/html; charset=utf-8");
?>

All this code does is check whether the user agent can support XHTML. If it can, the page is served up as XHTML; otherwise HTML. Using embedded PHP in page.tpl.php for the theme works as desired. However, the content type of the page no longer agrees with the content-type meta element, which is included within the $head variable.

  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>
    <!--[if lt IE 7]>
      <?php print phptemplate_get_ie_styles(); ?>
    <![endif]-->
  </head>

One solution would be to not print out the $head variable and just hard code all of the head entries. However, when you add a new module, such as the RDF module, which adds entries to the $head variable, you either have to hard code these in, also, or you lose functionality.

Instead, I used the template.php file, which is used to override default Drupal behavior. Specifically, I created a variant of _preprocess_page for my subtheme, used this to access $head, and alter it.

function flame_preprocess_page(&$vars) {
  $head = $vars['head'];
  $head = str_replace("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />",
              "<meta http-equiv=\"Content-Type\" content=\"application/xhtml+xml; charset=UTF-8\" />", $head);

  $head = str_replace("<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Burningbird's RealTech RSS\" href=\"http://realtech.burningbird.net/rss.xml\" />\n","",$head);

  $vars['head'] = $head;
}

I am still getting my head around customization in Drupal, and will have a follow-up posting later, after I’ve had more time to work through issues. In the meantime, from my understanding, the _preprocess_page passes in an array of system variables, each of which can be accessed and altered, as I’ve done in the code example. The subtheme naming is essential, otherwise I would overwrite the use of the function within the Garland theme.

There is another theme specific function for overriding variables called _phptemplate_variables, but I gather that was Drupal 5 and the approach I used is Drupal 6.x and forward.

Now, the head entries are as I want them, and modules such as RDF can add their entries without me impacting on their work. More importantly, with the addition of the XHTML support, I can add inline SVG and the SVG will display correctly for those browsers that support inline SVG.

(Note this image is now included using the IMG element. I’m now using WordPress, and WordPress does not allow inline SVG.)

hello world in svg

Categories
SVG

The SVG Radial Gradient

Chapter 7 in the book provides an introduction into some of the many useful elements in SVG. Included is a discussion of the two gradients, linearGradient and radialGradient. They can’t be used to create a visual element by themselves, but are, instead, used to fill any shape that takes the fill attribute. For instance, one of the book examples defines four radialGradients, which are then used to fill four different circles. The last two circles in the example demonstrate how the radialGradient can be used to provide spherical highlights, especially when using a monochromatic color scheme, as shown in the fourth circle.

The following is the radialGradient definition used to fill the fourth circle in the example:


<radialGradient id="gradient4" cx="20%" cy="20%" r="100%" fx="30%" fy="30%">
      <stop stop-color="white" offset="0%" />
      <stop stop-color="#666" offset="50%" />
      <stop stop-color="black" offset="100%" />
</radialGradient>

The stop elements are used to define the colors for the gradient, in this case white from 0 to 50%, and then gray from 50% to 100% black. SVG user agents, like the browser you’re using (which, hopefully, supports SVG), derive the radialGradient from these stops in combination with the other radialGradient attributes. From the example given, these attributes are:

 

  • cx and cy define the size of the radialGradient’s outer circle and are equal to the 100% stop value
  • r is the length (size) of the gradient circle
  • fx and fy are the focal point for the gradient, equal to the 0% stop value

 

In the example, the focal point of the radial gradient is set to 30% along both x and y axis, which places it in the upper-left. If both were set to 50%, then the focal point would be in the exact center of the gradient.

An attribute that was not given explicitly in the previous examples was the spreadMethod, which provides instruction in how to fill the shape when the radialGradient is smaller than the containing element. The possible values are: pad, spread, and repeat, with pad being the default.

In the >third example, three circles are filled with three different radialGradients. The cx and cy values are 30%, the fx and fy values are 20%, the length is 50%. All that differs between the circles is spreadMethod, which is, from left circle to right: reflect, repeat, and pad. The reflect value causes the gradient to repeat, from the outside in; the repeat value repeats the pattern literally, which can lead to rather abrupt transitions; the last option, pad, fills in the remaining area of the circle with the color given for the 100% stop.

When creating radialGradients, you’re not restricted to three stops or different saturations of the same color. The following SVG example has a radialGradient that uses 6 different stops, with six different colors, creating a nice neon light effect. The radialGradient is then used to fill a rectangle, rather than a circle.

Four issues with the radialGradient, all specific to browsers. I’ve found that the reflect spreadMethod can cause minor havoc with the Firefox 3.x browser in the Mac, pushing down the size of the area, without necessarily impacting on the visual rendering. This makes it a bit tricky to define a view port, or include the SVG using the object element. Opera 9.5b has some rendering delays when using gradients, and Safari/Webkit doesn’t respect the object’s transparent background. You’ll also need to use a SVG plug-in with Internet Explorer. I’ll have more on the issues of browser SVG support in a follow up writing, which I’ll link here when finished.

To see radialGradient in action, check out the following from Open Clip Art:

Dave Pena’s Sakura, which uses opacity and the radialGradient to create the soft hues and gradual coloration. This image was pulled from the downloadable archives.

A wonderful workstation by Kobo. Notice the hard “light streak” across the monitors? I discuss this use of a light streak to provide an impression of a hard, shiny plastic surface in the book.

A tasty cake from Jean Victor Balin.

Zipped files of all the book examples can be downloaded from the O’Reilly book support site.

Categories
Media SVG Writing

Working…

I’m almost ready to go live with the site. Right now I’m trying to create a custom Drupal theme from this site’s design. Once that’s finished, then we’ll be in business.

The image below was created by converting two bitmap graphics, the book cover and a painter’s easel, into one combined image using SVG–Scalable Vector Graphics.

Though the book cover image was large enough for my intended use, the easel wasn’t and using SVG allows us to resize images beyond the original and without pixelation. The combined image was sized to what you see here, and then re-converted back into a bitmap graphic, in this case a PNG.

I used Vector Magic to convert the bitmap images to SVG and Inkscape to convert back to the bitmap. Inkscape also has a bitmap trace function to convert from bitmap to vector (SVG), but I’ve not found it to be as good as Vector Magic for my purposes.

I received my inspiration for the drop shadowed clip art used in all of my sites from the old English/Victorian toy theaters. These wonderful creations featured static backdrops painted like a theater set, with characters that could be clipped or cut out from a book, pasted to a stick and then used to re-create a specific play. Ironically enough, toy theaters lost their popularity with the advent of television, itself endangered by the increasing use of the web to deliver video content. What goes around, comes around.

All is not lost for toy theater, though. Released last year and with a planned US release of this summer, a new movie adaption of Dante’s Inferno was created with modern theme and as toy theater. If your computer can swing it, select the HD trailer. Note that this trailer does have a mature theme.

For the more ambitious, a laptop framed in a toy theater box.

Categories
Photography Web Writing

Color management support in browsers

With the addition of support for color profiles built into Firefox 3, it’s time to take a closer look at how the popular browsers support color management. First though, a quick refresher on the importance of color profiles.

If you’ve every worked with a photo in a photo editor, only to have the rich colors leach out when the photo shows in your web page, you’ve run directly into what happens when your editor supports color profiles, but the browser does not. Color profiles are a mapping between device and color space, in such a way that a photo that looks richly colorful in Photoshop, still looks richly colorful in your browser, across multiple operating systems and devices.

The following are two sets of photos, each incorporating different color management. The first in the series shows the photo as I would normally create a photo for publishing on the web: I’d calibrate my monitor, set the gamma half way between PC and Mac, and then set my tool’s color space to the LCD. Then, when I work with the image, the result I get will end up looking relatively decent in both Macs and PCs. The second photo in the series hasn’t been manipulated at all. The third was created after I set the photo editor’s color settings to sRGB, and then converted the photo to this color space. When I saved the photo, I incorporated the color profile.

The first sequence of photos are screenshots taken when the photo is loaded into Firefox without color management. Though a screenshot doesn’t necessarily capture the nuances of color, I think you can see that the color of the last photo from the first sequence of three differs from the color of the last photo in the second sequence of three, which consist of screenshots from Safari 3.x, which does have built-in support for color profiles.

screenshot one screenshot two

The following are the actual photos used for these screenshots. The first shows the photo without any color manipulation and not using color management.

bird with pink feathers

The second photo was made using my old LCD color trick.

bird with pink feathers

The last photo was not manipulated in the photo editor, other than to scale the image. The sRGB color profile was embedded into the photo. I could have also embedded the Adobe RGB color profile, but I stayed with the popular sRGB color profile.

bird with pink feather

If you look at this page using a browser that doesn’t support color management, the first and third photos should be very similar. However, if you look at the photos using Firefox 3 with color management enabled, Safari 3, or other browser or device that supports color management, the last photo should appear more colorful than the first. To get an even better idea of the color variations, the following are screenshots of color swatches in a web page— opened in both a color managed browser, and in a browser that doesn’t support color management. The difference should be noticeable.

Currently, I know of only a few browsers that support color profiles: Safari 3.x, in both Windows and the Mac, supports color management; supposedly Omniweb also supports color management, as did the older version of IE for the Mac (IE 5.5), though I’ve not tried either tool. Now, Firefox 3 supports color profiles, but not without a caveat: color profiles are disabled by default.

The reason Firefox 3 is releasing without color profiles on by default is primarily because of performance issues. Turning on color management in Firefox 3 can really slow load times of a site that uses color profiles embedded in pictures, especially larger pictures. In addition, according to John Resig there are some real concerns about plug-ins, such as those for Flash and Silverlight, that don’t do color profile support, and which can lead to incorrect renderings.

I can understand the issues, though I am disappointed. Support for color profiles with Firefox 3 would go a long way to encouraging color profile support in other browsers. I hope that Firefox 3.1 works through the performance issues and we get support for color profiles by default. You can still take advantage of color profile support in Firefox 3, now, but you either have to set a custom option using a less than friendly procedure, or make use of a color management add-on.

Do I use embedded color profiles in images at my site? I have started to, though not across all sites. If I use color management, I won’t use my LCD trick, which means that the photo won’t look as good for those people using browsers that don’t support color profiles. At the same time, I would really like to encourage better graphics support in our browsers, which means using the functionality we want the browsers to support. We’ll never progress if we keep designing for the lowest common denominator.

For more on color profiles, check out the International Color Consortium web site.