Skip to content

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

Description

@ffoodd

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

Metadata

Metadata

Assignees

No one assigned

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions