{"id":86,"date":"2005-04-17T11:50:47","date_gmt":"2005-04-17T09:50:47","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/04\/17\/multi-language-web-site-and-background-images\/"},"modified":"2005-05-25T22:43:15","modified_gmt":"2005-05-25T20:43:15","slug":"multi-language-web-site-and-background-images","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/04\/17\/multi-language-web-site-and-background-images\/","title":{"rendered":"Multi-language Web Site and Background Images"},"content":{"rendered":"

When one wants to replace text with an image, she uses some image replacement technique<\/a> (I personally prefer Mike Rundle\u2019s<\/a>, but it\u2019s really just a matter of taste). However, at the multi-language web site it could be a real trouble—you will have to make different background images for each language anyway, but let\u2019s see if we can make multi-language CSS at least a little bit easier to manage. With the launch day knocking on a door, it\u2019s not uncommon to make a mistake in language-specific CSS rules. With server-side parsing, you don\u2019t have to worry about multiple rules. Parsing and gzipping of CSS files with PHP<\/a> (or ASP) is nothing new, but with web.burza<\/a>, we went a step further.<\/p>\n

Hey! Server-side parsing is new to me!<\/h3>\n

It\u2019s okay, we are going from the beginning : )<\/p>\n

To force parsing of CSS file, we save it as PHP\/ASP file, for example: instead of style.css<\/code>, we save it as style.php<\/code> or style.asp<\/code>, depending whether we host on the Apache with PHP or on the Windows server with ASP. We call CSS in HTML as usual:<\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.php\" \/><!-- or  style.asp --><\/pre>\n
Browsers don\u2019t recognize just any file as CSS, so we must \u2018tell\u2019 browser that this is<\/strong> CSS file. We send the header information by placing following lines at the top of the server-side parsed CSS  file:<\/p>\n
<?php header (\"Content-type: text\/css\"); ?><\/pre>\n
or for ASP:<\/p>\n
<% Response.ContentType = \"text\/css\" %><\/pre>\n
This should do just fine for the starters. You want more? Google it<\/a>.<\/p>\n
I already learned about server-side parsing, tell me about multi-language trick<\/h3>\n
Since the CSS file is parsed, we can also send queries either by GET or POST method. If those words are nothing familiar to you, let\u2019s just say—we can make some conditions when requesting CSS file. If we call our CSS like:<\/p>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.php?language=en\" \/><!-- or  style.asp?language=en --><\/pre>\n
we have sent the query string. Next, we modify CSS file so it \u2018understands\u2019 this query, by adding following line:<\/p>\n
\r\n<?php\r\n    header (\"Content-type: text\/css\"); \r\n    $language = (isset($_GET['language']) && $_GET['language'] == 'en') ? 'en' : 'other_language';\r\n?>\r\n<\/pre>\n
or for ASP:<\/p>\n
\r\n<%\r\n    Response.ContentType = \"text\/css\"\r\n    If Request.QueryString(\"language\") = \"en\" Then\r\n        language = \"en\"\r\n    Else\r\n        language = \"other_language\"\r\n    End if\r\n%>\r\n<\/pre>\n
Now that we set our language variable, we can write it anywhere in the CSS file, for example:<\/p>\n
\r\n<?php\r\n    header (\"Content-type: text\/css\"); \r\n    $language = (isset($_GET['language']) && $_GET['language'] == 'en') ? 'en' : 'other_language';\r\n?>\r\n\/* CSS rules *\/\r\nbody { background-image: url(text_in_an_image_<? echo $language; ?><\/strong>.gif) }\r\n<\/pre>\n
or for ASP:<\/p>\n
\r\n<%\r\n    Response.ContentType = \"text\/css\"\r\n    If Request.QueryString(\"language\") = \"en\" Then\r\n        language = \"en\"\r\n    Else\r\n        language = \"other_language\"\r\n    End if\r\n%>\r\n\/* CSS rules *\/\r\nbody { background-image: url(text_in_an_image_<% Response.Write(language) %><\/strong>.gif) }\r\n<\/pre>\n
See how it works  at web.burza<\/a>\u2019s English<\/a> and Croatian<\/a> CSS  files.<\/p>\n
This trick is pretty simple and it makes your life easier if you\u2019re just coder. If you also do graphics—well, I\u2019m sorry… you\u2019ll have to make images for each language manually : ).<\/p>\n","protected":false},"excerpt":{"rendered":"
When one wants to replace text with an image, she uses some image replacement technique (I personally prefer Mike Rundle\u2019s, but it\u2019s really just a matter of taste). However, at the multi-language web site it could be a real trouble—you will have to make different background images for each language anyway, but let\u2019s see if […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/86"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}