How Translating is like Programming - localizationの日記

Another great localization article in my archives that was, unfortunately, not available anymore. For the benefit of all, I am sharing it here again. Thanks to Rachel for writting it in the first place :)

In my free time, I like to translate websites. I am currently working on a project to help an organization move its website into WordPress. Unlike designing a website from scratch, I have to recreate the existing design by using my knowledge of CSS, PHP, and Javascript.

www.youtube.com

This app localization process creates some real challenges, and I recently made a breakthrough. The design demanded code to deal with two issues: The front page has two columns that must be of equal height, and the rest of the pages have one column that needs to have at least the same height as a second column. Because the content in these columns is dynamic, I couldn’t just set a fixed height for any of them. I needed to find a solution that would automatically adjust the design when the content changed.

Luckily, I found a software solution to the first problem with a little research. Someone had already written Javascript code to set equal column heights:

    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    jQuery(document).ready(function() {
	equalHeight(jQuery("#container,#primary"));
    });
    </script>

The real problem came when I wanted to work with other pages. Try as I might, I couldn’t find a piece of code that successfully set a minimum column height based on the height of another column. So I took matters into my own hands—I modified the code above to fit my needs. Then I added an if/else statement so all of the code could be pasted into my theme’s functions.php file:

// script for column height function
 
function my_scripts() {
  if (is_front_page()) {  ?>
    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
        tallest = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }
    jQuery(document).ready(function() {
	equalHeight(jQuery("#container,#primary"));
    });
    </script>
 
  <?php } else { ?>
 
    <script type="text/javascript">
    jQuery.noConflict();
    function fixMinHeight(group) {
        thisHeight = 0;
        group.each(function() {
            thisHeight = jQuery(this).height();
        });
        jQuery("#container").css("min-height", thisHeight+100);
    }
    jQuery(document).ready(function() {
	fixMinHeight(jQuery("#secondary"));
    });
    </script>
 
 
<?php }  }
add_action('wp_head','my_scripts');

The result? All the columns are translated as they should. Someone else may come up with a more elegant solution, but I solved the problem. I jumped around the living room for a good five minutes after I got that to work!

For me, this process is very similar to translating. Like coding an app with an existing design, localization requires me to write based on a source text. When a puzzling term or tricky bit of grammar arises, a little research can sometimes lead me to a solution. If, however, a solution doesn’t already exist, I have to rely on a bit of ingenuity to come up with my own.