MediaWiki‐ノート:Common.css/hlist関連表示不具合 201807

このサブページはWikipedia:バグの報告及びMediaWiki‐ノート:Common.cssの読み込みがあります。

このセクションはWikipedia:バグの報告に投稿されたものです。--アルトクール（会話） 2018年9月2日 (日) 15:51 (UTC)返信

Template:エピソードリスト/baseでTemplate:Hlist-commaで記載されたスタッフ名が改行されず、表全体が横長になっています。（ひそねとまそたん#各話リスト、多田くんは恋をしない#各話リストなど）モバイルビューでは画面幅にあわせて改行されています。--Sazanamiya（会話） 2018年7月7日 (土) 12:46 (UTC)返信

情報 Chrome 67.0.3396.99, Microsoft Edge 42.17134.1.0, IE 11で現象を確認しました。Firefox 61.0.1では現象が発生しませんでした（きちんと区切りの場所で改行される）。--MawaruNeko（会話） 2018年7月7日 (土) 13:03 (UTC)返信

表中に限らず、{{hlist}}は（Firefoxでも）改行してくれないように見えます。以下に例を示します。

• entry1entry1entry1
• entry2entry2entry2
• entry3entry3entry3
• entry4entry4entry4
• entry5entry5entry5
• entry6entry6entry6
• entry7entry7entry7
• entry8entry8entry8
• entry9entry9entry9

Template:Hlist-commaのドキュメントの使用例の表中では改行されていますが、むしろこのような動作をするほうが珍しいように見えます。--MawaruNeko（会話） 2018年7月7日 (土) 14:30 (UTC)返信

コメント common.cssで".hlist li"に"white-space: nowrap;"が適用されていることで改行が行われていないように見えます。ひそねとまそたん#各話リストで{{Hlist-comma}}の指定に"item_style=white-space:normal"を追加してみました。これだとどうでしょうか。--Amayus（会話） 2018年7月8日 (日) 12:16 (UTC)返信

コメント nowrapを解除すると、hlistの各要素の境目だけでなく、要素の途中（今回の場合、スタッフ名の途中）で改行されますね。MediaWiki:Common.cssのl.181 .hlist dd, .hlist dt, .hlist liのスタイルを、display: inline;からdisplay: inline-block;にするのはどうでしょうか？--MawaruNeko（会話） 2018年7月8日 (日) 13:21 (UTC)返信

ひそねとまそたん#各話リストでの指定を"display: inline-block;"としてみました。CSSの更新については全体に適用となるため、お知らせ等での周知が必要そうです。--Amayus（会話） 2018年7月8日 (日) 13:38 (UTC)返信

返信 MawaruNeko様、Amayus様、ありがとうございます。ひそねとまそたん#各話リストで改行されているのを確認しました。当方、プログラミング等は全くの不得手ですので、修正してくださることをお願いします。しかし、今まで改行されていたのが突然改行されなくなる、そもそもそういう指定がされていなかったというのは不思議ですね…。--Sazanamiya（会話） 2018年7月9日 (月) 00:09 (UTC)返信

改行にあまり注意していなかったので気づきませんでしたが、hlist自体のスタイルはあまり変更されていないようなので、今まで改行されていたのに急に改行されなくなったとしたら、周囲のスタイルが変わって、従来の周囲のスタイルと組み合わさって動いていたものが動かなくなったのかもしれませんね--MawaruNeko（会話） 2018年7月9日 (月) 14:42 (UTC)--MawaruNeko（会話） 2018年7月26日 (木) 16:07 (UTC)削除返信

報告 修正・確認ありがとうございます。サイト全体に適用できるよう、MediaWiki‐ノート:Common.css#hlistを区切り部分で改行できるようにdisplayをinlineからinline-blockに変更する提案を提出しました。--MawaruNeko（会話） 2018年7月9日 (月) 14:34 (UTC)返信

取り下げ 上記の提案は、入れ子のリストがあった場合に、入れ子全体が改行されなくなるため、入れ子が長くなる場合に不適切なので、取り下げさせていただきました。--MawaruNeko（会話） 2018年7月26日 (木) 15:35 (UTC)返信

コメント {{Navbox}}の中のhlistや{{Flatlist}}で改行されないという話は聞いたことがないので、{{Hlist}}や{{Hlist-comma}}が使用しているモジュール:Listの方の問題かもしれません。--新幹線（会話） 2018年7月13日 (金) 06:40 (UTC)返信

コメント {{Navbox}}でも改行の処理がおかしくなっているようです。例：小学館の記事内から{{一ツ橋グループ}}を閲覧すると過剰に改行される。--XRGD（会話） 2018年7月14日 (土) 12:27 (UTC)返信

コメント {{hlist}}では区切り文字の後ろに空白が挿入されなくなっており、それが原因で改行できないようです。なので無理やり空白を入れるようにテンプレートを修正すると改善されます。

{{<includeonly>safesubst:</includeonly>#invoke:String|replace|{{#invoke:list|horizontal}}|/li><li|/li> <li}}

{{Navbox}}の問題はhlistクラスの指定場所をtdタグからdivタグへ変更すると改善されると思います。

<td class="navbox-list"><div class="hlist">

--XRGD（会話） 2018年7月20日 (金) 07:15 (UTC)返信

コメント 今回問題の起きている編集・ページを、Edit with migration toolで確認したところ、上記のentry1entry1entry1や{{一ツ橋グループ}}は、Tidyでは正しく表示されていました。確かにTidy to RemexHTMLが今回の問題の原因のようですね。もっと早くこれに気付くべきだったのかもしれません。{{Hlist}}については、HTMLソースコードを確認したところ、もともとTidyで<li>の各要素が改行されていたのに対し、RemexHTMLでは改行や空白がありませんでした。また、入れ子のリストがおかしくなる件は、MediaWiki:Common.cssの「Display nested lists inline and allow them to wrap」が適用されていなかったため、{{一ツ橋グループ}}のHTMLソースコードを確認したところ、<li>タグが、<ul>タグなしで<div>タグ直下にぶら下がっていました。ブラウザの開発者機能で無理やり<ul>タグを入れてみたところ、本来の動作と思われる形で動作しました。教えていただいた英語版のen:Template:Appleでは、正しく<ul>タグが入っているため、{{Navbox}}周りの問題の可能性もあるかもしれません。--MawaruNeko（会話） 2018年7月26日 (木) 16:07 (UTC)--MawaruNeko（会話） 2018年7月26日 (木) 16:08 (UTC)微修正返信

コメント {{Infobox}}では、Template:Infobox Album#使用例にように2か所以上リストを使用すると表示か崩れる問題も発生しています。--XRGD（会話） 2018年7月31日 (火) 08:43 (UTC)返信

{{Infobox Album}}でも、tdタグ直下にliタグが付いていますね。--MawaruNeko（会話） 2018年7月31日 (火) 15:56 (UTC)返信

コメント 日本語版ではNavboxのモジュールとして英語版のen:Module:Navboxを独自拡張したモジュール:Navbox/formerを適用しており、詳細は不明ですがこれに原因がある模様です。英語版ベースのモジュール:Navboxとモジュール:Navbarを適用したところhlist部分が正しく表示されるようになりました。メンテナンスの都合も考えるとこれを機に{{Navbox}}を英語版ベースのテンプレートに更新した方がいいと思います。ただし英語版ベースのテンプレートに更新した場合、関連するCSSをen:MediaWiki:Common.cssから移入する必要があります。また、{{Navbox with columns}}と{{Navbox with collapsible groups}}に関しては専用のモジュールが導入されていないので、このまま移入するとgroup/list数やcol数が20までに制限されてしまいます（モジュール:Navboxを呼び出すモジュールとして新たにモジュール:Navbox with columnsとモジュール:Navbox with collapsible groupsを作成すべきかな）。

{{Infobox Album}}に関しても、英語版で表示が乱れないため{{Infobox}}が使用しているモジュール:Infobox/former側の原因だと思います。Infoboxの方は英語版と機能が違う部分が多いため（labelnstyle, datanstyle引数がないなど）、英語版との同期は難しいかもしれません。--新幹線（会話） 2018年8月7日 (火) 07:02 (UTC)返信

議論が停滞してしまった感じがありますが、現在の状況をまとめます。

{{hlist}}で改行がされない

原因: RemexHTML移行により、従来liタグの間が改行されていたものが改行されなくなった

• 解決策1: {{hlist}}を変更して、各liタグの間に空白を入れる
• 解決策2: ".hlist li"のnowrapをやめる

{{Navbox}}や{{Infobox}}で入れ子のリストが正しく表示されない

原因: RemexHTML移行により、liタグが正しく出力されなくなり、特にulタグが出力されなくなった

• 解決策: 英語版ベースのen:Module:Navbox・en:Module:Infoboxを取り込み、CSSを対応させる（ただし日本語版向けにModuleの変更が必要）

NavboxやInfoboxの各テンプレートや記事では、対症療法的な修正が行われているようなので、早急に対応したほうがよさそうです。--MawaruNeko（会話） 2018年8月12日 (日) 10:30 (UTC)返信

CSSの対応については、Wikipedia:井戸端/subj/Enabling a helpful feature for Template editorsに書かれた内容が有用かも知れません。--aki42006（会話） 2018年8月12日 (日) 12:31 (UTC)返信

hlistに関してはen:MediaWiki:Common.cssのようにCSS側で区切りの後ろに空白を入れるように変更してもいいと思います。--新幹線（会話） 2018年8月17日 (金) 07:30 (UTC)返信

報告 議論が停滞してしまいましたが、hlistに関しては先般導入されたTemplatestylesを用いてMediaWiki:Common.cssの内容を強制的に上書きすることで、対処療法的にバグを解決しました。--新幹線（会話） 2018年10月31日 (水) 07:46 (UTC)返信

コメント 「こちらに報告して下さい」との事ですので、私の環境ではまだ「エピソードリストでスタッフ名が改行されない」の不具合が続いている事を報告します。前記のはねバド!#各話リストで「item_style=display:inline-block」を取る編集がなされた後の状態で、正常に表示されません。

私の環境は以下の通りです。

• Windows8.1
• IE 11.1.9600.19155
• 外装：ベクター

確認と出来れば対処をお願いします。--えのきだたもつ（会話） 2018年11月14日 (水) 12:12 (UTC)返信

報告 IEとEdgeではまだ改行されないようなので「display:inline-block」をTemplate:Hlist/styles.cssへ追加しておきました。--XRGD（会話） 2018年11月15日 (木) 03:28 (UTC)返信

コメント 上記の私の環境でも正常に表示される事を確認しました。対応ありがとうございました。--えのきだたもつ（会話） 2018年11月15日 (木) 06:45 (UTC)返信

今見たら、また区切りの後ろに空白が挿入されなくなっているようです。MediaWiki:Common.cssの方を書き換えないとだめですかね…。--新幹線（会話） 2018年11月19日 (月) 07:08 (UTC)返信

コメント はねバド!の記事を見ると各話リストはそこまで問題ないのですが、「放送局」節やナビゲーションテンプレートで使用しているhlistが強制的に「・」になっていて、hlist-pipeなどが使えなくなっています。。--XRGD（会話） 2018年11月23日 (金) 02:55 (UTC)返信

コメント {{hlist}}ではリストのスタイルを指定できますが普通は使わないので、{{flatlist}}のようにモジュール:Listは使わずに

<div class="hlist">
* 項目1
* 項目2
* 項目3
</div>

と出力させる方法もあります。--XRGD（会話） 2018年11月23日 (金) 02:55 (UTC)返信

この編集でhlist-pipeとhlist-hyphenを除去したのが原因のようでした。ご迷惑おかけしました。--新幹線（会話） 2018年11月23日 (金) 03:06 (UTC)返信

質問 {{hlist}} の修正で議論が終わっていますが、もう一件の「{{Navbox}}や{{Infobox}}で入れ子のリストが正しく表示されない」の件については、その後も未解決の状況でしょうか…？ --Honeplus（会話） 2019年5月1日 (水) 02:53 (UTC)返信
報告 {{Navbox}}で<ul>が出力されない件ですが、おそらく原因特定できました。 モジュールが生成するWiki構文が

<div style="padding:0 0.25em">
*test</div>

のようにリストの後ろが改行無しになっているのが原因のようで、これを英語版ベースのモジュール:Navboxのように

<div style="padding:0 0.25em">
*test
</div>

と改行が入るようにしたところ、<ul> が出力されるようになりました（実験ソース差分, 実験例）。保護されたモジュールの直し方が分からないので、この修正で問題ないようでしたら、どなたか差分を反映頂けないでしょうか？（infoboxについても別途同様の対応が必要？） --Honeplus（会話） 2019年5月6日 (月) 11:00 (UTC)返信

• 報告 {{Navbox}}についてですが、去年8月29日にTemplate‐ノート:Navbox#モジュール:Navbox/formerの改訂提案で同種の修正提案がされていたようで、現在Wikipedia:管理者伝言板/保護ページ編集#モジュール:Navbox/formerで編集依頼が出ております（新幹線様つのふえ様ありがとうございます）。 --Honeplus（会話） 2019年5月28日 (火) 04:59 (UTC)返信
  • 報告 {{Navbox}}の改訂提案ですが、今年1月6日に反映されました。入れ子が表示されるようになっているかと思います。ご対応ありがとうございました。 --Honeplus（会話） 2020年1月7日 (火) 23:35 (UTC)返信