#microformats 2022-03-03

2022-03-03 UTC
#
@kevinmarks
↩️ If they're going to Blainewash things then they should reinstate the open standards that they dropped, like feeds and xfn and microformats, as well as api access. Api 2 has rejected lots of interop projects. I'm not asking for xmpp.
(twitter.com/_/status/1499172077647155201)
Darius_Dunlap[d], ur5us_, ur5us and jzeneto joined the channel
#
jzeneto
Hi, I'd like to make a question. Perhaps it's stupid, but I didn't found how to make it:
#
jzeneto
Is it possible to relate an element/property to another element/property that is not nested in?
#
jzeneto
For instance, a u-photo that is not nested inside an h-card but instead is its sibling. How can I relate the u-photo to the h-card?
#
jzeneto
Please, if someone can help me, I would be very grateful
#
aaronpk
properties like u-photo can't really be siblings of objects like h-card, what exactly are you trying to do?
#
jzeneto
Thank you @aaronpk
#
jzeneto
I have a <article> that is a comment, inside another <article> which is a post
#
jzeneto
Inside the comment, are 2 divs. The first contains the author's photo. The second div contains a header (author's name and comment permalink) and a div which is the e-content
#
aaronpk
ah, i think i see what you're doing
#
aaronpk
can you post a sample of this HTML in a microformats parser tool like https://php.microformats.io and share the link?
#
jzeneto
Yes, give me a minute
[jgmac1106] joined the channel
#
jzeneto
Sorry, how can I get the link to the parsed content?
#
aaronpk
click "save html"
#
aaronpk
then copy the link in the address bar
#
jzeneto
(thank you)
#
aaronpk
(oof that "h-full" in there, what css framework is this?)
#
jzeneto
(I'm using Tailwind CSS and lazysizes)
#
jzeneto
(h-full is height: 100%)
#
aaronpk
ok yeah this is what i suspected, there isn't a good solution if you need to keep the HTML elements in this structure
#
jzeneto
In fact, I have this kind of issue in more than a way. Isn't there a way to use microformats that doesn't impose a certain structure?
#
aaronpk
most of the time microformats doesn't require any particular HTML element structure, except that properties of a microformats object generally have to be contained within an HTML element
#
aaronpk
the one suggestion i can offer here, specifically because this is for authorship, is a pattern where the microformats within each comment are just the bare minimum url and refer to HTML elsewhere. it makes more sense if you look at an example:
#
jzeneto
I see. That is good for post authorship, but since the comments are created on my site (via Staticman), it doesn't seem to make sense to point somewhere else
#
aaronpk
you can point to another page on your site, or even to another object on the same page
#
jzeneto
But the comment author is only located in his own comment
#
jzeneto
I could create an invisible link to the u-photo, inside the comment "p-author h-card"
#
aaronpk
that would work and would probably be simpler
#
jzeneto
But I don't like the idea of using invisible links. They hurt accessibility AFAIK
#
aaronpk
it can be an img hidden with css if you like
#
jzeneto
css doesn't change the accessibility tree, which is what screen readers read, for example
#
[tantek]2
agreed that it is best to avoid invisible links
#
[tantek]2
ahhh this is the problem of grid without subgrid!
#
[tantek]2
the way CSS grid works (without subgrid) is it forces a certain markup structure that doesn't really match the semantics of the content, that's the root of the problem.
#
jzeneto
@aaronpk it's a good idea, although I still am uncorfortable with duplicating the <img> (the visible one and the invisible-microformats one)
#
[tantek]2
subgrid does a decent job of addressing this
#
aaronpk
has no idea what subgrid is
#
[tantek]2
I agree with the discomfort of duplicating the <img>
#
jzeneto
(sorry for my bad English, it's not my primary language)
#
[tantek]2
no worries at all jzeneto, and I would not have guessed. welcome and hopefully we can be helpful 🙂
#
aaronpk
aha this might be why i haven't heard about it "Warning: This feature is shipped in Firefox 71, which is currently the only browser to implement subgrid."
#
[tantek]2
aaronpk, you might have to install a (more CSS) modern browser 😉
#
jzeneto
It seems subgrid isn't well supported yet
#
jzeneto
(thank you, tantek!)
#
jzeneto
When I created my site, a year ago, I've read about subgrid a little, but didn't dig much, because of current lack of support (which seems, a year later, to not having changed much)
#
jzeneto
Well, thank you aaronpk and tantek! I didn't even expect to be replied :D
#
jzeneto
For now I think I'll just ignore the u-photo at all
Seirdy and Fe joined the channel
#
[schmarty]
not related to microformats directly, but mentioned above. CSS can affect the accessibility tree in a page. when an element is set to `display: none`, it is removed from the accessibility tree.
#
[schmarty]
another way to remove an element from the accessibility tree is to add the attribute `hidden`
jamietanna1 joined the channel
#
[tantek]2
jzeneto, that seems like a reasonable approach for now.
strugee joined the channel
#
[KevinMarks]
Another way could be to add the p-author h-card url and name to the image markup and not the text part.
strugee, [Francesco_Impr], [tw2113_Slack_], [tantek], sayanarijit[d], Eddy04[d], Silicon[d], Saphire, barnaby, antrdnv[d], angelo, ur5us, kimberlyhirsh[d], [chrisaldrich], marksuth[d] and P1000[d] joined the channel