hey @Nirzar - any suggestions with how to style the caption?

Side note: Any reason why we repeat the title of the page in the infobox?

The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.

Side note: Any reason why we repeat the title in the infobox?

No idea why. sometime it links to another article...

@Vachovec1

properly formatted (bigger font, centering)

I would want to know what you mean by "proper"?

In T168861#3384733, @Nirzar wrote:

Side note: Any reason why we repeat the title in the infobox?

No idea why. sometime it links to another article...

@Vachovec1

properly formatted (bigger font, centering)

I would want to know what you mean by "proper"?

Please read https://en.wikipedia.org/wiki/Template:Infobox#Title. At cs-wiki, the situation/usage is the same. Notice that the first option ("Text in caption over infobox") is actually the recommended option.

Regardless of user choice, both options should be equal (in mobile view). So the "caption" header should have the same form as the "above" header.

https://en.wikipedia.org/wiki/Template:Infobox#Title says its for accessibility reasons so whatever we do should ensure the infobox remains accessible.

Regardless of user choice, both options should be equal (in mobile view)

This is not necessarily true. Mobile users are limited in space and the whole purpose of the mobile site is to make our content user friendly. Yes, consistency is important, but in mobile the caption is displayed very close to the title of the page when you compare to desktop.

In T168861#3387349, @Jdlrobson wrote:

Yes, consistency is important, but in mobile the caption is displayed very close to the title of the page when you compare to desktop.

What are you talking about? Are we still discussing the caption of the infobox? Do you mean the absolute distance?

I am trying to say that there are two options, how the infobox header can be created, as clearly shown at https://en.wikipedia.org/wiki/Template:Infobox#Title. Both are used (obviously not simultaneously, but some exception could exist). So the mobile screen should expect both. Sure, the form does not have to be exactly the same, but at least the "caption" header should look like real heading.

@Jdlrobson @Vachovec1 This task's topic is that infobox captions look broken on mobile. They should look better or at least similar to infobox headings (as they have got the same purpose). For the question whether infobox title (in heading or caption) should be hidden on mobile I suggest to open a new task.

I think what we are trying to say is the redundancy of the label and the article title.

but at least the "caption" header should look like real heading.

I'm guessing The words "proper" and "real" is suggesting we should bump up the font size. I am okay doing the center alignment here but i think we need a standard fontsize which should be body font size so as to not take too much space and attention on small screens. as I said, in most cases this caption is redundant to the article title. I cycled through 60 articles on random just now and couldn't find a single one where the article title wasn't exactly the same as the infobox caption title. correct me if I'm wrong or if you have any data around this.

@Dvorapa

For the question whether infobox title (in heading or caption) should be hidden on mobile I suggest to open a new task.

Do you think that's a possibility? Would love to know your thoughts on that.

In T168861#3387788, @Nirzar wrote:

Do you think that's a possibility? Would love to know your thoughts on that.

If previous speakers talked about its redundancy, what are the options? Detect if there is no difference from page title and...

• hide them. This could be applied to image caption in infoboxes too.
• style them (to be smaller, italic).

In T168861#3387788, @Nirzar wrote:

@Dvorapa

For the question whether infobox title (in heading or caption) should be hidden on mobile I suggest to open a new task.

Do you think that's a possibility? Would love to know your thoughts on that.

That's probably not a good idea. The infobox heading can contain more information than just the copy of the article title. Look for example at the page https://en.wikipedia.org/wiki/Elephant. On the mobile view https://en.m.wikipedia.org/wiki/Elephant.

@Vachovec1 Read my last comment

The lack of padding certainly makes the captions stand out too:

I agree that where the caption is a an actual table <caption> element with text equal to the page title, it is probably not necessary to show it at all, although it won't be possible to compare the text value with a CSS only solution.

On cswiki this is just an alternative to standard infobox heading. They both should be highlighted enough and almost equally both on mobile and desktop. Sometimes it can held the same text as page title, but this is not a rule.

At least the infobox caption should be styled the same way as infobox header is. Whether to hide it or style it differently is for some follow-up discussion

btw another complaint on tech village pump on cswiki today: https://cs.wikipedia.org/wiki/Wikipedie:Pod_l%C3%ADpou_(technika)#Nadpisy_infobox%C5%AF_v_mobiln%C3%AD_verzi

Repinging @alexhollender

It seems like there are two open questions here:

1. can we fix the styling of infobox captions on mobile, such that read more like titles?
2. should include infobox captions and titles if they are an exact match to the page title?

I wonder if it makes sense to open a separate task for question 2? I'm assuming it will be a longer conversation.

Regarding the styling, perhaps centering the text and adding 10px of spacing above and on the sides (and below in the cases where there isn't also an infobox title) is sufficient? Here are some examples of how that would look:

	current	updated
caption only
caption + title
caption + title
caption + title long

There also seems to be a case where a caption is rendering with centered text and padding already, e.g. https://en.m.wikipedia.org/wiki/Cam_Weaver. which I do not understand.

There also seems to be a case where a caption is rendering with centered text and padding already, e.g. https://en.m.wikipedia.org/wiki/Cam_Weaver. which I do not understand.

Some templates override the caption styles, so we just need to provide some sensible defaults.

can we fix the styling of infobox captions on mobile, such that read more like titles?

We can style it however we want

should include infobox captions and titles if they are an exact match to the page title?

Can't do much about this - currently is an editorial decision.

Am moving to developer backlog provided a/c match what we want to do!

Change 494420 had a related patch set uploaded (by Jdlrobson; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Add padding to infobox caption

https://gerrit.wikimedia.org/r/494420

There also seems to be a case where a caption is rendering with centered text and padding already, e.g. https://en.m.wikipedia.org/wiki/Cam_Weaver. which I do not understand.

In that example, the caption is being given the following inline styles

element.style {
    line-height: 1.5em;
    text-align: center;
}

So although it doesn't have the top padding, the extra line height is giving it more space, and the text is aligned via the inline style.

also w. regards to @Volker_E duplicate patch T217632, the example infobox

Change 494420 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Add padding and center text in infobox caption

https://gerrit.wikimedia.org/r/494420

Not the biggest fan of centering text in general, but in this case with infoboxes where centered images come directly underneath, it seems acceptable to me to have them centered.

In T168861#4992309, @alexhollender wrote:

It seems like there are two open questions here:

1. can we fix the styling of infobox captions on mobile, such that read more like titles?

Centering and padding seems sufficient, any other requests?

2. should include infobox captions and titles if they are an exact match to the page title?

Let's not over-engineer here (any solution to this sounds like a bigger engineering task). IMO the captions in the examples given are helping “normal-sighted” people orienting even though it's minimal re-appearance of information, at the same time they are invaluable for assistive technology users to keep orientation.

The apps already override the caption to be centered. The change adds padding so it would go from this:

to this:

and with longer text (& padding visualized):

cc @cmadeo and @schoenbaechler to approve this extra padding. We can override the padding if it's not OK.

@JoeWalsh thanks for showing the before and after. Is there anyway that we could make the padding above and below the caption to be equal?

Hey @JoeWalsh, thanks for pinging.

I’m appreciating this extra padding, it adds more structure to the infobox. The title is perceived closer to the content below (image) which makes sense to me. As long as the infobox title sits on the 4px baseline grid on Android (e.g. a margin of 16px below the accordion title). @cmadeo, how about balancing it out a bit with slightly more margin-top for the infobox title so it sits a bit lower than before? E.g. margin-top: 16px; margin-bottom: 8px;.

@schoenbaechler that works for me, also seeing the current padding in a bit of a new light with your thoughts around structure. So happy to sign off on this as is (new padding) or trying out Robin's suggestion.

@cmadeo @schoenbaechler

without 8px below:

with 8px below:

[edit]: I missed the 16px comment - here's padding: 16px 16px 8px 16px

Thanks @JoeWalsh, I vote for F28388270 (aka “without 8px below).

CC: @cmadeo

@schoenbaechler without 8px below is 10px 10px 0px 10px - should that be updated to 16px to match the 4px grid or is 10px ok?

Hi @JoeWalsh, thanks. It’s positioned pretty ok, see screenshot below:

Also, when looking at it a bit closer, it seems like that a 4px baseline is only party applied, so totally fine to not be that strict here.