tasuki’s blog

I was thoroughly bored with the previous theme, and although I tried to revive it with the new header image, it was still bugging me. So I created a new one.

I had a draft of a new theme lying around for quite a long time, so I made few adjustments to it: made the code much longer and much less clean. But it seems to work.

Features of the new design include, but are not limited to:

• big letters in headings (big letters rock)
• even less images (none, except the two links to flickriver, smilies and images in posts)
• half-fixed-width half-fluid design (the design is fixed width, but the sidebar is fluid — works well for many different widths of browser (800px — the sidebar isn’t displayed, it’s accessible through scrolling; 1024px — sidebar in one column, 1280px — two columns, more px — more columns (it is capped at three columns)))
• emphasis on typography (lists, blockquotes, etc. are styled properly)
• lines vertically in synch (left column, middle column and sidebar)
• the old color scheme, I mostly like it and more importantly — couldn’t find a better one at the moment
• justified text (I’m still very unsure here — justified looks way better, but left-aligned is more readable)

Bugs of the new design include, but are not limited to:

• IE6 sometimes messes up the sidebar, not quite sure why
• Opera doesn’t keep lines in synch when there are smileys (and I thought I had the solution, sigh…)
• IE doesn’t align the comment date in the comment list (will look into that later)

Also, I spent ages dealing with various bugs in IE that caused things to disappear.
One such bug caused the sidebar not to appear (it was an absolutely positioned element next to a floated element — don’t ever do that), another sometimes caused titles to disappear (they were relatively positioned, now that they are static it seems ok, but I have no idea why). When repairing the sidebar, I had to move it in front of the actual content in the markup, which is wrong and I know it. I am sorry to all lynx/links users out there.

Bug reports, remarks and suggestions are welcome!

I first read Desiderata in Polish, at Letnia Szkoła Go. There’s a path that leads through woods. As you walk down, every few dozen of meters you encounter a slab with one verse on it. I found it hard to understand as my Polish wasn’t as great back then, but from what I understood I knew this was something special.

I thought it was just local folklore and so was surprised to find out that Desiderata was originally written in English almost one hundred years ago by Max Ehrmann.

Desiderata is a short prose poem, possibly the most powerful text I’ve ever read. Everytime I’m feeling down, angry, hurt, upset or desperate it brings instant calmness. Here’s a quote, one of my favourites:

If you compare yourself with others, you may become vain or bitter,
for always there will be greater and lesser persons than yourself.
–Desiderata

I felt an urgent need to print out Desiderata and cover the walls with it. As I haven’t used TeX for quite a while (a year or more?), this was a good opportunity to recall it a bit. You can download Desiderata (pdf) for printing.

Many posts have been written on the topic of best free fonts. Therefore, I’d like to approach it differently.

Here, have a picture:

You should click on that picture to see the large version. And if your screen isn’t big enough and your browser thinks the image would look better downsized — your browser is wrong: click on the zoom button and view the picture in its original size.

As you can see, there are only 14 fonts. Surely there must be more quality fonts available for free? Yes, there are. This is a small selection of only the best of the best.

Now that you have the original picture open, let’s have a look at those 14 fonts (all available either in otf or in ttf):

• Antykwa Toruńska is a very original typeface created by Polish type designer Zygfried Gardzielewski in 1960. It was digitised by Janusz Marian Nowacki. The font contains many obscure glyphs (various diacritical marks, math symbols, etc.) and is available in light, regular, medium and bold versions, each of which has its own italics.
• Typo Latin Serif is a slab serif (egyptian) typeface with an extremely large x-height. It was created by a German type designer Manfred Klein.
• The DejaVu fonts are based on the excellent Bitstream Vera typefaces and extended by additional glyphs. They are well hinted so they preserve their onscreen readability even in small sizes.
• Palatino is a typeface by Hermann Zapf, a pioneer of computer typography. Palladio L is a free Palatino clone created by URW in cooperation with Hermann Zapf. You can download it in URW fonts pack (together with 79 other fonts).
• Gentium, a typeface for the nations by Victor Gaultney, extensive unicode support.
• Optima is another wonderful typeface by Hermann Zapf. You can download it as MgOpen Cosmetica.
• Bembo is a dynamic antiqua created by Francesco Griffo in 1496. The font Cardo, based on Bembo typeface, was created by David Perry.
• Vollkorn is an old style numerals featuring typeface which was created by Friedrich Althausen. Old style numerals own.
• Computer Modern is a Didone typeface created by professor Donald Ervin Knuth.
• Avant Garde by Herb Lubalin can be downloaded in the above mentioned URW font pack where it is known as URW Gothic L.
• Goudy Bookletter 1911 is a reincarnation of Frederic Goudy’s Kennerley Old Style by Barry Schwartz (funny thing, another Barry Schwartz… there is also Barry Schwartz the SEO and Barry Schwarts the psychologist from Paradox of choice). By the way, have I mentioned that old style numerals own?
• Helvetica by Max Miedinger. Perhaps the most famous and most abused typeface ever (seriously, fuck Arial). Helvetica isn’t any less awesome now than it was 50 years ago. This version was created by Magenta Ltd. and is available in the MgOpen pack as MgOpen Moderna.
• Geo Sans Light is a font by Manfred Klein, which is based on Futura, a geometric typeface created by Paul Renner in 1926.
• Garamond. The best serif typeface ever. For the third time, URW font pack.

The picture was created with Inkscape. Inkscape rocks. For anything that you think might be vector use Inkscape. Generally, GIMP for photo editing, Inkscape for everything else. It enables very easy manual kerning, and after you are done, you can convert the letters to paths (Bezier), and continue making changes (not sure whether that was clear — anyway go and try it out ).

Ah, I almost forgot — you can get the SVG source file (already converted to paths, as I don’t suppose you have all the fonts installed).

Got other excellent free fonts? Feel free to leave a comment!

When I saw the link to “badge creator” (marked as new) on flickriver, I knew I just had to add that to my blog. But somehow the side column was too long already…

Making the whole thing wider, adding the second side column and adding my flickriver favourites was the first change (the most work on this one was to change the header picture).

The second change was setting the main text to left-align instead of justify. I spent a great deal of time thinking about whether I should do it, but I really couldn’t decide. So I just decided to use the common advice of the experts (that site seriously rocks, they even hang left quotation signs, and follow just about every other rule which is normally almost unfollowable on the web).

The third change was the most difficult and tedious. I won’t say what it is, but I’ll give you few hints:

• it has something to do with the bits of extra empty space that appeared almost everywhere
• it was especially necessary because of the extra column
• it has a very positive effect on the visitor, although 98% won’t even realise it

Can you guess what the third change is?

…at least from my point of view.

Typography (or whatever you want to call it; the way letters are handled)

If it’s unreadable, your visitors will not be able to read anything, the more readable your website is, the more they will be able to read.

One of the most common cause of problems is “liquid layout”. Say what you want, but having 150 letters on one line is no good. Wikipedia is guilty of this. They try to make up for it by having short paragraphs, which usually works rather well (or you can resize your browser window, but I like to keep it fullscreen), but it’s far from optimal.

Another common problem is “designers” raping the letters by setting unusual letterspacing. This can be excused in titles and such, but having longer text with any letterspacing but default (be it lower or higher) should be a prisonable crime.

Wisely choosing linespacing (line-height) can also significantly help improve the readability — the longer the lines, the bigger linespacing you should use.

It’s usually a bad idea to set text-align to “justify”. That’s because today’s browsers can’t break words. I use justified text here, because I think it looks a bit better, but maybe I should drop it (comments are welcome! )

And one more thing… the letters should be in a colour that is readable on the chosen background… which brings us to the next part:

Colours

Colours are very important, as they are the first thing your visitor will notice. What colors you should use depends largely on your audience, but you should just use common sense (don’t be like the wackos who use completely black background surrounded by the shiniest green you could imagine ).

Whitespace

I consider whitespace (the empty areas that are not filled with anything, they don’t necessarily have to be white ) to be the most important and most overlooked aspect of webdesign. If you need to separate two elements, inserting some white space is the most natural and effective thing to do. The more of it, the more separated the elements become. It’s actually amazingly simple.

I didn’t plan it. I just woke up today and knew I’d have a new blog in the evening.

As for colours, a great deal of thinking went into that. Yesterday I read a lot about readability on the web. I think it’s something very important that many people completely miss. First, Verdana and Georgia, that’s a no-brainer. Almost everyone has them and they were designed for screen, are very readable, and also look good.

Then I read some controversial posts about white on black versus black on white. Well, I personally strongly prefer dark background and light text (it’s simply less tiring on the eyes). But somehow my experience from “green is cheesy” with #999 text on #000 background wasn’t good – at least on my system, the fonts didn’t get hinted properly. The “silhouette’s” #CC9 text on #443 background is a completely different story. The contrast is good enough (should be good enough even for people with crappy monitors) and hinting works great (ymmv, though).

As for the picture at the top – the right guy’s back looks kinda weird, I might have to change that. And the curly thingy is stupid, I know. I might change that, too (if anything it should curl outwards, but that would be much harder to do).

And finally: a competishun! Who are the guys in the picture? When was the game played? First to write the correct answer into comments gets a beer.

There are three desirable things, pick any two:

• No orphans and widows (meaning single line of paragraph is not cut off on one page with the rest on another)
• “Řádkový rejstřík” (that’s Czech, I have no idea what it’s called in english, it means that the lines ((not only) on opposing pages) should be corresponding)
• Text area height stays the same.

It is impossible to have all three, if the lines are corresponding and the text area height stays the same, then you are sure to get some orphans and widows. If the text area height stays the same and there are no orphans nor widows, then you definitely have to break “řádkový rejstřík” (please, someone tell me what it’s called in english). And if there are no orphans nor widows and corresponding lines, then the text area height will vary.

As orphans and widows are definitely a no-no, and “řádkový rejstřík” seems important, I think it’s best to break the text area height, but I’m not sure… any (qualified) opinions?

Also, when you are typesetting verses, “řádkový rejstřík” usually gets fucked up, but still it would be nice for it to be at least partially ok.

Hanging has been very popular recently… last week USA hanged Saddam, and now I am going to hang punctuation.

I have learned recently that pdfTeX supports hanging punctuation, which is pretty neat. An example:

\pdfprotrudechars=2
\rpcode\tenrm`\-=300
\rpcode\tenrm`\.=220
\rpcode\tenrm`\,=200

I have made a test of hanging punctuation (open the file and read on). There are six pages, first three typeset in Toruńska Antykwa (a very beautiful font) and the other in Palatino. There are three versions: complete hanging punctuation, half hanging and not hanging.

I like Toruńska Antykwa with hanging punctuation, but I’m not sure which one. Maybe the best would be to hang the hyphens and leave dots and comas inside? (or hang them only partially)

On the other hand, hanging of Palatino seems to be a huge failure. Hanging comas and dots are awful (maybe if they were hanging just a very little bit it would be ok), and hanging hyphens are not particularly beautiful either (maybe if they were hanging less than a half…).

Now, what do you think?

I like the good old dynamic serif typefaces (from 15th-17th century). The most well known is Garamond, which is also my favourite one, together with Pastonchi (which is so unknown it doesn’t even have its wikipedia page, although it’s a very sexy typeface (I especially love opennes of the small letter ‘f’ (see the pic on the right side), and letter ‘k’ is rather cute), so the link points to google). Then there’s Bembo, which isn’t quite as great as Garamond (let alone Pastonchi), but it’s still a fair one.

Someone thought it would be a funny idea to make animals of the Bembo letters, and so they did. It’s a stragne idea, but I quite like it. The only problem is that it’s waaay too fast. Show me the word and then let me watch it for at least five seconds (no, half a second is not enough, really).

Humm, yet another confused post. The headline says Bembo, then I get all excited about Pastonchi (and even include a picture (which has nothing to do with the headline, btw)) and then finish with Bembo again. Well, whatever, I’m not gonna rewrite it anyway…

Fonts/typefaces are more part of our lifes than most of you think, they are virtually everywhere.

Today I was again deciding which fonts to use as my system fonts (on LCD), it is very difficult to choose wisely, so here are my top candidates: FreeSans (I like it), Arial (well, Micro$oftish, but not that bad, actually I used it for quite a long time), Verdana (also M$, takes quite a lot of space but reads very nicely) and Gentium. Let me say more about the last one, as I started to really like it:

Gentium is kind of half-serif font (not really serif and not really sans-serif) which is very nice to look at, it also renders well on my screen. It is rather dynamic yet very well readable, and there is a reason Gentium is called “typeface for nations” – there is almost any char you could think of. Well, in case that wasn’t enough, have a look at a screenshot:

Nice, ain’t it? So that’s what I use in almost all applications now as a default font.

Then I’d like to mention terminus, that is the monospaced font. Suitable for day-long sessions in front of screen (believe me, I have tested it many times). I was very annoyed with Courier (New), Fixedsys and similar crappy fonts as their readability is awful. On the other hand terminus has wonderful readability and I got addicted to it very quickly. Here goes the screenshot:

Oh yeah, and vim rocks: no useless menus, only the info bar at the bottom… simple yet powerful

That’s about it, sorry for rather longish post (which should have been divided into two or three, I know) and for it being written in a hurry (working hard on a secret project ).

PS: Some things I forgot: Terminus is a bitmap font, which is one of the reasons its readability is so good. It also contains all characters I need to use, and lastly, compare how mmmmm and iiiii has same width while it is both easy to read: