0

Is it possible to use custom tags in html such as <g></g> to group text? I then want to apply styling to these custom tags via CSS that accomplish the same thing as in the fiddle with the rounded rectangles and blue text.

The reason all of this is needed is because the first way I have it set up in the fiddle uses generated content - which isn't part of the DOM so the blue text can't be highlighted/selected so that you can copy/paste it.

The solution I came up with was to make the generated content not generated, but merely distinguish the tags from the actual content by a delimiter, in this case, the | character.

So I need a way to produce the same output as the original, but with the new syntax, so that way the text can be copyable.

http://jsfiddle.net/xa3apsdc/20/

Gallaxhar
  • 976
  • 1
  • 15
  • 28

1 Answers1

2

Do <span class="g"></span> instead and problem solved.

On custom tags older browsers cant support it, but you can handle them as other not supported (ex. canvas) tags, so if you really need it, you can do it: http://jsfiddle.net/xa3apsdc/22/

You will encouter some problems anyway: custom tags not working in ie8

Key is to set display rule to element: display:block; or display:inline-block and you are set to go.

Community
  • 1
  • 1
Szymon Toda
  • 4,454
  • 11
  • 43
  • 62
  • thanks, what about distinguishing the tags from the content by the delimiter character |, is there a way to do that within a or without requiring generated content? – Gallaxhar Apr 09 '15 at 07:46
  • What do you mean? Like that: http://jsfiddle.net/xa3apsdc/24/ ? – Szymon Toda Apr 09 '15 at 07:52
  • using two tags is also what I just realized/did, I think that's the only way unfortunately. Regex too complex. http://jsfiddle.net/xa3apsdc/25/ – Gallaxhar Apr 09 '15 at 07:54
  • I don't really know what mean, if you want to access it maybe do it with JS http://jsfiddle.net/xa3apsdc/27/ that's it for me. More help more info please :) – Szymon Toda Apr 09 '15 at 08:12
  • @Gallaxhar I dont feel like answered yoru question. You want | to be represented as character but accessed with CSS, right? – Szymon Toda Apr 09 '15 at 08:46
  • you answered it. the regex approach is not good. – Gallaxhar Apr 09 '15 at 11:33
  • @Gallaxhar which regex approach? Regex not used in any of examples – Szymon Toda Apr 09 '15 at 13:48