Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG <text> as Data URi to display messages #407

Open
ffoodd opened this issue Jan 11, 2021 · 0 comments
Open

SVG <text> as Data URi to display messages #407

ffoodd opened this issue Jan 11, 2021 · 0 comments

Comments

@ffoodd
Copy link
Owner

ffoodd commented Jan 11, 2021

While thinking out loud for #404, I imagined something. I'm unsure we can do something like this, but:

  • we can override select background (however it loses its appearance),
  • we can use SVG inlined as data URI as background-image,
  • we can use SVG tag.

So here's the idea implemented in CodePen. This has major drawbacks, though:

  • it'll break select look & feel,
  • it might break layout as well: we need to check what happens in several types of form layouts (inlined, vertically stacked, etc.) and try to contain the overflow in some way (maybe properties like contain or isolation might help),
  • it requires to use string lentgh.

If we give this a shot, it'll need a brand new, dedicated mixin for such cases. And might be extended to other replaced and void elements (needs to deep dive onto testing).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: To do
Development

No branches or pull requests

1 participant