Quick’n’dirty mockup for the punctuation and pill suggestions:

EDIT: Or closer to Wikidata’s Statement template:

The big advantage of a “pill-like” solution over the punctuation, in my opinion, is that it’s independent of language. For the punctuation, we have to change the English message texts, which will invalidate all the existing translations, and there might also not be an obvious equivalent in some languages. The pills are just <span>s around the HTML that we already inject into the messages, plus some CSS to style them. In fact, we can even leave the CSS to the user script.

The big advantage of a “pill-like” solution over the punctuation, in my opinion, is that it’s independent of language.

We can also change it easier, which is nice for design.

Change 357779 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/WikibaseQualityConstraints@master] Add semantic tags to values rendered into messages

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

I’ve uploaded a suggested patch (see gerritbot’s comment). It doesn’t include stylesheets, so you won’t see any change directly, but you can try adding different style sheets to it, e. g. P5557. I also deployed this to https://wikidata-constraints.wmflabs.org, so you don’t need a local installation to play with it.

Change 357779 merged by jenkins-bot:
[mediawiki/extensions/WikibaseQualityConstraints@master] Add semantic tags to values rendered into messages

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

@Jan_Dittrich did you get a chance to play with the CSS?

Currently, the following roles are defined:

• subject, the subject (item or property) of a statement
• predicate, the predicate (property) of a statement
• object, the object (value) of a statement
• constraint-property, the property that introduced a constraint
• qualifier-predicate, the predicate (property) of a qualifier
• constraint-parameter-property, the property for a constraint parameter
• constraint-parameter-value, the value for a constraint parameter
• constraint-type-item, the constraint type item

They each correspond to a CSS class wbqc-role-$role on a span surrounding the element. That span also has a class wbqc-role, so common styles (e. g. border radius, padding) can go there and the individual pill styles only need to define colors.

Sorry – that got quite stuck. Let's sync on this in person in the next days and get it going again.

Some example messages following a subject-predicate object pattern can be found on https://wikidata-constraints.wmflabs.org/index.php/Item:Q35#P20 (and my hacky border CSS is in P5557).

I created some inital designs

It is tricky to get the contrast right: enough to see it, but not too much to make reading hard. I can spec it more and try more, but I wonder: If the suggestions below could build upon the same code, we do two iterations:

1. I provide the designs (see above), dev builds the CSS
2. I adjust the CSS in colors and fine spacing and can evaluate the design directly in browser context, when done, spec is implemented.

I’m not sure if this is possible in pure CSS… this is how far I got:

But we’d need to somehow erase the left half of each “caret”, so that it doesn’t add spacing between the elements and also doesn’t cause the top and bottom borders to extend too far…

Is this online somewhere? Just I case I or some other dev might have an awesome idea :-) (Not a must, just in case it seems to be a good idea-exchange-thing)

You can see some example violations here (I’m not sure if you need to be logged in or not) and play with the CSS in dev tools.

@Jan_Dittrich what should it look like if there’s a line break in one of the labels?

@Jan_Dittrich what should it look like if there’s a line break in one of the labels?

Hmm, good point. I would suggest to have it end bluntly and keep it display:inline (or a behavior like that. )