Graphic headlines while maintaining semanically correct markup

My clients and the Art Director that I work with often wants graphic headlines set in a specific font. I agree since fonts are often important carriers of corporate and brand identities and the combination of Umbraco and ImageGen provides me with the tools to deliver this easily. On the other hand I take pride in making sure that the websites that I create generate semantically correct markup. A great deal of my clients even demand this and on a personal level it's a question of democracy. Not all people can read what is graphically printed on a screen unless it's accompanied by a computer-readable text. On top of that you have to please the search engines. They can't read a GIF-headline(!)

In short: I want the H1-tag to represent the page main headline, the H2-tag the level 2 sub headline and so on, but I want them to look good for all us "de luxe viewers" with a special sassy font, and all that.

Luckily there are ways to get the best of both worlds, using some tricks in CSS. Here's an example of a headline (using ImageGen to generate the graphic headline) that will display a graphic image if you have stylesheets turned on and an ordinary H1 tag if you have turned off all stylesheets in your browser:


<h1 class="myGraphicHeadlineStyle" style="background:url('/umbraco/ImageGen.aspx?text=HEADLINE&FontSize=40
&Font=/fonts/MySpecialFont.ttf&FontColor=226644&Align=left&
Valign=top&Width=500&Height=60&AntiAlias=True');width:500px;height: 60px;" title="HEADLINE">HEADLINE</h1>

Accompanying this tag there is a CSS class: myGraphicHeadlineStyle. It looks like this:

.myGraphicHeadlineStyle
{
background-repeat: no-repeat;
overflow: hidden;
text-indent: -100em;
/* top right bottom left */
margin: -20px 0px 0px -10px;
}

The key things to look at here is overflow and text-indent. What happens is that there is always an HTML headline printed but the fact that overflow has been set to hidden and that the text is indented to -100em will make the browser render the HTML-version of the headline out of sight for the user, unless all stylesheets are turned off.

Looking closely at the code you'll see that the image headline is a background image to the H1-tag, introduced using CSS. Thus no CSS = no graphic headline, no indent and no overflow hidden. This means that if you turn off all stylesheets you'll see a regular times H1 headline that is as semantically correct as agent Dale Coopers suit.

To be honest: I'm not going through all this trouble to please the minority of users who prefers to surf the web bereft of all the visual elements that CSS's introduce. The main purpose is to present a semantically correct face to search engines like Google. To a search engine an IMG-tag is an image, an H1-tag is a headline and never shall the two meet.

This is all experimental and has been pieced together using various sources on the net so please send me feedback if you discover something wrong in my logic.

A word about the ID's of Web Server Controls

Today I added a web component (an ascx-file) as a macro in Umbraco and I discovered that the ID's that you give the web server controls are altered when you use the web component as a macro in Umbraco. A web server control that, in your source code, has the ID "txtCompany" will be converted into something like "MyPage_5$txtCompany" when used as an Umbraco macro. This is a problem if you in your CSS refer to the elements by their ID's. The solution is to use the CssClass parameter of the web server controls and access them using a custom class. Or you could reference them by their element type (input, select etc).

Another thing that caused some trouble was that I had mixed regular HTML-tags and web server controls and the HTML-tags required the correct ID of the web server control. In my case I had used the label tag for a form field, like this:

<label for="txtCompany">Company</label>

But since the ID of the form field "txtCompany" was altered, the label lost it's handle on it. The solution was to use a web server control to render the label as well:

<asp:label ID="lblCompany" runat="server" AssociatedControlID="txtCompany">Company</asp:label>

This way the label was given a proper ID reference.

EU flag for Umbraco Stats

I got visits from the EU on one of my Umbraco sites and saw that there was no flag to represent these visits in Umbraco Stats. So I asked my designer colleague to make one if he had the time, which he had. If you want, you can download it here or just save this image: . Put it in the folder where all the other flags are.

I also posted the file to Niels so he can add it to the Umbraco Stats package.

How to get headlines with more than one row using imageGen

ImageGen is an add-on for Umbraco which (among other things) can be used for generating graphic headlines; at least this is how I've used it so far. There is one small problem though: ImageGen won't automatically insert a newline if the headline is too long. Let me give you an example:

<h1><img src="/umbraco/ImageGen.aspx?text=This%20is%20a%20very%20%long%20headline%20indeed&FontSize=46&Font=/fonts/amtl.ttf&Width=487" /></h1>

Note that I have set a width for the image so that it won't become longer than the area that I have available on my page. This is what's causing the problem. When ImageGen tries to render the long headline and still honor the width contstraint you end up with a broken image icon. Sure, it works if you remove the width parameter, but then you'll have a headline that is far too long for the page.

So what do you do?

I started by inserting the UTF-8 characters for newline (\n):%0D%0A in the places where I wanted to break the headline. Now, if you try running this you'll see that you get a headline, but it will only show the words up to the first newline (the first %0D%0A in the headline text). In order for ImageGen to know that it has to make the image higher so all words become visible, you'll have to add a height-parameter to your ImageGen querystring and make the headline align with the top of the image (adding a valign-parameter). Like this:

<h1><img src="/umbraco/ImageGen.aspx?text=This%20is%20a%20very%20%long%20headline%20indeed&FontSize=46&Font=/fonts/amtl.ttf&Width=487&Height=120&Valign=top" /></h1>

And voila! You have a headline with a newline in it and you can see all the words!

Hey, wait a minute?! What if the headlines are dynamic and set by the user in the Umbraco admin? This means that there's no way of knowing beforehand if the headline will be sliced into one, two or three rows. This means that there's no way of knowing the value of the height parameter.

The solution is very simple: along with the textfield where the Umbraco user writes the headline, add a textfield where he/she can specify the height of the image that is generated. And while you're at it, why not add a field where the user can specify the font size as well (if you trust your users). ;-)

Then all you have to do is fetch the values of these parameters in the ImageGen tag that you place in your page template. It can look something like this:

<h1><img src="/umbraco/ImageGen.aspx?text=<?UMBRACO_GETITEM field="txtPageHeadline" useIfEmpty="pageName" urlEncode="false"/>&FontSize=<?UMBRACO_GETITEM field="txtFontSize" textIfEmpty="24" urlEncode="false"/>&Font=/fonts/amtl.ttf&FontColor=555555&Align=Left&Valign=top&Width=487&height=<?UMBRACO_GETITEM field="txtImageHeight" textIfEmpty="40" urlEncode="false"/>" alt="<?UMBRACO_GETITEM field="txtPageHeadline" useIfEmpty="pageName" urlEncode="false"/>" /></h1>

In the code above I have also added and alt-tag for the image and enclosed it in HTML-header tags (<h1></h1>). This is because it helps identify the headline and makes it readable for users that can't see. Good coding practice in other words.

I have also set the parameter urlEncode="false" in the UMBRACO_GETITEM tag. It has to be this way. If you set it to true, it will URL-encode the already encoded newline (%0D%0A) and this solution won't work.

Using the Database Publishing Wizard

I like to develop sites using a staging server and when everything looks fine I move it to the live server. This means that you have to ping-pong the content of the Umbraco database back and forth between the staging server and the live server in order to ensure that you're always working with the latest version of the site.

The simplest and most effective way to do this is using Microsoft SQL Server Database Publishing Wizard. Here's how the tool is described in the ReadMe-file:

The Database Publishing Wizard enables the deployment of SQL Server databases (both schema and data) into a shared hosting environment. The tool supports both SQL Server 2005 and 2000 and does not require that source and target servers are the same version.

The tool provides two modes of deployment:

1. It generates a single SQL script file which can be used to recreate a database when the only connectivity to a server is through a web-based control panel with a script execution window.


2. It connects to a web service provided by your hoster and directly creates objects on a specified hosted database.

The tool may also be used by hosters to script out databases for backup or transfer purposes.

Don't hesitate to download and install this invaluable companion. It has never failed me eventhough I have run rather hefty SQL-scripts (18 Mb and more). Yes, it takes a while to execute a script like that on a remote server, but it works!

Improved Swedish language pack for Umbraco

I've done some work on getting Swedish to work well in Umbraco and here's the recipe:

1. Edit the web.config file in your Umbraco root. It should look like this:
   <globalization requestencoding="UTF-8" responseencoding="UTF-8" uiculture="sv-SE" culture="sv-SE"></globalization>
   
   The correct culture for Swedish/Sweden is "sv-SE" and nothing else! I (and others with me) have sometimes mistakenly used "se-SE" as the Swedish culture setting, but this setting is for the Swedish Lappish/Sami culture. Here's a link to a complete list of language codes if anyone is interested.



2. In order for Umbraco to display Swedish in both the login prompt and in the actual administration interface you will need to have two language files in your "/umbraco/config/lang" folder: sv.xml and se.xml (just make a duplicate and rename one of them). Why this is needed, I don't know but it seems like the login page wants a file called "sv.xml" and the admin interface uses a file called "se.xml". Perhaps it's a bug in Umbraco?



3. I have also noted that the current Swedish language file is incomplete and some of the translations are (in my opinion) not very good. Therefore I have created my own Swedish language pack for Umbraco which is available as a zip file here. Download the file, unzip it and place the two XML files in your lang catalog.
   

Please feel free to post comments or suggestions regarding this language pack on this blog.