none
IE8 で英文が改行されず、ベタに表示される RRS feed

  • 質問

  • 1. 当方のパソコン : Vista SP2、Internet Explorer 8、Firefox 3.6.3
    2. Paragon Software Group [Language = North America] の Suport の My Account のページへログインする。IE8 でこのページにログインすると、自分や相手の記入した英文が全て改行されず、ベタに表示される。Firefox でこのページにログインすると、自分や相手の記入した英文が全て改行され、見易く表示される。
    3. Alcohol Soft の Alcohol Trial Support Forum の Alcohol Trial Technical Support のいずれかのページを見る。見るときログインは不要。IE8 でこのページさせると、英文が全て改行され、見易く表示される。
    4. 2. のページに Firefox でログインし、ページを「名前を付け保存、完全」で保存する。保存したファイルを Firefox で見ると、英文が全て改行され、見易く表示される。保存したファイルを IE8 で見ると、英文が全て改行されず、ベタに表示される。

    以上、IE8 および近い将来の IE9 で、英文が改行され見易く表示されるようにして欲しい。現在解決方法が分かっている場合、教えて欲しい。

    2010年4月27日 13:24

回答

  • >書き入れる訳を実際に書いてみたらばどうでしょうか?
    入れてみました。Paragon Software Groupの方です。

    問題と考える箇所について確認させてください。
    「My Account」→「View Support Requests」リンクを押す→対象のサポートを選ぶ→「Add comment」直下のテキスト入力欄(textarea)に改行つきで入力し「SEND」ボタンを押す→「History」欄に出てくる先ほど入力したコメントが改行されていない

    上記で箇所が問題箇所でよいでしょうか?

    さて、原因を突き止めるため、HTML&CSSを確認しました。
    このHPでは、ユーザが入力した改行コードをそのままテキストノードとして出力し、それを囲むDIVに対してCSSの「white-space: pre-wrap」を指定することで、ユーザ入力の改行を見た目としても改行されるようにしているようです。

    この機能は標準モードの場合、IE8からサポートされています。FireFoxの場合はFireFox3からさポートされています。(CSSでは2.1から)
    https://developer.mozilla.org/en/CSS/white-space
    http://msdn.microsoft.com/en-us/library/ms531182(VS.85).aspx

    IE8でサポートされているにもかかわらず、改行されない理由は、このWebサイトがIE8の新機能を使わないような指定をしているためです(Quirksモードにしている)。
    ※本当にIE8で対応しているかの確認は、IEの開発者ツールから「ドキュメントモードをIE8標準」に選択すれば改行されるようになります。

    ついでに言うと、IEはIE8以前から改行コードを改行として出力する機能も用意していました(preタグや、サーバ側で<br>などのタグに置き換える方法など)。
    にもかかわらずこのサイトはその機能すら利用していません。
    となると、そもそもこのサイトは、本当にIEユーザに対して改行を改行として表示したいと思っているのか疑わしいです。サイト管理者に問い合わせると良いかもしれませんね。

    2010年4月30日 17:44
  • >この記述が、記入した文を改行させて表示させるための指定でしょうか?

    そうです。私はその部分を見て回答していました。ただ、その指定だけでは改行にならず、対応するCSSの定義が必要です。

    「div class="pre"」に対応するCSSの定義は次のようになっています。(まるまるコピペ)

    .pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

    DIVタグ内の「改行コード」に関して、FireFoxでは上記指定を解釈して改行した表示を行いますが、IE7以前やIE8以降のQuirksモードではサポートされていないため、無視され半角スペースになります。

    HTML4.01では「行区切り類もまた、空白類文字である。」と定められているため、上記のCSS定義なしに、「改行コード」(=行区切り類)を見た目の改行として表示することは行いません。
    ※word-wrapは、自動折り返しの指定なので、現在の議論の対象としている「改行コード」の扱いとは意味が違う。

    どのブラウザでも改行されるようにしたければ、上記のCSS指定をばっさり消してしまって(class=preの指定も)、前回の私の回答に挙げたような方法で対処する案があります。
    私の案は面倒な対処なので、w3cはpre-wrapという便利な定義を追加してくれました。mozillaのページではIE5.5はpreタグとword-wrapの組み合わせで代用する方法が記載されています。

    それと、「名前をつけて保存」を行うと、ブラウザが解釈した後のデータを出力するケースもあるので、右クリックメニューの「ページのソースを表示」の方が参考になるかもしれません。そうしないと私が「改行コード」の話ばかりしている理由が分からないかもしれないので。

    これらはIEの話ではなく、HTML/CSS・ブラウザ互換の基礎知識です。このスレで深掘りするような内容ではないです。特定サイトの作りについてここでとやかく言うのもどうかとは思います。

    2010年5月3日 18:28

すべての返信

  • XP SP3&IE8で、アカウントを作って「My Account」のページにログインしてみましたが、英文は適度に折れ曲がっていました。

    URLは「https://www.paragon-software.com/my-account/index.htm」ですよね?

    その先のリンクを押しても内容がからっぽのせいか、気になる箇所は見当たりませんでした。

    作った直後なので、tnk081116さんと見栄えが違うかもです。

    出来れば、タグとCSSの組み合わせで実現可能な最小限のサンプルを作って貼り付けること出来ますか?

    私は、IEの英字の表示は、やたら長い単語や「!」を連続したりしない限り適度に改行を入れてくれるイメージだったりします。(preタグとかは知らない)

     

    そもそもそこのページをIE8で見るとレンダリングがQuirksモードになりませんかね。こちらではQuirksです。

    IE8以降で処理が変わっていたとしても期待出来ないかもしれません。

     

    あと便乗で、どなたか知っていたら教えて下さい。

    IEの場合の文字(とりあえず英字に限定)の「どこで改行を入れるかの判断ロジック」はOSが提供する機能を利用しているんでしたっけ?(CSSでいうデフォルト値(normal)の動作を実現する機能の話しです)。DrawText系であればその内部仕様解説的なものを希望です。

    2010年4月28日 16:27
  • URLは(´・ω・`)さんの言う通りです。

    IE8 でこのページにログインすると、『自分や相手の記入した英文』が全て改行されずベタに表示されますが、そのページの上・下・左などに書かれている英文は綺麗にフォーマットされた状態で表示されます。(´・ω・`)さんもログインし、書き入れる訳を実際に書いてみたらばどうでしょうか?

    このログイン ページのような場合、タグとCSSの知識がなくとも記入でき読めるべきであると思います。なお現在、Firefoxでは自分や相手の記入した英文が全て改行され見易く表示されていますから、IE8での英文のベタ表示は専らIE8の表示プログラムの問題ということになります。

    2010年4月28日 23:54
  • >書き入れる訳を実際に書いてみたらばどうでしょうか?
    入れてみました。Paragon Software Groupの方です。

    問題と考える箇所について確認させてください。
    「My Account」→「View Support Requests」リンクを押す→対象のサポートを選ぶ→「Add comment」直下のテキスト入力欄(textarea)に改行つきで入力し「SEND」ボタンを押す→「History」欄に出てくる先ほど入力したコメントが改行されていない

    上記で箇所が問題箇所でよいでしょうか?

    さて、原因を突き止めるため、HTML&CSSを確認しました。
    このHPでは、ユーザが入力した改行コードをそのままテキストノードとして出力し、それを囲むDIVに対してCSSの「white-space: pre-wrap」を指定することで、ユーザ入力の改行を見た目としても改行されるようにしているようです。

    この機能は標準モードの場合、IE8からサポートされています。FireFoxの場合はFireFox3からさポートされています。(CSSでは2.1から)
    https://developer.mozilla.org/en/CSS/white-space
    http://msdn.microsoft.com/en-us/library/ms531182(VS.85).aspx

    IE8でサポートされているにもかかわらず、改行されない理由は、このWebサイトがIE8の新機能を使わないような指定をしているためです(Quirksモードにしている)。
    ※本当にIE8で対応しているかの確認は、IEの開発者ツールから「ドキュメントモードをIE8標準」に選択すれば改行されるようになります。

    ついでに言うと、IEはIE8以前から改行コードを改行として出力する機能も用意していました(preタグや、サーバ側で<br>などのタグに置き換える方法など)。
    にもかかわらずこのサイトはその機能すら利用していません。
    となると、そもそもこのサイトは、本当にIEユーザに対して改行を改行として表示したいと思っているのか疑わしいです。サイト管理者に問い合わせると良いかもしれませんね。

    2010年4月30日 17:44
  • >問題と考える箇所について確認させてください。
    >「My Account」→「View Support Requests」リンクを押す→対象のサポートを選ぶ→「Add comment」直下のテキスト入力欄(textarea)に改行つきで入力し「SEND」ボタンを押す→「History」欄に出てくる先ほど入力したコメントが改行されていない
    >上記で箇所が問題箇所でよいでしょうか?
    以上、(´・ω・`)さんの言う通りです。

    Firefox でログインし、ページを「名前を付け保存、完全」で保存したものが当方にあります。この保存したファイルとフォルダ (~.htm と ~_files) を表示させると、IE8 ではベタ英文になり、Firefox では改行された英文になります (2010年4月27日投稿、4.項 参)。
    この~.htm 文 (以下のテキスト参) の ******** の所に、a. または b. の meta 文一行を追加すると、IE8 と Firefox の両方で改行された英文になりました。

    a.  <meta http-equiv="X-UA-Compatible" content="IE=8">
    b.  <meta http-equiv="X-UA-Compatible" content="IE=5; IE=7; IE=8">
    -------------------
     (実際には、空白行がもっとあります。)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head>
    ***************************

    <!-- product: -->
    <!--8-->
       
            <title>Support Request</title>
       
            <link rel="stylesheet" type="text/css"
    href="requestDetails%20firefox%20_files/style0.css">
            <meta http-equiv="content-type" content="text/html;
    charset=UTF-8">
            <meta name="description" content="">
            <meta name="keywords" content="">       
            <meta http-equiv="Pragma" content="no-cache">
            <meta http-equiv="Expires" content="-1">
            <meta http-equiv="Cache-Control" content="no-store">
            <meta http-equiv="Cache-Control" content="must-revalidate">
            <meta http-equiv="Cache-Control" content="max-age=0">
            <meta http-equiv="Cache-Control" content="no-cache">
    <script type="text/javascript">
    var menuTimeout;
      以下略
    -------------------

    ここで質問ですが、Paragon のサイトのように、IE5 (IE5以前?) から IE9 まで多様なブラウザでアクセスされる場合、サイト側ではどのような指定をすれば英文が改行文となりベタ文にならないのでしょうか?

    2010年5月1日 13:39
  • >サイト側ではどのような指定をすれば英文が改行文となりベタ文にならないのでしょうか?
    HTMLのみで改行を表現すればいいんじゃないですかね。指定ではなく、処理を記述ということになりますが。

    その中で楽そうなのはJavaScriptで改行コードを<br>に置き換える方法だと思ったんですが、
    そのサイトの場合、現状、コメント部分をJavaScriptの変数としては持っていないので、
    あんまり楽ではないですね。
    $(".pre").each(function(){ $(this).html( $(this).html().replace(/\r?\n/g, "<br>") ); });
    すればいいと思いましたがブラウザが提供するAPIは改行コードを消すかスペースに替えてしまう模様。


    であれば、サーバ側で改行コードをBRタグへ置換(divとかでもいい)すればよいと思います。
    つまり今現在は改行コード(0x0D 0x0A)をそのままHTML中に埋め込んでいますが、
    サーバ側でHTML生成する際に改行コードの代わりに<BR>を埋め込むようにします。

    私がケータイ向けサイトなどのCSSやタグの機能に期待出来ない環境でユーザが入力した改行を改行として
    表現したい場合は次の方法を取っていました。
    1. <br>に置き換える。
    2. <pre>タグを使用する。

    別にtable整形やdivを活用する方法でもよさそうです。編集不可なtextareaを使用する手を使うこともあります。
    PC向けだとJSで制御することもあったと思います。

    そのサイトは投入コメントが任意のスクリプトが実行可能だというセキュリティ問題もあるので
    合わせてHTMLのエンコードや除去を行うようにすればちょうど良いですね。

    # IE5.5やIE6は環境が許せばサポートしない方針としたいところです。

    2010年5月2日 4:16
  • Firefox でログインし、ページを「名前を付け保存、完全」で保存したものが当方にあります。この保存したファイルとフォルダ (~.htm と ~_files) を表示させると、IE8 ではベタ英文になり、Firefox では改行された英文になります (2010年4月27日投稿、4.項 参)。

    この~.htm をテキストで見ると、相手や自分の記入した文の直前行に <div class="pre" width="600"> の記述があります。

    この記述が、記入した文を改行させて表示させるための指定でしょうか? Firefoxではこの記述を解釈して改行した表示を行い、IE8ではこの記述が文法に合っていないので無視してベタ表示を行うのでしょうか?

    2010年5月3日 13:21
  • >この記述が、記入した文を改行させて表示させるための指定でしょうか?

    そうです。私はその部分を見て回答していました。ただ、その指定だけでは改行にならず、対応するCSSの定義が必要です。

    「div class="pre"」に対応するCSSの定義は次のようになっています。(まるまるコピペ)

    .pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

    DIVタグ内の「改行コード」に関して、FireFoxでは上記指定を解釈して改行した表示を行いますが、IE7以前やIE8以降のQuirksモードではサポートされていないため、無視され半角スペースになります。

    HTML4.01では「行区切り類もまた、空白類文字である。」と定められているため、上記のCSS定義なしに、「改行コード」(=行区切り類)を見た目の改行として表示することは行いません。
    ※word-wrapは、自動折り返しの指定なので、現在の議論の対象としている「改行コード」の扱いとは意味が違う。

    どのブラウザでも改行されるようにしたければ、上記のCSS指定をばっさり消してしまって(class=preの指定も)、前回の私の回答に挙げたような方法で対処する案があります。
    私の案は面倒な対処なので、w3cはpre-wrapという便利な定義を追加してくれました。mozillaのページではIE5.5はpreタグとword-wrapの組み合わせで代用する方法が記載されています。

    それと、「名前をつけて保存」を行うと、ブラウザが解釈した後のデータを出力するケースもあるので、右クリックメニューの「ページのソースを表示」の方が参考になるかもしれません。そうしないと私が「改行コード」の話ばかりしている理由が分からないかもしれないので。

    これらはIEの話ではなく、HTML/CSS・ブラウザ互換の基礎知識です。このスレで深掘りするような内容ではないです。特定サイトの作りについてここでとやかく言うのもどうかとは思います。

    2010年5月3日 18:28