Technology Tales

Self hosting Google fonts

One thing that I have been doing across my websites is to move away from using Google web fonts using the advice on the Switching.Software website. While I have looked at free web font directories like 1001 Free Fonts or DaFont, they do not have the full range of bolding and character sets that I desire so I opted instead for the Google Webfonts Helper website. That not only offered copies of what Google has but also created a portion of CSS that I could add to a stylesheet on a website, making things more streamlined. At the same time, I also took the opportunity to change some of the fonts that were being used for sake of added variety. Open Sans is good but there are other acceptable sans-serif options like Mulish or Nunita as well, so these got used.

Improving a website contact form

On another website, I have had a contact form but it was missing some functionality. For instance, it stored the input in files on a web server instead of emailing them. That was fixed more easily than expected using the PHP mail function. Even so, it remains useful to survey corresponding documentation on the w3schools website.

The other changes affected the way the form looked to a visitor. There was a reset button and that was removed on finding that such things are out of favour these days. Thinking again, there hardly was any need for it any way.

Newer additions that came with HTML5 had their place too. Including user hints using the placeholder attribute should add some user friendliness although I have avoided experimenting with browser-powered input validation for now. Use of the required attribute has its uses for tell a visitor that they have forgotten something but I need to check how that is handled in CSS more thoroughly before I go with that since there are new :required, :optional, :valid and :invalid pseudoclasses that can be used to help.

It seems that there is much more to learn about setting up forms since I last checked. This is perhaps a hint that a few books need reading as part of catching with how things are done these days. There also is something new to learn.

Changing to web fonts

While you can add Windows fonts to Linux installations, I have found that their display can be flaky to say the least. Linux Mint and Ubuntu display them as sharp as I’d like but I have struggled to get the same sort of results from Arch Linux while I am not so sure about Fedora or openSUSE either.

That has caused me to look at web fonts for my websites with Google Web Fonts doing what I need with both Open Sans and Arimo doing what I need so far. There have been others with which I have dallied, such as Droid Sans, but these are the ones on which I have settled for now. Both are in use on this website now and I added calls for them to the web page headers using the following code (lines are wrapping due to space constraints):

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

With those lines in place, it then is a matter of updating font-family and font declarations in CSS style sheets with “Open Sans” or “Arimo” as needed while keeping alternatives defined in case the Google font service goes down for whatever reason. A look at a development release of the WordPress Twenty Twelve theme caused me to come across Open Sans and I like it for its clean lines and Arimo, which was found by looking through the growing Google Web Fonts catalogue, is not far behind. Looking through that catalogue now causes for me a round of indecision since there is so much choice. For that reason, I think it better to be open to the recommendations of others.

Another way to control line breaks in (X)HTML

While you can use <br /> tags, there is another way to achieve similar results: the &nbsp; or non-breaking space entity. Put one of them between two words and you stop them getting separated by a line break; I have been using this in the latest design tweaks that I made to my online photo gallery. Turning this on its head, if you see two words together acting without regard to normal wrapping conventions, then you can suspect that a non-breaking space could be a cause. There might be CSS options too but their effectiveness in different browsers may limit their usefulness.

A CSS3 resource

While you could go over to the W3C and peruse its documentation, it’s always nice to see information being presented in a more user friendly way than dry specification documents. I know that CSS2.x adoption is still bumping along -- IE comes to mind as a laggard -- but CSS3 has some nice additions that I could use. One of these is border rounding, which is supported after a fashion by Firefox, Safari and Chrome (a very nice browser, even at this very early stage in its development; it’s Windows only for now so try out CrossOver Chromium if your OS preference is Linux or OS X). It would be very nice if CSS3 support was more advanced but that’s not how things are right now. Therefore, seeing a website like CSS3.Info with its latest CSS3 news and its previews, browser CSS selector testing among other things is a definite bonus.

position: static?

CSS positioning seems to be becoming a nightmare when it comes to IE6 support. While I am aware that the likes of 37signals have stopped making their products work with it, there remain a lot of people who stick or are stuck with the old retainer. I am one of the latter because of the continued use of Windows 2000 at my place of work, though a Windows Vista roll-out has been mooted for a while now. If nothing else, it keeps me in the loop for any inconsistencies that afflict the display of my websites. Positioning of an element within the browser window rather than within its parent element is one of these and it looks as if specifying a position of relative in a stylesheet is part of this. Apparently, it could be down to its non-triggering of IE’s haslayout property. It might be a hack but I have found that static positioning has helped. I’ll continue to keep my eye out for a better solution if it exists but the static option seems to have no detrimental effect in IE7, IE8, Firefox, Safari, Chrome or Opera.

New version of my Countrytones plugin

Now that WordPress 2.6 is out, it is time to introduce a new version of Countrytones to the public. A few CSS tweaks have been needed to the original version after the changes that have been made to the administration interface for 2.6. Those screens still look largely the same with this release as they did before but for the styling of things like the bubble that alerts you to the availability of plugin upgrades, among other things.

Download Countrytones 1.0.1

A case of “peekaboo” behaviour in Internet Explorer

Recently, I changed the engine of my online photo gallery to a speedier PHP/MySQL-based affair from its PHP/Perl/XML-powered predecessor. On the server side, all was well, but a peculiar display issue turned up in Internet Explorer (6, 7 & 8 were afflicted by this behaviour) where photo caption text on the thumbnail gallery pages was being displayed erratically.

As far as I can gather, the trigger for the behaviour was that the thumbnail block was placed within a DIV floated using CSS that touched another DIV that cleared the floating behaviour. I use a table to hold the images and their associated captions in place. Furthermore, each caption was also a hyperlink nested within a set of P tags.

The remedy was to set the CSS Display property for the affected XHTML tag to a value of “inline-block”. Within a DIV, TABLE, TR, TD, P and A tag hierarchy, finding the right tag where the CSS property in question has the desired effect took some doing. As it happened, it was the tag set, that for the hyperlink, at the bottom of the stack that needed the fix.

Of course, it’s all very fine fixing something for one browser but it’s worthless if it breaks the presentation in other browsers. In that vein, I did some testing in Opera, Firefox, Seamonkey and Safari to check if all was well and it was. There may be older browsers, like versions of IE prior to 6, where things don’t appear as intended but I get the impression from my visitor statistics that the newer variants hold sway anyway. All in all, it was a useful lesson learnt and that’s never a bad thing.

Opera and table display

I have encountered something very strange with my hillwalking blog and I have to admit that am at something of a loss as to how to resolve it. Opera (version 9.x), it seems, is not displaying the date corresponding to the first post of a particular month. You can see the effect on the right for the current month and, yes, the tenth of the month has a post associated with it. What compounds the mystery is that the same issue doesn’t affect this blog, so some further investigation is very much in order. However, the cascading element of CSS doesn’t help much when trying to track down the cause of this sort of thing. While, it’s irritating, I don’t have any definite answers yet and so would appreciate some suggestions. In the meantime, I’ll be staying on the lookout for a fix. Curiously, all’s fine on Firefox and IE.

Correcting or updating blog posts

I have grown to notice that certain bloggers are not removing old content from a blog but merely striking it through using something like CSS. There is a place for this but it does strike me as overkill sometimes and can look untidy. Sometimes, that lack of neatness is a trade-off since the highlighting of a correction itself conveys a message. I have been know to tweak posts immediately after publishing without leaving the previous content on view but my changes generally are readability improvements more than anything else. Typos and spelling mistakes also get corrected like this; nobody needs them highlighted for all to see. I am not trying to fool anyone and, if I want to update the content, I either add another post or use another tactic that I have seen others use: updates at the bottom of the post that are denoted as such. It’s another transparent approach that preserves the authenticity of the piece.