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)