#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 http://php.microformats.io/?id=20220303021535590
#
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:
#
aaronpk this pattern: https://indieweb.org/authorship#Author_information_in_a_header_or_footer
#
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
#
aaronpk there are some options here https://www.w3.org/WAI/tutorials/images/decorative/
#
[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 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
#
[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 https://caniuse.com/?search=subgrid
#
aaronpk hehe
#
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