Page MenuHomePhabricator

Highlight statement(s) when using "#P" in URL
Closed, ResolvedPublic

Description

It's possible to link to statements using a specific property by adding "#P" followed by the property number to the URL (for example: https://www.wikidata.org/wiki/Q2013#P1833).

But when the statement is near the bottom of the page or the page shifts due to scripts (or other reasons) it might be unclear what property is meant. Highlighting the statement would be a good way to indicate this.

Event Timeline

thiemowmde triaged this task as Lowest priority.Oct 23 2017, 6:36 AM
thiemowmde moved this task from incoming to needs discussion or investigation on the Wikidata board.

This needs a suggestion by WMDE-Design and a decision by the product manager: how would such a highlighting look like?

The technical implementation is super trivial: just utilize the :target CSS feature.

I agree that this would be a useful feature. It is also used on other sites, so having it won't cause confusion.

My largest concern is that we don't have a styleguide or anything like that now. Thus, it is hard to determine a color (or other means of highlighting) that will not clash with other possible functionality and by that introduce design debt (like tech. debt, but visible in the UI)

That's a nice idea and easy to implement. I would do it, but as @thiemowmde and @Jan_Dittrich note, it is necessary to have a concern about it. Could we agree a basic style and then request comments about it?

target-wikidata-property.png (768×1 px, 85 KB)

Something like that?

:target .wikibase-statementgroupview-property-label {
  background-color: aliceblue;
}

:target .wikibase-statementgroupview-property-label a {
  font-weight: bold;
}

If we do this it should be very subtle; I looked at some other pages and did not see any highlighting in Wikipedia articles or e.g. at this handbook so it might be perceived as unusual or irritating. But we could just enable the browser defaults as on this page (I think this is the browser style; on Firefox it is black dotted outline, on chrome it is blue solid outline)

Firefox

image.png (78×103 px, 3 KB)

Chromium:

image.png (108×146 px, 8 KB)

An option similar to the one @Ivanhercaz suggests would be choosing the accent color #eaf3ff instead of the base color #eaecf0 for the background; this color is documented on M101.

founded-by.png (642×991 px, 29 KB)

This comment was removed by jeblad.

Thanks for following up on that @Ivanhercaz and giving input @abian.

I think going for highlights is the right direction. I would argue though changing the background color could have two disadvantages

  1. We use blue as a background color for things being in edit mode. Even though you chose a different one, this might be confusing.
  2. The difference between the grey and the light blue might not be accessible to everyone.

Therefor I propose to consider either Jan's suggestion to take advantage of browsers highlighting mechanism.
Or,
in case we want to have a highlight which remains, use a 2px blue border. We have blue as a highlight color in other places as well.

Find a screenshot of a mockup below.

Screenshot 2019-02-18 at 17.20.03.png (683×1 px, 74 KB)

An option similar to the one @Ivanhercaz suggests would be choosing the accent color #eaf3ff instead of the base color #eaecf0 for the background; this color is documented on M101.

Thank you for your recommendation, @abian!

Therefor I propose to consider either Jan's suggestion to take advantage of browsers highlighting mechanism.
Or,
in case we want to have a highlight which remains, use a 2px blue border. We have blue as a highlight color in other places as well.

Although the Jan's and Hanna's suggestion seems very attractive and useful. Abian, hat do you think about it?

Although the Jan's and Hanna's suggestion seems very attractive and useful. Abian, hat do you think about it?

Hanna's solution looks great to me! Anyway, my opinion shouldn't be that relevant. :-)

Looks good to me, "box-sizing:border-box;" might be needed in the CSS to keep the padding the same.

Does anyone want to give a patch a try?

Change 530339 had a related patch set uploaded (by Abián; owner: Abián):
[mediawiki/extensions/Wikibase@master] Highlight :target statements

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

Change 530339 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Highlight :target statements

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

In my opinion it would also be nice to make this work for individual statements, e. g. not only https://www.wikidata.org/wiki/Q1#P793 but also https://www.wikidata.org/wiki/Q1#Q1$e70e289c-471e-36b8-50ff-25612cf24e70. As far as I can tell, the above patch doesn’t implement that.

In my opinion it would also be nice to make this work for individual statements, e. g. not only https://www.wikidata.org/wiki/Q1#P793 but also https://www.wikidata.org/wiki/Q1#Q1$e70e289c-471e-36b8-50ff-25612cf24e70. As far as I can tell, the above patch doesn’t implement that.

I don't think it's good that humans use those volatile identifiers outside of Wikidata, but surely having the analogous outline won't do any harm and will help people who click the identifiers from the Query Service. I'll add it. Thanks! :-)

single-statement.png (222×948 px, 15 KB)

Change 533917 had a related patch set uploaded (by Abián; owner: Abián):
[mediawiki/extensions/Wikibase@master] Highlight :target individual statements

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

What’s volatile about them? We’ve preserved the capitalization of q1$21f31f42-4f4d-79b0-0380-92039776e884 for a long time, for example (notice how the entity ID is in lowercase).

What’s volatile about them? We’ve preserved the capitalization of q1$21f31f42-4f4d-79b0-0380-92039776e884 for a long time, for example (notice how the entity ID is in lowercase).

Maybe I'm exaggerating by calling them "volatile". I mean Q1#P1 has semantics, it's always the statement group using property P1 on Q1, no matter how many times P1 statements are removed, added, reordered or merged. But individual statement IDs aren't useful to see the property they're using (or value, references, qualifiers, rank, etc.) and they're lost when you need to sort the statements, or when a statement is removed and someone adds the removed data manually, or when Q1 is merged into Q2 (while the semantics of Q1#P1 are preserved and redirect to Q2#P1).

The highlighting of statement groups ("properties") is now available on Wikidata. The highlighting of individual statements still needs approval on Gerrit.

The highlighting of statement groups ("properties") is now available on Wikidata. The highlighting of individual statements still needs approval on Gerrit.

So should we create a separate Phabricator task for that, if this one is now done?

So should we create a separate Phabricator task for that, if this one is now done?

Done (T234079) so we don’t lose track of it.