Loading...
 
[Show/Hide Right Column]

Fariba Breau


Find:
Fariba Breau
Read Blog
View Profile
Published by fariba.breau@gmail.com on 2012-02-21

As a translator (or translator-to-be), do you ever find yourself automatically translating little things you stumble upon? Whether it be an advertisement or a headline, I sometimes find myself imagining what the English or French version of something might look like on the page or on a website. These days especially, being literally surrounded by media and design, do you ever wonder what your translated text would look like in the final design?

 

Step 1: Don’t Resist Temptation

The other day I was browsing a very nicely designed website. Visually pleasing, with a nice layout, it drew me in. As I was reading the text, my translator’s instinct kicked in, and I began to translate a bit of the text in my head as I read. As I juggled words in my head, I began to wonder about the technical challenges of translating some particular parts of text. How would the finished translated text look on the page? How could I keep the design of the page in mind as I was translating? How would the page layout affect the selection of equally suitable alternative translations?

The issue wasn’t really with long blocks of text, such as the paragraph copy you’d find in newspapers articles, but more so in the smaller bits of text, with more constrained design and layout concerns, such as the text you would find in buttons, links, and sub-headings on a Web page.

I know that right now, some of you are saying: whoa, hold on. That’s not our job. We’re translators, not web designers. So let’s leave the design to the designers and just focus on the text...Well, I’m sorry; sometimes, I just have to know how a translation is going to look before I can decide on the most suitable words.

 

Step 2: Get the Tools

For those of you like me who are just too curious, we have the tools my friends! In fact, there are plenty of free Web design tools at our disposal, and many of them are built right into our browsers!

Naturally, Web Development tools are built for Web Developers, so please don’t be put off by the avalanche of technical details in these tools. They are aimed to help Web Developers with many different aspects of developing and testing web pages, such as CSS (for layout and design), HTML (tags for structuring content), network traffic, etc. Suffice it to say, it looks complicated! But don’t worry; we’re going to zoom in on a very useful and easy-to-use part of these tools: manipulating the text content within the HTML code of the page.

One of the most user-friendly tools I stumbled upon is called Firebug. Firebug is a free plugin for the Firefox browser (if you don’t have Firefox, get it, you’ll love it!). If you have Firefox installed, just open Tools > Add Ons (Modules Complémentaires). Search for ‘Firebug’, and you should see Firebug pop up as the first option. Installing it from there is straightforward.

 

Step 3: Start translating and see your Œuvre d’art appear instantly on the page!

Once you have Firebug installed (you will have to restart Firefox) you can open it by clicking the Firebug button in the top right corner of your browser:

Firebug will then open a panel near the bottom of your browser. Go to any website you like, and open Firebug.

 

You can see the panel has several tabs; Console, HTML, CSS, etc. Let’s take a look at the HTML tab, which opens automatically.

If you haven’t heard of HTML, you can think of it as the language of the Web. All Web pages are constructed with HTML. HTML is comprised of tags (just think of tags as words surrounded by angled brackets) and the content within those tags, such as the words the user sees on the page. You don’t need to worry about the HTML tags themselves. If you look at the HTML of a web page, you’ll see a lot of <div>s and <span>s. Just think of these as the containers that hold the text and other content of the page.

When you open Firebug, you’ll probably see a ton of tags. So, how in the world are you ever going to find the text you’re looking for if it’s buried in these mountains of tags? Well, the designers of Firebug (and other tools) were smart enough to add the handy ‘Click to inspect’ tool.

 

You will find this in the top bar of Firebug (the tool, not the browser). Just click on the icon and hover your mouse over the web page. You’ll start to see sections of the page highlight as you pass over them. This is the Firebug inspector zooming in on these sections. Hover over the section of text you’re interested in then just click on it. The HTML panel in Firebug will automatically zoom in on the section of HTML that corresponds to your selection. In the web page I was looking at, I used Firebug and clicked on the following text:

 

After clicking, Firebug automatically selected the following section of HTML in the bottom panel:

 

You can see the text ‘Sweets for Your Sweet’, within the HTML code. Wouldn’t it be nice to be able to change this and play around with the text if you wanted to? We’re translators; we like to play around with words, right?

Easy-peasy: just double-click on the text and you can now modify it:

 

You can then change it to whatever you like.

 

Et voila! The new text instantly appears on the page as soon as you modify it:

 

Are other people looking at the site on their own browser going to see your translation? Of course not! This change is only happening on your own browser, similar to the way you would modify a doc file that you were translating. No one else is going to see it. So feel free to put in the craziest translations you can think of (I won’t judge, promise).

 

Notes:

  1. Changes that you make in Firebug are temporary. If you refresh the browser, you will lose your changes.
  2. Sometimes, websites stick text on images. You might open Firebug, use the ‘Click to Inspect’ tool, and end up clicking on some text that you will not be able to edit. If you don’t see the text you’re looking for inside the HTML tag, the text is probably printed on an image, such as a gif, jpg, or png.