Clarify whitespace when replacing img with alt/src

[gRegorLove]

Re: https://microformats.org/wiki/microformats2-parsing#parsing_an_e-_property (and other places this same text appears)

replacing any nested elements with their alt attribute, if present; otherwise their src attribute, if present, adding a space at the beginning and end, resolving the URL if it’s relative;

Some discussion in microformats chat and microformats/mf2py#202 about whether adding whitespace should apply to only the src or the alt as well. I had to re-read it a couple times, so I think we could phrase this more clearly.

A strict reading does seem to indicate whitespace wrapping applies only to the src. As @JKingweb said:

the src-only interpretation is consistent with the substitution browsers do, so I think it should probably be what mf2 does as well

@tantek also said:

That is correct and the intent and a good reason to explicitly include space(s) or punctuation inside alt text if you need it adjacent to the surrounding content.

I wonder if there could be a middle ground so consumers get more useful values when alt text is replaced and there's no published whitespace between elements.

I'm leaning towards:

• if there is non-empty alt value, add a whitespace at the beginning and end of the value and replace the image with the result
• otherwise, if there is an empty alt value, remove the image
• otherwise, take the src value, resolve it if it is a relative URL, add a whitespace at the beginning and end, then replace the image with the result

Example results:

non-empty alt:

<div class="h-entry">
  <div class="e-content">
    <img src="/photo.jpg" alt="selfie">At some tourist spot
  </div>
</div>

"content": [
  {
    "html": "<img src=\"/photo.jpg\" alt=\"selfie\">At some tourist spot",
    "value": "selfie At some tourist spot"
  }
]

empty alt:

<div class="h-entry">
  <div class="e-content">
    <img src="/photo.jpg" alt="">At another tourist spot
  </div>
</div>

"content": [
  {
    "html": "<img src=\"/photo.jpg\" alt=\"\">At another tourist spot",
    "value": "At another tourist spot"
  }
]

no alt:

<div class="h-entry">
  <div class="e-content">
    <img src="/photo.jpg">At yet another tourist spot
  </div>
</div>

"content": [
  {
    "html": "<img src=\"https://example.com/photo.jpg\">At yet another tourist spot",
    "value": "https://example.com/photo.jpg At yet another tourist spot"
  }
]

[gRegorLove]

Current parser support for this suggestion:

php-mf2

• non-empty alt: ✔️
• empty alt: ✔️
• no alt: ✔️

python

• non-empty alt: ❌ when an intervening element like <p>✔️ otherwise
• empty alt: ✔️
• no alt: ❌ when an intervening element like <p>✔️ otherwise

go

• non-empty alt: ❌
• empty alt: ✔️
• no alt: ✔️

node
could not test with https://node.microformats.io currently, internal server error

ruby
could not test with https://ruby.microformats.io currently, Heroku application error

javascript

• non-empty alt: ✔️
• empty alt: ✔️
• no alt: ✔️

rust

• non-empty alt: ❌ uses src instead, including whitespace
• empty alt: ❌ uses src instead, including whitespace
• no alt: ✔️

haskell

• non-empty alt: ❌ removes image, does not use alt or src
• empty alt: ❌ removes image, does not use alt or src
• no alt: ❌ removes image, does not use src

[JKingweb]

Live JavaScript parser is available here(note that it implements two forms of text transformation via a checkbox):
https://microformats.github.io/microformats-parser/
Also Rust:
https://rust.microformats.io/
And Haskell:
https://mf2.packett.cool/

[gRegorLove]

Thanks, added those in the list

[snarfed]

mf2py behavior with intervening <p> is probably just a bug, microformats/mf2py#202 . (Also it only loses the leading whitespace; trailing is still there.)