― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 10 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2010年4月21日(水) 22:05 
ウェブサイト構築中なのですが、Firefox で閲覧している頁を「名前を付けてページを保存」(Web ページ、完全)してその頁を再生するとレイアウトが崩れていて、余計な空白が挿入されています。
ソースを表示させると勝手なところで改行されていてそれが一個の空白として表示されています。

これは見た限りではの話としては、リンクを貼り付けた日本語文字列でおきているようです。
(アルファベットではスペースがある場所で改行が入る場合がありますが、それはIE8でも同様です)

IE8ではこのようなことは起こらないので、Firefox のバグのように思えるのですがご存知の方があればご教授願います。
また、この現象を回避するhtmlの記述方法をご存知であればご教授願います。

machine : athron64 + windows XP
firefox : ver. 3.6.3
html header :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"><head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
:

以上です


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年4月21日(水) 22:34 
headerだけ提示されても・・・と思うのですが。

実際のページは?

セーフモードや新規プロファイルでも同じ結果でしょうか?


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年4月21日(水) 23:04 
ご返答有難うございます。記述する積りだったのに記述し忘れてました。年のせいにしておきましょう。
以下のサイトで左側のメニュー釦は全て表(セル)とリンク付きテキストです。
保存した頁を再生すると釦の左端の三角印が表示されませんがこれはCSS絡みの別問題です。(IE8でも同じです)

http://www.maroon.dti.ne.jp/~neo/

下位頁で「管理人の呟き」頁で 2010-04-08 の らきすた繋がり云々の中で「らき☆すた...」などにリンクが貼り付けてあります。こちらは☆印の前で改行されるようです。

以上よろしくお願いします


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年4月22日(木) 00:03 
オフライン

登録日時: 2009年4月26日(日) 00:32
記事: 97
お住まい: 大阪
「完全保存」は一部の属性値に変更を加えないといけないため、Webサイトのオリジナルのソースとは異なるものが生成されます。生成はDOMツリーからソースコードを書き出すという形をとっているので、まず「オリジナルと同じ物が保存される」ということはありません。

ただ、ソースコード上の改行位置の変化で空白類の処理による差が出てしまうのはバグと考えて良いと思います。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2010年4月22日(木) 00:06 
オフライン

登録日時: 2008年5月26日(月) 01:41
記事: 1345
お住まい: 冥府
ソースを以下で検証するのが一番確実。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
と、コレは建前上なので特に意識しなくても良いでしょう。
(多くのエラーが確認されてますが・・・)

一応素直に「ページ保存」とソース上からのHTMLファイルの表示をさせると、ファイル保存では余計な改行がされてますね。

保存での表示
http://shagazo.com/a1/userlog/aides/img ... 234304.jpg
ソースでの表示
http://shagazo.com/a1/userlog/aides/img ... 234335.jpg

作成したテキストエディタやサーバーに送信したアプリ(ftp)が不明でftpの設定も不明ですが、作成時の表示とftpの設定に拠る表示で異なる場合は、文字コードに認識の違いで表示が崩れる場合も確認されてます。
エディタは何で、保存時の文字コードは何でしょうか?
ftpの設定はどうされてますか?
Firefoxの問題よりも、此方の問題が大きいと思います。

例としてはphp等のcgi記述で改行コードが記述されてたりと云う例も有ります。
ファイルは純粋にHTMLファイルなのかも判りません。

ローカルでの検証はどうですか?
ローカルでも「名前を付けて保存」で確認を。

_________________

*Windows 10 21H1 64bit/*GoogleJapaneseInput:ATOK2017:MS-IME
Firefox 95.0:Beta 96:Developer Edition 96:Nightly 97.0a1:
Thunderbird 91.4.0:Earlybird 96:Daily 97.0a1:SeaMonkey 2.53.10/2.58a1:
Opera 82.0.4227.23:Google Chrome 96.0.4664.93/98.0.4756.0(Official Build)canary:
SRWare Iron 96.0.4900.0:Lunascape 6.15.2:Avant Ultimate 2020 build 3, 3.17.2020


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2010年4月22日(木) 08:21 
おそらく、Firefox のバグだと思います。(きちんとバグ検索してないので断定はできませんけど...。)

Firefox には HTML の編集機能はありませんが、Masayuki さんがおっしゃっているように、
「Web ページ、完全」形式で保存するときは、同時に保存される画像その他のファイルのパスを書き換える必要があるため、オリジナルのソースに手を加えています。
このときのコーディングの仕方に問題があるのかもしれません。
  | ちなみに、「Web ページ、HTML のみ」形式では手を加える必要がないため
  | オリジナル・ソースがそのまま保存されているはずです。


簡単な比較テストをしてみました。
mht のような単一のアーカイブ形式ではなく、html ファイル + フォルダの形で Web ページを保存できる手持ちのブラウザで、
http://www.maroon.dti.ne.jp/~neo/
を完全保存しました。

 Firefox 3.6.4 beta 、3.5.9 、3.0.19
 Internet Explorer 8
 Opera 10.51
 Iron 4.0.280

このうち、Firefox だけが、元のソースの連続した 2 バイト(全角)文字の途中に改行を入れて保存しました。
Firefox でも、バージョンによって保存後のソースに違いがあり、最も顕著に不自然な改行を挟み込んできたのは 3.6.4 beta でした。
この結果、保存後のソースでページを表示すると、aides さんが貼ってくださった画像のように、レイアウトの乱れが生じることになります。

Firefox 以外のブラウザは、保存したソースがそれぞれ独自に整形されてはいますが、少なくとも連続した 2 バイト文字の途中を改行するものはなく、改行を入れるにしても、もともと半角スペースが存在する位置です。
これなら、タグ内であれば表示にはまったく影響しませんし、ボディの文字列であっても、もともと半角スペースが存在する位置での改行であれば、前後が 1 バイト(半角)文字であれ、2 バイト文字であれ、事実上影響はありません。
したがって、Firefox のようにレアイアウトの乱れは生じません。

Firefox がらみでいえば、たしか以前、Mozilla suite や SeaMonkey 1.x 系の Composer または KompoZer 0.7x において、ソースを編集して保存すると、意図しない箇所が強制的に改行されてしまうといったバグが報告されていたと記憶していますが、この系統のバグではないでしょうか?

なお、ソース中の改行コードが、ブラウザ上で半角スペースとして表現されるのは、HTML の仕様のどこかに書いてあったように思うのですが、記憶が曖昧3センチです(苦笑)。

解決策ではありませんが、とりあえず以上です。


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年4月22日(木) 10:27 
わお、多数の返信有難うございます。

◎表示と保存の関係
私の考えとしましては以下のように考えておりますがどうでしょうか。

狭帯域ではブラウザは頁全体を読み込む前に外形を上下寸詰りで描画を開始して、内部を描画するに従って先に描画した部分が下に引き伸ばされるように再描画されていました。

これはリアルタイム表示はSAXパーサで行われているように思われます。逆に頁を保存するにはリンクをxxx_filesに集約するための書き換えが必要でありキャッシュデータをDOMパーサで再度読み込んでいるものと推測しています。つまり、表示と保存は全くの別物であって表示が正しく行われることは保存が正しく行われることを意味しないであろうと考えています。

◎文法について
文法チェックサイトは何年か前に試しに使ってみたのですがすっかり忘れてました。結果に関しましては次のように考えています。

レベル0/1はQACの場合と同様に狼少年と考えます。
レベル6でのIMGのALT属性に付きましては大部分は意図的に記述しておりません。そもそもCSSファイルでbackground-image:url(uri);と指定した画像にはALT属性という概念自体ありませんし。
レベル7のIDの使い回しに関しましてはDTDに反することは承知しておりますが Firefox でもIE8でも問題ないことを確認の上で使用しております。同一頁内での出現を1回に制限しているのはおそらく頁内リンクのためと思っています。CSSを参照するID属性は何回出現しても問題はないので将来的にはDTDの変更も有り得るのではないでしょうか。
以上のようなわがままを許してほしいがためにDOCTYPEはTransitional(loose.dtd)にした次第です。

◎逸脱?拡張?
蛇足ながら Firefox では(友人に確認してもらったところではおそらくChromeでも)Table にリンクを貼り付けることができます。hover,activeなどの擬似クラスもちゃんと動作しますしリンクに飛べます。IEではhoverは動作しますが肝心のactiveが全く動作しません。インライン要素にしか適用できないものとされているA要素は、意図的に実装しなければブロック要素で動作するものではないと思います。このままデファクトで推移するものなのか将来的にはDTDが変更されるということもあるのかどうかまではわかりませんが、いずれにせよ普及するかどうかはIEが実装するかどうかが鍵でしょう。

◎ホワイトスペースについて
厳密なことは分りませんが(ブラウザ依存という話も聞きます)、概略としてHTMLでは[space],[tab],[cr],[lf],[ff]などのホワイトスペースは、行頭行末では無視され、連続したとしても一個のホワイトスペースにまとめられて最終的に[space]一個で表示されるもの、と理解しています。行末のホワイトスペースには改行そのものは含まれない、よって改行が一個の[space]になるというように思われるのですがこの解釈でよいのかどうか、正確なことをご存知の方に解説をお願いしたいと思います。

---------------------------------------------------------------------------

その他今までに分っていることとしては以下のようなことがあります。

◎IE8が吐いたHTMLコードは清書プログラムに掛けたかのように美しく、broken indentで記述した部分も綺麗に整形されます(一部私の美意識を逆撫でするのは苦笑いで許す。何しろちゃんと動くのだから)が、Firefoxのはオリジナルをこねこねいじり倒しただけという感じの醜悪なコードになってしまいます(broken indentで記述した部分はbroken indentのままです)。DOMに読み込むとインデント情報などはなくなってしまいそうに思うのですが...。

◎Firefox が吐いたCSSファイルはオリジナル(ローカルのもの)と寸分違わないものです。IE8が吐いたCSSファイルはコメントが削除され、キーワードが大文字化され、整形されています。但しどちらも内容的に有意の差はありません。特に、どちらもbackground-image:url(uri);のように記述されたリンクではuriの書き換えもuriの参照先データの保存も行われません。それがHTML/CSSの規格であるのかないのかなどは全く知りませんけど困ったちゃんです。(三角印が表示されなくなるのはこのためです)

以上よろしくお願いします


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年4月22日(木) 14:52 
オフライン

登録日時: 2009年4月26日(日) 00:32
記事: 97
お住まい: 大阪
Neo さんが書きました:
レベル6でのIMGのALT属性に付きましては大部分は意図的に記述しておりません。そもそもCSSファイルでbackground-image:url(uri);と指定した画像にはALT属性という概念自体ありませんし。


オフトピですが。alt属性は必須です。これはHTMLの基本中の基本です。画像が読み込めない場合に意味をなさない画像で、画像の存在すらユーザに通知する必要がないのであれば、|alt=""|と空文字列を指定しなくてはいけません。

これは、alt属性を指定していない不正なHTML文書をユーザのためにUAがレンダリングする際に、ユーザに画像の存在を知らせるためにファイル名や画像があることを示すアイコンを表示するという動作の抑制にもつながります(実際にはUA依存ですが)。

もし、ファイル名が自動で表示された方が良いと感じる場合なら、やはり他に適当なalt属性を設定すべき状況だと言えます。特殊な状況を除き、ファイル名等がユーザにとってよいキャプションであることはあり得ません。

ちなみに、CSSは意味を定義するのではなく、プレゼンテーションの指定のためのものです。CSSでしか表現できない部分、たとえばこの背景画像に意味を持たせてはいけません。そうしなくてはいけない、と感じるのであれば、それはそのページの設計自体が根本的に間違っています。

Neo さんが書きました:
CSSを参照するID属性は何回出現しても問題はないので将来的にはDTDの変更も有り得るのではないでしょうか。


あり得ません。本気でそう思われるのであれば、下手に自分の解釈を仕様より優先すべきではありません。どれほどの数の優秀なエンジニアが関わってWeb標準仕様を組み上げているか考えてみれば、一個人の知識量で問題無いと思えてしまう制約等が何の意味も無く存在するとは思えなくなると思います。

Neo さんが書きました:
◎ホワイトスペースについて
厳密なことは分りませんが(ブラウザ依存という話も聞きます)、概略としてHTMLでは[space],[tab],[cr],[lf],[ff]などのホワイトスペースは、行頭行末では無視され、連続したとしても一個のホワイトスペースにまとめられて最終的に[space]一個で表示されるもの、と理解しています。行末のホワイトスペースには改行そのものは含まれない、よって改行が一個の[space]になるというように思われるのですがこの解釈でよいのかどうか、正確なことをご存知の方に解説をお願いしたいと思います。


実際には難しい問題も色々あるので実装依存と考えた方が良いです。というか、この辺、仕様書にもきちんと書かれているので仕様書をまずは読みましょう。

で、本題。

FirefoxのWebページの完全保存の発想は、表示されているWebページをいつでも同じ表示で再現できるようにイメージを保存するもの、と考えてください。このためファイル間の位置関係の変更や、DOMツリーからソースコードを再構築することによる差が出ます。これはFirefoxの仕様上の問題であって、オリジナルとは異なるソースコードになるのはバグではありません。Webサイトにあるソースコードそのものを保存する必要があるのであれば、HTMLファイルを単体で保存してください。これはソースコードに改変無く保存できることを命題としています。

ただし、完全保存で見た目が変わることがあるのであればそれはバグです。それは、ローカルで同じページを再現するという目的を果たせていないからです。


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2010年4月22日(木) 17:42 
あ~やっぱり怒られてしまった。何でこんなこと書いたんだろう。

で、結論としてはおそらくバグということでしょうか。
ただ、文字コード依存かもしれないとも思っているのでUTF-8でどうなるかもやってみる価値はあるかなと思っています。開発の大部分はLinuxベースで行われているでしょうし。

また、CSSでurl(uri)と指定されたuriの実体が何であるかをブラウザが知るのは困難なように思われますし、見た目だけですので必要なら手作業で用意すると割り切るということでよいでしょうか。

皆さんどうもありがとうございました。

以上です


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2010年4月23日(金) 00:12 
オフライン

登録日時: 2008年5月26日(月) 01:41
記事: 1345
お住まい: 冥府
少々気に成ったのでSeaMonkey/2.0.4でもテストして見ましたが、此方は正常な表示を確認出来たので、他の方が云う様にFirefox独自のバグとして考えるのが妥当な様子ですね。

ソースの件に関しては「img」に於けるalt属性は必須です。
IEとFirefoxの事を考えるとtitle属性も併記するのが理想的。

class属性は使い回し可能だけど、id属性は参照先との関係上「一回」のみです。
コレはw3cでも勧告されてます。

HTMLは先に上げた検証サイトでエラーを徹底的に潰しましょう。
http://validator.w3.org/
でも可ですが、先のサイトが確実。
CSSに関しては以下。
http://jigsaw.w3.org/css-validator/

サイト運営をするなら文法は最低限意識しないと閲覧者には不親切に成ります。
何も「たいへん良く出来ました」を取れとは云いませんが、意識をしないよりも遥かに良い筈。
一番良いのは「Trident/Gecko/Webkit/Presto」と各レンダリングエンジンのブラウザでの確認が望ましい。

_________________

*Windows 10 21H1 64bit/*GoogleJapaneseInput:ATOK2017:MS-IME
Firefox 95.0:Beta 96:Developer Edition 96:Nightly 97.0a1:
Thunderbird 91.4.0:Earlybird 96:Daily 97.0a1:SeaMonkey 2.53.10/2.58a1:
Opera 82.0.4227.23:Google Chrome 96.0.4664.93/98.0.4756.0(Official Build)canary:
SRWare Iron 96.0.4900.0:Lunascape 6.15.2:Avant Ultimate 2020 build 3, 3.17.2020


通報する
ページトップ
 プロフィール  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 10 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[52人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean