Bunny's Print CSS Plugin Upgrade [en]

[fr] Deuxième version de mon plugin pour insérer automatiquement une feuille de style impression dans n'importe quel thème WordPress. Il y a maintenant un panneau d'administration qui permet d'éditer le CSS directement depuis WordPress -- et le CSS en question a été enrichi.

The [little print CSS plugin](http://climbtothestars.org/archives/2008/01/07/print-css-plugin-wordpress-needs-css-guru/) I threw together the other day has had a little upgrade already, and is also now [available in the WordPress plugin directory](http://wordpress.org/extend/plugins/bunnys-print-css/).

First, [Kjell Knudsen](http://kjell.langvass.org/) was kind enough to add to the very basic [CSS file](/code/print-css/print.css) I provided with the plugin. It’s now a little richer and should support K2, for example. It’s still open to improvement, so don’t hesitate to link to your propositions in the comments! Maybe at some point I’ll be able to offer more than one stylesheet with the option to choose between them.

Option? Oh yes, option. Because, you see, Print CSS now has an option panel. I’m pretty happy, because it’s my first plugin with an options panel, and I’ve been thinking I should learn how to do that for some time now. The options panel doesn’t do much, however: it simply allows you to edit the print CSS file through the WordPress admin area (if the file permissions are right — chmod 777 or something).

I’d like to extend all my thanks to [Yaosan Yeo](http://www.channel-ai.com/blog/), who wrote the [MyCSS](http://wordpress.org/extend/plugins/mycss/) plugin. I heavily lifted the code for the admin panel from it, as it does essentially the same thing: allow the user to edit a CSS file. I’m really loving MyCSS by the way, even if [there is a little capitalization glitch in it](http://wordpress.org/support/topic/152160), because I’m always adding CSS to my themes and it’s a real pain to copy-paste it all over the place each time I switch themes (or from one blog to another).

Off you go now, check out [Bunny’s Print CSS](http://wordpress.org/extend/plugins/bunnys-print-css/) in the WordPress plugin repository!

Similar Posts:

WordPress Sandbox Theme Problems [en]

[fr] Deux problèmes avec Sandbox: les menus déroulants qui se déroulent décalés sur la droite dans IE, et l'absence de feuille de style pour l'impression. Toute aide bienvenue.

As you might have seen, [Sandbox](http://www.plaintxt.org/themes/sandbox/) is now [my theme of choice for WordPress](http://climbtothestars.org/tags/sandbox/). [Diurnal](http://www.sndbx.org/results/designs/diurnal/), here on CTTS, is built upon Sandbox, and I’m using it with a client to build a new design from scratch. It’s a nice base to work from, in a [CSS Zen Garden](http://www.csszengarden.com/) way.

However, there are problems. Here are two I’m stuck with on my client site. I posted them to the [Sandbox forums](http://www.sndbx.org/forums/), but I thought I’d mention them here in case one of you smart readers had an answer.

1. [No print stylesheet?](http://www.sndbx.org/forums/viewtopic.php?id=221): does anybody have a print stylesheet handy for use with Sandbox? If I can avoid writing one from scratch…
2. [Broken drop-down menus in IE](http://www.sndbx.org/forums/viewtopic.php?id=220): I’m far from a drop-down menu specialist, so I’m not sure where to start to fix the IE wonkiness I’ve noticed. The menus in IE do not drop right below the parent menu as [shown here](http://flickr.com/photos/bunny/1998710028/), but overlap on the neighbouring menu item on the right.

Thanks for any help or pointers you can bring me.

Similar Posts:

Basic Bilingual 0.3 for Multilingual Blogging [en]

[fr] Une mise à jour de mon plugin "Basic Bilingual" qui permet de rendre WordPress bilingue. Modification majeure: il n'y a plus besoin de bidouiller son template pour faire apparaître l'extrait du billet dans "l'autre langue". Par contre, c'est toujours nécessaire pour rajouter les attributs lang.

Long overdue, an upgrade of my plugin Basic Bilingual. Grab the [tgz archive](/code/basic-bilingual.tgz) or [check out the code](/code/basic-bilingual.phps).

Some explanations. First, you all know of my [long-standing interest in all things multilingual](/focus/multilingual) and in [multilingual blogging](http://climbtothestars.org/archives/2007/03/25/blogcamp-multilingual-blogging-session/) in particular.

Years ago, I switched to [Movable Type](http://climbtothestars.org/archives/2004/01/03/switch-to-movable-type/) and then to [Wordpress](http://climbtothestars.org/archives/2004/06/23/switch-to-wordpress/) because I was blogging in two languages. Movable Type allowed me to assign more than one category to each post — so I used two huge categories, fr and en, to indicate what language I was blogging in. This soon made the rebuilds a real pain in the neck, and WordPress allowed me first of all to [happily hack it into being multilingual](http://climbtothestars.org/archives/2004/07/11/multilingual-weblog/), and then actually [write a plugin to do it in a cleaner way](http://climbtothestars.org/archives/2005/01/23/basic-bilingual-plugin/). The plugin hasn’t changed much since, and this upgrade isn’t a major one, but it’s a step in the right direction.

Ideally, I’d like people to be able to use the plugin without having to modify their templates at all. I’d also like the plugin to allow filtering out one language if that is what the reader desires. I still hope that [Wordpress will one day “see the light” and let us define language at post-level](http://wordpress.org/extend/ideas/topic.php?id=1007 “Please vote!”) (Matt [saw the light for tagging](http://climbtothestars.org/archives/2007/09/22/wordpress-finally-has-tags/) ;-), so I do have hope). By the way, I stumbled upon this [Ajax Language Switcher for Basic Bilingual](http://www.freshlabs.de/journal/archives/2006/05/ajax-language-switcher-for-basic-bilingual/) earlier today, and it will probably greatly interest those courageous ones of you who tend to have translations of each post or page.

Back to the plugin. It installs normally (unzip everything in the /plugins directory). If you’re using other languages than French and English, you’ll have to manually change the language codes in the plugin file (not very difficult, you don’t have to know PHP to do it; just look for “en” and “fr” and put the language codes for your languages instead).

I’ve fixed an annoying problem with slashes that popped up at some point (somebody else gave me the fix, but I can’t remember who — let me know!).

But most of all, I’ve made the “other language excerpt” appear automatically in the post content. Yes, you hear me: no need to add <php bb_the_other_excerpt(); ?> in your templates anymore. Yay! Added bonus: it will show up in the feeds, too — for that reason, I’ve added a text separator between the excerpt and the post so that there is a separation between the languages.

Basic Bilingual in Google Reader

Obviously, you’ll want to hide these separators and style your posts a little. Here is roughly what I’m using right now:

.other-excerpt {
font-style: italic;
background: #fff;
padding-left: 1em;
padding-right: 1em;
border: 1px solid #ccc;
}

.other-excerpt:lang(fr) p.oe-first-child:before {
content: “[fr] “;
font-weight: bold;
}

.other-excerpt:lang(en) p.oe-first-child:before {
content: “[en] “;
font-weight: bold;
}

.bb-post-separator {
display: none;
}

div.hentry:lang(fr) .entry-title:after {
content: ” [fr] “;
vertical-align: middle;
font-size: 80%;
color: #bbb;
}

div.hentry:lang(en) .entry-title:after {
content: ” [en] “;
vertical-align: middle;
font-size: 80%;
color: #bbb;
}

Now, notice there is fancy stuff in there which relies on the lang attribute. If you’re mixing languages on a page, you should [use the lang attribute](http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1) to indicate which language is where. This means (unfortunately, until I become buddies with PHP’s ob_start() function) that you need to touch your template. It’s not that hard, though.

Find the outermost <div> for each post in the template (it [should have the CSS class hentry, by now](http://microformats.org/wiki/hatom#Entry)). Add this inside the tag: lang="<?php bb_the_language(); ?>". Do so on every theme template which produces posts. With [the Sandbox theme](http://www.plaintxt.org/themes/sandbox/), it would look like this:

<div id="post-” class=”” lang=””>

That’s it!

If you’re using this plugin, please leave a link to your blog. I’m also always interested in hearing of other examples of multilingual blogging or multilingualism online.

Similar Posts:

Jeremy Keith: The Beauty in Standards and Accessibility (Web2.0Expo, Berlin) [en]

*Here are my notes of [Jeremy Keith](http://adactio.com/journal/)’s session. He’s somebody I always appreciate listening to, and he also happens to be the creator (and provider) of [Buzzword Bingo](http://bingo.adactio.com/). Play with your neighbour when keynotes or sessions go down the buzzword path.*

*My notes are as correct as I can make them, but they may be missing bits and pieces and I might even have misunderstood stuff.*

Web 2.0 Expo 6 - Jeremy Keith

First define. Who knows about beauty? The poets.

John Keats: Ode on a Grecian Urn. “Beauty is truth, truth beauty, that is all ye know on earth, and all ye need to know.”

William Blake: Auguries of Innocence. “To see a world in a grain of sand, and heaven in a wildflower, hold infinity in the palm of your hand, and eternity in an hour.”

Looking deep beneath the surface. Close-up sketch of a flea. Micrographia. Beautiful. Viewing source. This is how we see the beauty of things.

This whole web2.0 stuff is not about details. We’re not using microscopes, but telescopes, looking at the “big picture”. Telescopes can be good: think “Galileo”.

He brought upon the world an *a priori* change. A new way of looking at the world, though the world had not changed. The earth revolves around the sun, and not the opposite.

Darwin: the world didn’t change from one day to the next when The Origin of Species was published, but our view of the world did.

We want to think about structure. How is the house built? It’s when you understand the structure that you can build solid houses. Same with web pages. This is where web standards come in.

Separation. Before: all mixed up (html, css, js). Now: separate. (cf. http://nataliejost.com) Progressive enhancement. An a priori change to how you design websites.

a) begin with your content
b) structure it (HTML)
c) think about how it’s going to look (CSS)
d) think about the behaviour (DOM Scripting)

Web 2.0 Expo 5

If you remove any of these layers, it will still work. It won’t look pretty, it won’t behave as well, but it will still “work”.

**CSS**

# in a separate document!
p { }
#foo { }

Then, add rules using selectors. From general to specific.

**DOM**

Very similar approach. Make it external. You don’t put it in the document. The vocabulary is different, but you also reference elements in the page pretty easily

document.getElementsByTagName(“p”)
documnet.getElementById(“foo”)

School of thought called “unobtrusive scripting”, “unobtrusive javascript”

**Beware**

First structure, then presentation. If you catch yourself doing this…

# wrong!

If you put behaviour in here, you’ve wasted a hyperlink.

Slightly better… but still bad

# JS equivalent of using the style attribute

*steph-note: I’m learning stuff about JS! yay!*

Bandwidth benefits in doing things the right way. Process benefits, you can separate the work. And also… the beauty of it. Flexibility. See how it reacts in situations you haven’t accounted for? It won’t fall apart if somebody accesses with no CSS, no JS, no images…

So, is this about making site accessible? Kind of. Note: go to the talk on accessibility Thursday morning.

Jeremy is talking more about universality. You’re not shutting out devices. Mobile. Search bots. Screen readers.

W.B. Yeats (April 1916) “All is changed, changed utterly: A terrible beauty is born.”

**Ajax**

Wonderful, beautiful, but can be terrible depending on how it’s used. *steph-note: reminds me of what we said of JS in 99-00*

The key to Ajax is about asynchronous communication with the server. XmlHttpRequest.

Jeremy’s definition: “A way of communicating with the server without refreshing the whole page.” Just part of the page.

Buzzword Hijax.

Here is how Jeremy thinks we should build an ajax application.

a) build a website in the old-fashioned way — buttons, links, for interaction with the server
b) then, come along with ajax — which parts of this page benefit from just being refreshed separately, and intercept the links/events. Hijack the requests. Bypass the whole page interaction.

Progressive enhancement rather than a terrible beauty that locks people out. Switch off JS, and everything still works.

Where? When?

Patterns: when I click a link/form, and when I submit it, I return to the same page with almost nothing changed.

– registration forms (specially for user name availability)
– comments on a blog/forum
– add to cart
– *steph-note: sign in links*

“Web 2.0” is not about web applications versus documents in the old “Web 2.0”. It’s a sliding scale. Most sites are somewhere in between documents and application. Applications work with documents! It’s not an either… or thing.

This kind of Ajax is more on the document side of the scale, roughly mid-way to the application end. Doesn’t scale to “more application”.

But at that point, why the hell are you building that with HTML, CSS and JS? The reason to use them is that they degrade gracefully. If you decide that all three are required, maybe you need to use another technology, like Flash. These technologies have their place for applications which cannot degrade gracefully. Flash is made for building web applications! But there is an insistance in building “2.0 Apps” in HTML/CSS/JS.

Maybe hesitancy because Flash isn’t a standard in the same way as HTML/CSS/JS?

Standards: you know your stuff will work, you know there’ll be support there. The best thing that Adobe could ever do in Jeremy’s opinion is to open it up truly (*steph-note: if I understood that correctly*).

History of standards.

ISO, ECMA, W3C…

Open data. API. RSS. XHTML.

If you’re going to release and API, look at what Google and Yahoo are doing and copy. Build upon existing conventions. Your own format is not going to make it.

If you allow people to access your data like that, you start to see emerging patterns.

Microformats! *steph-note: yay!*

Machine tags! *steph-note: yay again!* There is a [machine tags wiki](http://machinetags.org/wiki/Main_Page).

Jeremy, like many of us, really hates the “Web 2.0” label/buzzword. It had its place a few years ago, but now it’s really putting us in a box. Ajax is a good buzzword, because it allows to talk about a certain technology in a snappy way. Whereas Web2.0… ask ten people, and you’ll get 10 explanations.

Web2.0: people.

But we don’t need a buzzword for that. We already have a word for “leveraging collective intelligence”: the WEB!

Combine looking through the microscope and looking through the telescope.

Similar Posts:

Life and Trials of a Multilingual Weblog [en]

Here is an explanation of how I set up WordPress to manage my bilingual weblog. I give all the code I used to do it, and announce some of the things I’d like to implement. A “Multilingual blogging” TopicExchange channel is now open.

[fr] J'explique ici quelles sont les modifications que j'ai faites à WordPress pour gérer le bilinguisme de mon weblog -- code php et css à l'appui. Je mentionne également quelques innovations que j'ai en tête pour rendre ce weblog plus sympathique à mes lecteurs monolingues (ce résumé en est une!) Un canal pour le weblogging multilingue a été ouvert sur TopicExchange, et vous y trouverez peut-être d'autres écrits sur le même sujet. Utilisez-le (en envoyant un trackback) si vous écrivez des billets sur le multinguisme dans les weblogs!

My weblog is bilingual, and has been since November 2000. Already then, I knew that I wouldn’t be capable of producing a site which duplicates every entry in two languages.

I think this would defeat the whole idea of weblogging: lowering the “publication barrier”. I feel like writing something, I quickly type it out, press “Publish”, and there we are. Imposing upon myself to translate everything just pushes it back up again. I have seen people try this, but I have never seen somebody keep it up for anything nearing four years (this weblog is turning four on July 13).

This weblog is therefore happily bilingual, as I am — sometimes in English, sometimes in French. This post is about how I have adapted the blogging tools I use to my bilingualism, and more importantly, how I can accommodate my monolingual readers so that they also feel comfortable here.

First thing to note: although weblogging tools are now ready to be used by people speaking a variety of languages (thanks to a process named “localization”), they remain monolingual. Language is determined at weblog-level.

With Movable Type, I used categories to emulate post-level language awareness. This wasn’t satisfying at all: I ended up with to monstrous categories, Français and English, which didn’t help keep rebuild times down.

With WordPress, the solution is far more satisfying: I store the language information as Post Meta, or “custom field”. No more category exploitation for something they shouldn’t be used for.

Before I really got started doing the exciting stuff, I made a quick change to the WordPress admin interface. If I was going to be adding a “language” custom field to each and every post of mine, I didn’t want to be doing it with the (imho) rather clumsy “Custom Fields” form.

In edit.php, just after the categorydiv fieldset, I inserted the following:

<fieldset id="languagediv">
      <legend>< ?php _e('Language') ?></legend>
	  <div><input type="text" name="language" size="7"
                     tabindex="2" value="en" id="language" /></div>
</fieldset>

(You’ll probably have to move around your tabindex values so that the tabbing order makes sense to you.)

I also tweaked the wp-admin.css file a bit to keep it looking reasonably pretty, adding the rule below:

#languagediv {
	height: 3.5em;
	width: 5em;
}

and adding #languagediv everywhere I could see #poststatusdiv, so that they obeyed the same rules.

In this way, I have a small text field to edit to set the language. I pre-set it to “en”, and have just to change it to “fr” if I am writing in French.

We just need to add a little piece of code in the form processing script, post.php, just after the line that says add_meta($post_ID):

 // add language
	if(isset($_POST['language']))
	{
	$_POST['metakeyselect'] = 'language';
        $_POST['metavalue'] = $_POST['language'];
        add_meta($post_ID);
        }

The first thing I do with this language information is styling posts differently depending on the language. I do this by adding a lang attribute to my post <div>:

<div class="post" lang="<?php $post_language=get_post_custom_values("language"); $the_language=$post_language['0']; print($the_language); ?>">

In the CSS, I add these rules:

div.post:lang(fr) h2.post-title:before {
  content: " [fr] ";
  font-weight: normal;
}
div.post:lang(en) h2.post-title:before {
  content: " [en] ";
  font-weight: normal;
}
div.post:lang(fr)
{
background-color: #FAECE7;
}

I also make sure the language of the date matches the language of the post. For this, I added a new function, the_time_lg(), to my-hacks.php. I then use the following code to print the date: <?php the_time_lg($the_language); ?>.

Can more be done? Yes! I know I have readers who are not bilingual in the two languages I use. I know that at times I write a lot in one language and less in another, and my “monolingual” readers can get frustrated about this. During a between-session conversation at BlogTalk, I suddenly had an idea: I would provide an “other language” excerpt for each of my posts.

I’ve been writing excerpts for each of my posts for the last six months now, and it’s not something that raises the publishing barrier for me. Quickly writing a sentence or two about my post in the “other language” is something I can easily do, and it will at least give my readers an indication about what is said in the posts they can’t understand. This is the first post I’m trying this with.

So, as I did for language above, I added another “custom field” to my admin interface (in edit-form.php). Actually, I didn’t stop there. I also added the field for the excerpt to the “simple controls” posting page that I use (set that in Options > Writing), and another field for keywords, which I also store for each post as meta data. Use at your convenience:

<!-- BEGIN BUNNY HACK -->
<fieldset style="clear:both">
<legend><a href="http://wordpress.org/docs/reference/post/#excerpt"
title="<?php _e('Help with excerpts') ?>"><?php _e('Excerpt') ?></a></legend>
<div><textarea rows="1" cols="40" name="excerpt" tabindex="5" id="excerpt">
<?php echo $excerpt ?></textarea></div>
</fieldset>
<fieldset style="clear:both">
<legend><?php _e('Other Language Excerpt') ?></legend>
<div><textarea rows="1" cols="40" name="other-excerpt"
tabindex="6" id="other-excerpt"></textarea></div>
</fieldset>
<fieldset style="clear:both">
<legend><?php _e('Keywords') ?></legend>
<div><textarea rows="1" cols="40" name="keywords" tabindex="7" id="keywords">
<?php echo $keywords ?></textarea></div>
</fieldset>
<!-- I moved around some tabindex values too -->
<!-- END BUNNY HACK -->

I inserted these fields just below the “content” fieldset, and styled the #keywords and #other-excerpt textarea fields in exactly the same way as #excerpt. Practical translation: open wp-admin.css, search for “excerpt”, and modify the rules so that they look like this:

#excerpt, #keywords, #other-excerpt {
	height: 1.8em;
	width: 98%;
}

instead of simply this:

#excerpt {
	height: 1.8em;
	width: 98%;
}

I’m sure by now you’re curious about what my posting screen looks like!

To make sure the data in these fields is processed, we need to add the following code to post.php (as we did for the “language” field above):

// add keywords
	if(isset($_POST['keywords']))
	{
	$_POST['metakeyselect'] = 'keywords';
        $_POST['metavalue'] = $_POST['keywords'];
        add_meta($post_ID);
        }
   // add other excerpt
	if(isset($_POST['other-excerpt']))
	{
	$_POST['metakeyselect'] = 'other-excerpt';
        $_POST['metavalue'] = $_POST['other-excerpt'];
        add_meta($post_ID);
        }

Displaying the “other language excerpt” is done in this simple-but-not-too-elegant way:

<?php
$post_other_excerpt=get_post_custom_values("other-excerpt");
$the_other_excerpt=$post_other_excerpt['0'];
if($the_other_excerpt!="")
{
	if($the_language=="fr")
	{
	$the_other_language="en";
	}

	if($the_language=="en")
	{
	$the_other_language="fr";
	}
?>
    <div class="other-excerpt" lang="<?php print($the_other_language); ?>">
    <?php print($the_other_excerpt); ?>
    </div>
  <?php
  }
  ?>

accompanied by the following CSS:

div.other-excerpt:lang(fr)
{
background-color: #FAECE7;
}
div.other-excerpt:lang(en)
{
background-color: #FFF;
}
div.other-excerpt:before {
  content: " [" attr(lang) "] ";
  font-weight: normal;
}

Now that we’ve got the basics covered, what else can be done? Well, I’ve got some ideas. Mainly, I’d like visitors to be able to add “en” or “fr” at the end of any url to my weblog, and that would automatically filter out all the content which is not in that language — maybe using the trick Daniel describes? In addition to that, it would also change the language of what I call the “page furniture” — titles, footer, and even (let’s by ambitious) category names. Adding language sensitivity to trackbacks and comments could also be interesting.

A last thing I’ll mention in the multilingual department for this weblog is my styling of outgoing links if they are written in a language which is not my post language, using the hreflang attribute. It’s easy, and you should do it too!

Suw (who has just resumed blogging in Welsh) and I have just set up a “Multilingual blogging” channel on TopicExchange — please trackback it if you write about blogging in more than one language!

Similar Posts: