cols wont work with shift-jis and firefox

#1
Alhazred

Posted 09 May 2011 - 11:53 AM

Learning Programmer

Members
99 posts

I have a page where I need to use the charset shift-jis and I do like this
<meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />

the text is correctly shown, the problem is that the cols attribute of a textarea wont work, I can write any number and the textarea has always the same width, the rows attribute works correctly.
If I change the charset to utf-8 the cols attribute works too, but I can't leave utf-8 because the text is no more shown correctly.

I've found out that this happens only on Firefox4 (I don't know with older versions), IE, Safari, Opera and Chrome have no problem, how can I solve this situation?

Cross reference: Cols Wont Work With Shift-jis And Firefox - HTML & CSS | Dream.In.Code

Edited by Alexander, 09 May 2011 - 06:26 PM.
Added reference to cross post for integrity

#2
Alexander

Posted 09 May 2011 - 06:31 PM

It's Science!

Moderators
4,118 posts

Location:Vancouver, Eh! Cleverness: 200

Can you provide a sample script of which does this? I cannot find any similar problems online, it may be very specific to you.

Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#3
Alhazred

Posted 10 May 2011 - 07:15 AM

Learning Programmer

Members
99 posts

This is the page's code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="jp-JP" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" />
        <meta name="author" content="Luigi Caradonna" />
        <meta name="description" content="Contact form to send messages" />
        <title>Luigi Caradonna - お問い合わせ</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
        <link rel="icon" href="favicon.png" type="image/png" />
    </head>
    <body>
        <div id="crd_container">
            <div id="crd_main">
                <div id="crd_header_back">
                    <div id="crd_header"></div>
                </div>
                <div id="crd_menu_back">
                    <div class="crd_menu">
                        <?php include_once('include/menu.php') ?>
                        <div id="crd_language_select">
                            <?php include_once('../include/form_lingua.php') ?>
                        </div>
                    </div>
                </div>
                <div id="crd_main_content_back">
                    <div id="crd_main_content">
                        <div id="crd_content">
                            <div id="crd_sect_title">
                                <img src="images/contatti_jap.jpg" alt="contatti" />
                            </div>
                            <div id="crd_contact_image">
                                <img src="images/busta.jpg" alt="busta" />
                            </div>
                            
                            <div id="crd_contact_div">
                                <form id="crd_contact_form" method="post" action="../utils/sendmail_jap.php" >
                                    <table class="crd_noborder">
                                        <tr>
                                            <td colspan="2" class="crd_contact_label">名前 *<br /><input type="text" name="nome" size="50" value="<?php echo $_SESSION['nome'] ?>" /></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" class="crd_contact_label">メールアドレス *<br /><input type="text" name="email" size="50" <?php echo $_SESSION['email'] ?> /></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" class="crd_contact_label">件名 *<br /><input type="text" name="oggetto" size="50" <?php echo $_SESSION['oggetto'] ?> /></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" class="crd_contact_label">メッセージ *<br /><textarea name="messaggio" cols="50" rows="3"><?php echo $_SESSION['messaggio'] ?></textarea></td>
                                        </tr>
                                        <tr>
                                            <td valign="bottom" class="crd_contact_label">
                                                Captcha code *<br />
                                                <input type="text" name="code" size="29" /><br />
                                                <img src="../include/captcha.php" alt="code" />
                                            </td>
                                            <td>
                                                <input type="submit" name="submit" value=" Invia email " style="cursor:pointer" onclick="return checkContatti();" /><br /><br />
                                                <span style="font-size:12px"> * 必須項目</span>
                                            </td>
                                        </tr>
                                    </table>
                                </form>
                                <div id="avvisi"></div>
                            </div>
                            <div id="crd_contact">
                                メールアドレス<br />
                                <hr class="crd_hr_gray" />
                                <img src="images/email.jpg" alt="email" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="crd_footer_back">
            <?php include_once('include/footer.php') ?>
        </div>
    </body>
</html>

You can also try the online version on my site
Luigi Caradonna - Home
select Japanese language and then follow the last link in the menu, you'll see the form which gives me the problem.
Does it do the same think to you if you use Firefox4? Is the textarea larger than the site template?
The site template is the same as the yellow line in the footer.

#4
Alexander

Posted 10 May 2011 - 08:42 AM

It's Science!

Moderators
4,118 posts

Location:Vancouver, Eh! Cleverness: 200

Ah I see what you mean. You best use the CSS width attribute on the text area to keep everything the same size. 50 columns of full width characters would just expand it arbitrarily based on the font (HTML is purely semantic). With CSS you at least prevent the browser from rendering the HTML form past the specified width.

Firefox 4 has a new font rendering engine if I recall and that may be it, I know I've had some issues in the recent past with it not being able to render some core fonts.

As a note: There are at least 3-4 quick fixes to display proper UTF-8 codepoints rather than a special code page, if you do wish to try to keep all the data normalized feel free to ask about how.

Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#5
Alhazred

Posted 10 May 2011 - 10:33 AM

Learning Programmer

Members
99 posts

Thank you, I've set the width from the css and now I have the textarea as I wanted.
By the way, yes please, let me know how to use utf-8 in place of shift-jis.

#6
Alexander

Posted 10 May 2011 - 11:03 AM

It's Science!

Moderators
4,118 posts

Location:Vancouver, Eh! Cleverness: 200

I believe can simply paste the source (with all the Japanese text) inside notepad or another Unicode compliant editor, and specify explicitly that you wish to encode or save the file in UTF-8 format (without byte order mark (BOM) if that is an option).

Along with a proper meta tag (charset=utf-8) it should display correctly by your browser as everything should be in a normalized encoding (clearing your cache may help show changes).

Often source code editors or whichever one you used to add the text did not encode things correctly, your text should have been extracted from a UTF-8 source and then supplied as one to the user, SHIFT-JIS is not really used anymore.

Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.

#7
Alhazred

Posted 10 May 2011 - 02:44 PM

Learning Programmer

Members
99 posts

Thanks again, that works, when I converted the text before I chose simple UTF8, not the variant without BOM.

#8
Alexander

Posted 11 May 2011 - 12:38 AM

It's Science!

Moderators
4,118 posts

Location:Vancouver, Eh! Cleverness: 200

The byte order mark essentially places three hidden characters at the beginning of each text file, so if you use sessions or headers then it will break them for example. The method of copying non-UTF code to a UTF compliant editor works fine though, normalization is nice when you can achieve it. I am glad you got it to work!

Be sure to read the updated FAQ! || Health is achieved through the same 10,000 steps.
If a suggested code/method fails, informing us is less important than telling us why or what errors occurred.