Re: [csswg-drafts] [css-ui] Yes, it would make sense to have selectable pseudo elements (#2894)

I have even much more sophisticated example, rather than just "selectable quotes". Long story short: I really wanted pseudo elements to be selectable. It's shame they are not :(

_For those who are interested in my particular use-case, long story long_: I have a blog, and posts are stored as simple markdown files, so they are easily viewable through github. I want my blog to be shown in a similar way as it's shown on github, but yet, - with some slight changes, so I:
1. I used [mdx](https://mdxjs.com), markdown->html transpiler, to generate appropriate html
2. I used [github styles](https://github.com/sindresorhus/github-markdown-css) to make it look the same way
3. I applied some custom styles I want

I wanted to add some subtitle for images with my styles, so I've started with this markdown:

```
![My photo hint text for a photo](https://jerrygreen.me/jerrygreen-512.png)
```

Seems like enough markup. I wanted the result to be something like this:

<p align="center"><img width="292" alt="Screenshot 2020-08-15 at 00 00 00" src="https://user-images.githubusercontent.com/13215662/90283805-46a08700-de8a-11ea-850f-87ab2f995cbc.png"></p>

Since I already know that generated html is that:

```
<p><img src="https://jerrygreen.me/jerrygreen-512.png" alt="My photo hint text for a photo"></p>
```

"I can do this pretty easily", - I thought. The border is very beginner-level thing, so I omit this part. Though the subtitle is unexpectedly very tricky. I wanted to use some html like this:

```css
p > img::after { /* spoiler: won't work */
  display: block;
  content: attr(alt);
  text-align: center;
}
```

Turns out [we live not in future enough](https://stackoverflow.com/a/7396482/3720305) (check out comments for the linked answer):

> [CSS] specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). **This will be defined in more detail in a future specification**

But eons passed, and this still isn't defined: it's still not possible to do pseudo elements on `img` tags. Then I thought: "Ok then... I'll just use very simple html. Markdown supports simple html, right?", so I came up with this html and css:

```html
<p title="My photo hint text for a photo" align="center">
  <img src="https://jerrygreen.me/jerrygreen-512.png" alt="My photo" />
</p>

<style>
  p[title]::after { /* now I apply pseudo element on `p`, not an `img`, so it works now */
    display: block;
    content: attr(title); /* and I use `title` attribute instead of `alt`, it's more canonical for `p` tag */
    text-align: center;
  }
</style>
```

"And it gives me exactly what I wanted", - I thought:

<p align="center"><img width="292" alt="Screenshot 2020-08-15 at 00 00 00" src="https://user-images.githubusercontent.com/13215662/90283805-46a08700-de8a-11ea-850f-87ab2f995cbc.png"></p>

But it turns out I can't select this text, shame!

Now it turns out that if I really want to style it properly, and to not lose such fundamental feature as _text selection_, then I need to intervene MDX transpiler workflow, so it will generate actual html for those hints, which are present in real DOM. Shame...

P.S. Didn't know where I can complain about all that. I think this w3c repository is an ideal place. Thanks for anyone who listened.

-- 
GitHub Notification of comment by JerryGreen
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2894#issuecomment-674257298 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 14 August 2020 20:22:02 UTC