Help talk:Table/styles.css
Preview problem at Help:Table
editI copied part of a Help:Table section here. I can see the boxes in preview here on this talk page. At least for now. But I can not see the boxes when I preview this section at Help:Table. They only show up there after publishing. Not during preview. I am wondering why.
<templatestyles src="Help:Table/styles.css" />
is circled.
is on the right end.To automatically insert a table, click or (Insert a table) on the edit toolbar. In the Vector toolbar the table icon is in the "Advanced" menu.
The following wikitext is inserted when Insert a table is clicked.
{| class="wikitable"
|+ Caption text
|-
! Header text !! Header text !! Header text
|-
| Example || Example || Example
|-
| Example || Example || Example
|-
| Example || Example || Example
|}
The sample text ("Header text" or "Example") is intended to be replaced with actual data. Row numbers (1-3) and column letters (A-C) have been substituted below to help visualization.
Wikitext
{| class="wikitable"
|+ Caption text
|-
! Header A !! Header B !! Header C
|-
| row 1 A || row 1 B || row 1 C
|-
| row 2 A || row 2 B || row 2 C
|-
| row 3 A || row 3 B || row 3 C
|}
Produces:
| Header A | Header B | Header C |
|---|---|---|
| row 1 A | row 1 B | row 1 C |
| row 2 A | row 2 B | row 2 C |
| row 3 A | row 3 B | row 3 C |
--Timeshifter (talk) 16:02, 7 February 2025 (UTC)
- Timeshifter, regarding: They only show up there after publishing. Not during preview. I am wondering why, are you by any chance doing section edits? That could be the reason. Some time back, I think I posted on VPT or maybe Phabricator, to request that section editing pick up any valid Templatestyles declaration, and propagate it into the section presentation, but they don't currently do that. If they did, you wouldn't be having this problem.
- Here is the workaround: copy the templatestyles line on the page to a clipboard, then edit the section you wish to change. Temporarily paste the clipboard to the section. Now, the code should work in Preview mode as well. When everything looks good, delete the tempatestyles line from the section as the last thing, then Publish. Let me know if this doesn't work for you. Mathglot (talk) 22:45, 7 February 2025 (UTC)
- Thanks Mathglot. It is so obvious now, but I didn't think to do what I was doing here on the talk page in each section, and transfer that knowledge to whatever Help:Table section I was working on. :) --Timeshifter (talk) 23:00, 7 February 2025 (UTC)
Contrast checking for gray on white, and gray on black
edithttps://webaim.org/resources/contrastchecker
Gray on white:
Gray on black:
So gray is OK for the borders. In both light and dark modes of Wikipedia.
I find gray terrible for text though. --Timeshifter (talk) 16:55, 7 February 2025 (UTC)
- @Timeshifter:, there are some folks who have expertise on dark mode (not me) and can offer help on this. This comes up increasingly often with page style questions at WP:VPT and elsewhere. You can trace who they are by searching VPT archives for dark mode. This is increasingly a thing, and there is recent activity on it; see for example, this discussion from Oct. 2024 in Archive_214. Dark mode issues might not be the #1 priority at Help:Table right now, but at some point, we will have to deal with it. The fact that style is almost completely isolated in styles.css is going to make that process vastly easier than it would have been. Mathglot (talk) 19:10, 8 February 2025 (UTC)
- @Mathglot: That and your extensive regex skills. :)
- I wrote all of this except the first subsection:
- Help:Table/Advanced#Colors in tables
- I added the notes at the top of the first subsection.
- I figured out some of this stuff, but it is complicated. I added the links here too:
- c:Commons:Map resources#Accessibility and map colors
- I used many of the tools in the last couple years of working on the maps in this category:
- c:Category:English-language SVG choropleth maps of the United States with visible numbers. Made with templates
- --Timeshifter (talk) 19:34, 8 February 2025 (UTC)
- Oh, I see § Color contrast of links in dark mode now, and your Phab ticket, so you're way ahead of me on this. Glad you're on top of it. Mathglot (talk) 19:43, 8 February 2025 (UTC)
- @Mathglot: I had forgotten about that. I just updated the links there since I recently moved the "Colors in tables" section to Help:Table/Advanced. --Timeshifter (talk) 20:36, 8 February 2025 (UTC)
- Oh, I see § Color contrast of links in dark mode now, and your Phab ticket, so you're way ahead of me on this. Glad you're on top of it. Mathglot (talk) 19:43, 8 February 2025 (UTC)
class=box-aligned
editTable pair is from Help:Table#Vertical alignment in cells. I created class=box-aligned for the first table below. 2nd table uses class=box
| Three lines of text |
No alignment | Top-aligned | Middle-aligned | Bottom-aligned |
Relevant wikitext:
|style=vertical-align:top |Top-aligned
|style=vertical-align:middle |Middle-aligned
|style=vertical-align:bottom |Bottom-aligned
If both are class=box, then they are not aligned at all.
| Three lines of text |
No alignment | Top-aligned | Middle-aligned | Bottom-aligned |
Relevant wikitext:
|style=vertical-align:top |Top-aligned
|style=vertical-align:middle |Middle-aligned
|style=vertical-align:bottom |Bottom-aligned
--Timeshifter (talk) 20:41, 7 February 2025 (UTC)
- Nicely done. Mathglot (talk) 22:47, 7 February 2025 (UTC)
Where to host style discussions for Help:Table
editTimeshifter, I believe we should hold discussions about style at Help talk:Table, not here. The convention, if there is one, seems to be to hold discussions on style on the talk page of the base page, and to redirect the talk subpage to the base talk page (see for example, Help talk:Keyboard shortcuts/styles.css ) or just leave it redlinked (as at Help:Your first article/styles.css, Help:Contents/styles.css, and Help:Introduction/All/styles.css).
If you agree, that would mean moving the conversations above to Help talk:Table, and replacing the content here with #REDIRECT [[Help talk:Table]]. The advantage is, you only have to look in one place to find a discussion. The disadvantage is that the Help talk page will be longer, but that is probably only a temporary situation during this period of ramped up activity at the outset of the use of styles.css. That activity should calm down considerably once styles are fully implemented, and then the Talk page will get pretty sleepy again, so I'd favor the redirect. Mathglot (talk) 23:08, 7 February 2025 (UTC)
- @Mathglot: I prefer that it stays here. I don't like having to dig around multiple locations for the past discussions. For example, things seem to be working better now that discussion is staying at Template talk:Table help. I linked to past discussions at the top of the talk page there. People can put a note at Help talk:Table asking for help if needed. But so far, it hasn't been necessary. I will also put note at the top of Help talk:Table with a link to here. --Timeshifter (talk) 23:44, 7 February 2025 (UTC)
Borderless as solution to too-wide background
editNote for new readers. Demo and borderless classes are now gone.
Timeshifter, your "borderless" solution works, but I think there is a simpler one, that allows bordered, or borderless, or whatever you want, at any width, and also gets rid of an unnecessary div. See the demo at § Begin and end delimiters, and recent change to Help:Table/styles.css for class demo. Mathglot (talk) 23:29, 7 February 2025 (UTC)
- The borderless class fits snugly regardless of the width of what it surrounds. That is better for cell phones. The background for the demo class extends well beyond the text. Even more so at larger text sizes. At least at § Begin and end delimiters. You set it to one size: 25em.
- <syntaxhighlight lang=wikitext class=demo>
{| table code goes here |}
- I noticed that you used the demo class with syntaxhighlight. I did know that was possible. So I tried the borderless class with syntaxhighlight. It works too! And it fits snugly and no div:
- <syntaxhighlight lang=wikitext class=borderless>
{| table code goes here |}
- It works with class=box too:
- <syntaxhighlight lang=wikitext class=box>
{| table code goes here |}
- It works with class=grid too. Gets rid of the unneeded padding:
- <syntaxhighlight lang=wikitext class=grid>
{| table code goes here |}
- It works with class=gridbox too:
- <syntaxhighlight lang=wikitext class=gridbox>
{| table code goes here |}
- I like class=gridbox best so far for this problem. And it works well in both light and dark mode of Wikipedia. Because I did not designate a color for the 1px border. So it is a black line in light mode, and a white line in dark mode. This is best for contrast in both cases.
- I added it to several wikitext blocks with long horizontal backgrounds that were not part of pairs. I removed the divs. This is better.
- The wikitext/produces pairs are just one way to have pairs. Sometimes no additional border is needed on one or both sides of a pair. Depending on how they are introduced. Some table help page editors prefer this sometimes. Doing some tests.
| Three lines of text |
No alignment | Top-aligned | Middle-aligned | Bottom-aligned |
|style=vertical-align:top |Top-aligned
|style=vertical-align:middle |Middle-aligned
|style=vertical-align:bottom |Bottom-aligned
Added to table help template surrounded by includeonly tags.
edit<templatestyles src="Help:Table/styles.css" />
I added it to {{Table help}} surrounded by includeonly tags.
It worked, and I was able to use the classes on a table help page other than Help:Table.
So the classes should work on any page with {{Table help}}. --Timeshifter (talk) 01:48, 8 February 2025 (UTC)
- That's clever and economical, and obviously saves you having to add the declaration to a dozen Help files, but it is rather tricky, and may drive some editor crazy one day if they look all over where the styles are coming from, and don't see the declaration on the page they are editing. (Also, even if you did do it that way, there's no need for the includeonly as it does no harm in the template.) Tbh, I would just remove it from the template, and include the templatestyles declaration in every table help page that needs it; that's an annoyance, but only a one-time annoyance in the service of transparency, and is the better way to go, imho. Mathglot (talk) 04:04, 8 February 2025 (UTC)
- @Mathglot: Let's do both for now. At least until it is added to all the table help pages. I would like an actual link to Help:Table/styles.css added as a note to the top of all the talk pages too. I removed the includeonly tags. --Timeshifter (talk) 14:29, 8 February 2025 (UTC)
- @Timeshifter:, actually, yeah, both is a good compromise. There is a specific template that is used to visibly highlight to reader/editors that a templatestyles template is in use at a page. I will go find it, and add it. (But maybe not right away; I will be on reduced availability for a few days, but occasionally around.) Thanks, Mathglot (talk) 18:55, 8 February 2025 (UTC)
- @Mathglot: I see this one on template pages:
- Template:Uses TemplateStyles
- But I don't think that is what you are talking about?
- Since Help:Table/styles.css is not a TemplateStyle? Or is it part of that?
- --Timeshifter (talk) 19:17, 8 February 2025 (UTC)
- Yeah, that's the one; and that is a good question. I would say, it is definitely part of this, and the usage of TemplateStyles outside of template space has outrun that template. I will address that at the template, or somewhere. Stay tuned... Mathglot (talk) 19:21, 8 February 2025 (UTC)
- @Timeshifter:, actually, yeah, both is a good compromise. There is a specific template that is used to visibly highlight to reader/editors that a templatestyles template is in use at a page. I will go find it, and add it. (But maybe not right away; I will be on reduced availability for a few days, but occasionally around.) Thanks, Mathglot (talk) 18:55, 8 February 2025 (UTC)
- @Mathglot: Let's do both for now. At least until it is added to all the table help pages. I would like an actual link to Help:Table/styles.css added as a note to the top of all the talk pages too. I removed the includeonly tags. --Timeshifter (talk) 14:29, 8 February 2025 (UTC)
See WP:VPT#TemplateStyles not just for templates anymore. Mathglot (talk) 21:18, 8 February 2025 (UTC)
Class names should not reflect the included style
editTimeshifter, the name of a class name should reflect the class, not the style used for the class. That practice drives from the core raison d'etre of CSS, which is to separate content (HTML or wikicode) from style. So pretty much all of these names should change. You could have names like, table example, or table code, or conditional row, or left table, or sortable example, or anything like that. We can think of some functional names here, or just go ahead and change them, or I can. I'll think of some suggestions, and post them here.
Btw, by now I guess you've seen that you can include /* CSS comments */ either on a line by themself, or on a line with CSS style on it. Mathglot (talk) 04:31, 8 February 2025 (UTC)
- I have helped with a lot of table templates, wrote a lot of documentation, helped choose class names, campaigned for the creation of various table templates, and even started one: Template:Sticky header. At the bottom of that template there is a see also section listing a few of the templates I have helped with.
- In those discussions we agreed to use the most easily remembered class names. There is nothing wrong with the current class names here. Nothing is broken by any of those class names. But they are easily remembered. --Timeshifter (talk) 14:42, 8 February 2025 (UTC)
- Okay, if you feel that strongly, we can leave it, but be aware that some day, consensus might be, say, to have the snippets of table syntax bordered, and with a class name like 'borderless', that's just a recipe for confusion. It's not a requirement, just a general convention; at least, outside of Wikipedia it is; there's no guidance on class names here that I know of. A name change is far from the most important thing in improving the table help suite. If you want expert opinion on this, I know who to ping (and I have no idea what they would say), but I am going to drop it for now, unless you wish to dive deeper. Cheers, Mathglot (talk) 18:53, 8 February 2025 (UTC)
- @Mathglot: I removed the "borderless" class. I am no longer using it anywhere. Grid class doesn't have a border, and I am using it. And it does not have any padding. It works well with certain editors' contributions.
- I don't want to keep any classes that aren't being used. --Timeshifter (talk) 19:07, 8 February 2025 (UTC)
- Okay, if you feel that strongly, we can leave it, but be aware that some day, consensus might be, say, to have the snippets of table syntax bordered, and with a class name like 'borderless', that's just a recipe for confusion. It's not a requirement, just a general convention; at least, outside of Wikipedia it is; there's no guidance on class names here that I know of. A name change is far from the most important thing in improving the table help suite. If you want expert opinion on this, I know who to ping (and I have no idea what they would say), but I am going to drop it for now, unless you wish to dive deeper. Cheers, Mathglot (talk) 18:53, 8 February 2025 (UTC)
Can we move this to Template:Table help/styles.css?
edit@Mathglot: Can we move this to Template:Table help/styles.css?
Per discussion here: Wikipedia:Village pump (technical)/Archive 218#TemplateStyles not just for templates anymore. --Timeshifter (talk) 01:36, 19 February 2025 (UTC)
 | This Help talk page uses TemplateStyles: |
- Would've responded there, but seems they archived it already. The only part I have looked at so far, was your last statement; my response to it is not ready yet, but
{{Uses TemplateStyles/sandbox2|Help:Table/styles.css}}produces what you see at the right. - Also, it's not intended for release, but as a working mockup to support a forthcoming edit request at the Module talk page. Mathglot (talk) 02:53, 19 February 2025 (UTC)
Link to styles.css on all table help pages
editHow about adding this inside to the right side of the table help template:
Or it could be added below and to the right.
Either placement could be done via the table help template. So it wouldn't have to be added to each individual page. Plus this allows improvement over time without having to change it on every table help page. It would be changed on the template page. --Timeshifter (talk) 01:53, 19 February 2025 (UTC)
- See previous section. You could do it now if you really wanted to, using sandbox2, but that's jumping the gun and probably better to wait for the module update. Mathglot (talk) 02:58, 19 February 2025 (UTC)
- @Mathglot: I went ahead and added sandbox2 to the table help template. To see how it showed up on the table help pages. Looks good to me placed just below the table help template, and to the right. --Timeshifter (talk) 03:26, 19 February 2025 (UTC)