Tech Query: Pecularities of Non-Copying Copy!!

[@TiddlyTweeter]

I just hit a weird issue (to me). I assume its something to do with the DOM-inique thing?

I generate Tiddlers that include CSS generated counters like this ...

BUT when I try to copy-highlight it I get this ...

The copy-highlighter skips the CSS generated number content. And when I paste it the numbers are missing.

I looked at the generated HTML and there also the CSS generated numbers are missing. B*mmer.

I guess its not a TW issue so much as a broader issue with DOM-inique?

BUT its a PITA because I'd dearly like to use CSS to generate lots of indices to help construct tiddler structures like the above.

MY QUESTION for the truly savvy: Is there ANY way I can get to copy the final surface render that includes the CSS generated numbers?

In hope
Josiah

[coda coder]

Josiah - Do you have something online I could look at?

[@TiddlyTweeter]

No but I'll do it now.

[@TiddlyTweeter]

Ciao coda coder ...

https://onepager.tv/tw_reggie.html#Perry%20Mason%20s1e1-8%20EXAMPLE%20TO%20TRY%20COPY

It may take a while to load as this is normally my local file and its large and complex.

You should land on an example tiddler that when you try copy by highlight it doesn't work for the CSS generated numbers.

Jx

On Monday, 19 February 2018 17:12:50 UTC+1, coda coder wrote:

[@TiddlyTweeter]

FOOTNOTE ... if you opened the Tiddler in edit mode you may get a bit confused  in wondering HOW does the rendered version relate to the source tiddler? :-). Its because I am using BJ's Flexity plugin. The transformations are triggered by the Content Type and performed by  https://onepager.tv/tw_reggie.html#rx-mason-tids-jason-RT%201. But all that is beside the point in that at the surface end the problem is the same.

J

[coda coder]

On Monday, February 19, 2018 at 10:50:08 AM UTC-6, @TiddlyTweeter wrote:

FOOTNOTE ... if you opened the Tiddler in edit mode you may get a bit confused  in wondering HOW does the rendered version relate to the source tiddler? :-). Its because I am using BJ's Flexity plugin. The transformations are triggered by the Content Type and performed by  https://onepager.tv/tw_reggie.html#rx-mason-tids-jason-RT%201. But all that is beside the point in that at the surface end the problem is the same.

Yes, I figured that out eventually.

Sorry, I don't have a solution. I was hoping that the dev tools might allow some way to capture the rendered output, but I wasn't able tto find it or even figure out how.

Were I so inclined, I would file a bug with moz/chrome - "Right-click SELECT ALL does not work with all rendered output" or similar.  But I'm not.  :/

The issue is pretty much as you'd expected -- CSS before/after selectors/rules seem to live in a universe all their own.

Hmm... I know of a few people that might consider "uncopy-able text" a feature. ;)

[coda coder]

On Monday, February 19, 2018 at 11:18:24 AM UTC-6, coda coder wrote:

Hmm... I know of a few people that might consider "uncopy-able text" a feature. ;)

Ctrl-F (Find) can't see it either. (In Firefox, at least).

Hit Ctrl-F, type #0001, nada.

Hmm.

[@TiddlyTweeter]

As a naive user I find it bizarre that something I can clearly see on screen as simple text I can't copy as simple text. What happened to it! :-)

[coda coder]

I totally agree.  On the spectrum of feature<->failure I'd err toward the latter.  In fact, as a result of this intriguing exercise, I'm filing before/after under a similar heading as "goto", "eval" and "important!"

So let me say this, Josiah: you need a solution that does not use CSS before/after tricks.

[whatever]

Hey!
While trying to find a solution, I found that this is not a TW5 issue, it's apparently a CSS/DOM issue, because I couldn't copy generated numbers on other sites either.
w

[BurningTreeC]

Hi,

I cannot reproduce this when I type your entries in a JSON Tiddler
I can copy and find it normally

You said you have those numbers auto-generated?

maybe there's simply a .toString() missing somewhere?

just an idea

[@TiddlyTweeter]

Right. Its not a TW5 issue. Its a much bigger issue.

I was at first completely confused by it. WHY on earth is something you can see on screen can't be highlight and copied? It seems mad to me.

Obviously at some level it MUST be accessible since its in the final page render.

What surprises me most, I think, is apparent wide non-knowing of this phenomenon.

J.

[BurningTreeC]

Can you give me a hint how you generate those numbers?

[@TiddlyTweeter]

Ciao BTC

The issue is NOT typing. Its copying CSS generated numbers. Can you copy some records with numbers at https://onepager.tv/tw_reggie.html#Perry%20Mason%20s1e1-8%20EXAMPLE%20TO%20TRY%20COPY (which are CSS generated) and be able to paste them successfully somewhere? (sorry, it takes time to load its a heavy file).

J.

[whatever]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
https://css-tricks.com/almanac/properties/c/counter-increment/
Or TT's link in the fourth post.

w

[@TiddlyTweeter]

The numbers are generated using standard CSS "Counters". The Tiddler render is produced from a series of regular expressions that creates the stylesheet at its end here: https://onepager.tv/tw_reggie.html#rx-mason-tids-jason-RT%201

[BurningTreeC]

Thanks! I understand now: because they are css generated they don't exist in the DOM

then I think it's just the wrong way to generate those numbers, because that's how css works - it doesn't generate DOM elements as far as I know

[@TiddlyTweeter]

BurningTreeC wrote:

Thanks! I understand now: because they are css generated they don't exist in the DOM

I suspected it might be a DOM-inique issue. Though obviously in this case DOM-inique is hands off.

The WEIRDNESS of the end-result remains for me. That a normal end-user seeing something on-screen they can't simply copy and paste it. That is ridiculous!

My original question was about whether there are ways to copy (surface render) that could include the CSS generated content.

Given that the characters exist on-screen--in my face. It seems bizarre you can't simply copy and paste them.

Surely there must be a way to do that?

J.

[whatever]

A JS solution seems to be the only answer, apparently. Here's another link:
https://stackoverflow.com/questions/532073/how-can-i-read-the-applied-css-counter-value

w

[@TiddlyTweeter]

Ciao w

There must be a way to do it!

Its right now likely very obscure because I don't think most users are aware of this issue. I wasn't until I started generating CSS numbers. CSS numbers are incredibly easy and useful for ordering in TW. Being able to copy them in context would enable some new strategies in TW Tiddler creation that are cumbersome other ways.

I hope I will bump into someone who really understands the issue with skill to solve it. All I need is surface saving of what is already staring at me :-).

Best wishes
Josiah

[coda coder]

On Monday, February 19, 2018 at 12:26:08 PM UTC-6, @TiddlyTweeter wrote:

BurningTreeC wrote:

Thanks! I understand now: because they are css generated they don't exist in the DOM

I suspected it might be a DOM-inique issue. Though obviously in this case DOM-inique is hands off.

I have no idea what that is.  The problem is as I've (we've) already described.  It's CSS, not HTML, it's not in the DOM and hence "it's not there".

 

The WEIRDNESS of the end-result remains for me. That a normal end-user seeing something on-screen they can't simply copy and paste it. That is ridiculous!

And terrible.  I'm now filing after/before under DO NOT USE.  I suspect these folks may have something to say on the matter, too:

https://groups.google.com/forum/#!forum/free-aria

My original question was about whether there are ways to copy (surface render) that could include the CSS generated content.

Given that the characters exist on-screen--in my face. It seems bizarre you can't simply copy and paste them.

And that's where I think you have a case for filing a category-1 bug. 

1 - If assistive tech can't find it, ARIA is failing.  In the words of Donald Trump, that's sad.

2 - If Ctrl-F can't find it, search is broken.

3 - If it can't be read back from the screen, you can't write a test.  If you can't test, you can't validate your code. End of discussion.  Hence, DO NOT USE.

 

Surely there must be a way to do that?

Nope.  There is no JS solution I know of, anywhere.  Any thoughts I have are immediately stymied by "it's not in the DOM". I can wildly imagine someone coding up a pseudo-dom AST that then renders to a real DOM element but really... it's not worth the effort.

 

[@TiddlyTweeter]

coda coder wrote:

1 - If assistive tech can't find it, ARIA is failing.

 Right! Its bad enough I don't think enough about disabled users. But simply making content that is there--but isn't--other than only visually and in no other way accessible is a seriously black mark. What you would get aurally is texts with holes in it.

Josiah

[whatever]

Well, considering the source is a JSON-y array, cobbling up something in JS should be pretty simple.
w

[Jeremy Ruston]

This is a common issue, I’m afraid. Here’s one of many StackOverflow answers about it:

https://stackoverflow.com/questions/24385171/is-it-possible-to-select-css-generated-content

Best wishes

Jeremy.

-- 
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ce5a26d1-3c55-4d23-b3c4-6369f7046ec3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[@TiddlyTweeter]

Ciao Jeremy & all ...

This has been an interesting, useful discussion. A footnote ...

Jeremy: This is a common issue, I’m afraid. Here’s one of many StackOverflow answers about it ...

Thanks for that. I read around the issue and then discovered that there are proposals in CSS to change the behaviour but they somewhat in conflict with existing DOM approach ... https://drafts.csswg.org/css-ui-4/#content-selection. I haven't tested if any browsers adopted the proposal--the point is that the default setting is "uncopyable" but the proposal is to permit copying using a "user-select" property with several different available settings.

I also discovered a trick to get round the problem which is to PRINT to FILE (in Windows) the Tiddler with the "un copyable" content using customised settings that eliminate margins. For my specific purpose this might work out okay. My interest in the CSS counters is simply for aiding conversion of very large documents into a TW import format. CSS counters are very flexible and easy to setup and can help you generate indices and populate fields you need filling out in a JSON structure so I'll continue to experiment to see if its viable for what I need.

Best wishes
Josiah

[coda coder]

On Tuesday, February 20, 2018 at 2:52:23 AM UTC-6, @TiddlyTweeter wrote:

 I read around the issue and then discovered that there are proposals in CSS to change the behaviour but they somewhat in conflict with existing DOM approach ... https://drafts.csswg.org/css-ui-4/#content-selection. I haven't tested if any browsers adopted the proposal--the point is that the default setting is "uncopyable" but the proposal is to permit copying using a "user-select" property with several different available settings.

I'm not sure if I've understood correctly, but, that draft seems to suggest that in Firefox you may be able to set user-select, either in the parent element or in the before/after pseudo element itself:

Note: As of the time of writing, experimental implementations do not all behave like this. Firefox does. 

So, in essence, something like:

element::before {
 user-select: text;
 ...
}

You could also try moz-user-select but try the above first.

Again, I'm not sure I've read enough of the draft to gain complete understanding. The fact it's a draft is a red flag -- indeed, the entire section is denoted "at risk".

Here's the MDN article, for reference (no mention of pseudo elements)  https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

[Mark S.]

The counters are generated inside pseudo classes, so they can't be selected. I saw a hint that suggested you could use chrome preview to make the text selectable, but it loses all line formatting.

I'm not familiar with how your regex tools work. Do they re-iterate until there are no more changes to be made?

If so, then I'm thinking that rules like this at the very end:

/(.*?)#startmarker#/$1 0001#endmarker#/
/(.*?)#startmarker#/$1 0002#endmarker#/
.... etc.

Might brute force what you want.

(I haven't checked my syntax closely, obviously. Notice that the searches aren't global)

-- Mark

On Monday, February 19, 2018 at 6:26:31 AM UTC-8, @TiddlyTweeter wrote:

I just hit a weird issue (to me). I assume its something to do with the DOM-inique thing?

I generate Tiddlers that include CSS generated counters like this ...

BUT when I try to copy-highlight it I get this ...

The copy-highlighter skips the CSS generated number content. And when I paste it the numbers are missing.

I looked at the generated HTML and there also the CSS generated numbers are missing. B*mmer.

I guess its not a TW issue so much as a broader issue with DOM-inique?

BUT its a PITA because I'd dearly like to use CSS to generate lots of indices to help construct tiddler structures like the above.

MY QUESTION for the truly savvy: Is there ANY way I can get to copy the final surface render that includes the CSS generated numbers?

In hope
Josiah

[@TiddlyTweeter]

Thank you Mark S & coda coder

For your further ideas -- molto grazie.

coda coder wrote:

I'm not sure if I've understood correctly, but, that draft seems to suggest that in Firefox you may be able to set user-select, either in the parent element or in the before/after pseudo element itself:

Right. There is a lot of ambiguity and no clear outcome. Its clear its an issue.

I tried a few different tests on user-select. Got it to work but not (yet) on any generated pseudo bits. I try a bit more before giving up.

Mark S. wrote:

I'm not familiar with how your regex tools work. Do they re-iterate until there are no more changes to be made?

I'm using BJ's Flexity plugin that allows sequences of RegEx to be run before the main parser kicks in. Iteration continues freely if you want, until done. Basically its raw access to JS regex in its full form.
 

If so, then I'm thinking that rules like this at the very end:

/(.*?)#startmarker#/$1 0001#endmarker#/
/(.*?)#startmarker#/$1 0002#endmarker#/
.... etc.

Might brute force what you want.

The problem is getting the counters. Whilst some JS (edit: I meant Regex) implementations when you get a capturing group you can return both the string and the match index (i.e. return the match count value as well as the string content) in JS, as far as I know, you can return the string matched with the captured group, but you can't access the COUNT of the match, even though you can use it. IF you could then I could use that to build the indices I need.

Best wishes
Josiah

[Mark S.]

What I'm suggesting is that you don't need the counters -- you create a 1000 rules to apply a 1000 counts, one after the other. Building up those rules shouldn't take long in a good text editor (especially one's like Emacs that have column modes).

-- Mark

[@TiddlyTweeter]

Thanks Mark S.

I didn't understand. I do now. YES. It could be quite easy for me as I now understand what you saying. Decent text editors support "vertical paste" so it would be easy to get a number on each line and then in TW regex it into position.

BUT I'm still playing with "how to do this without leaving TW". Yesterday I was playing with transcluding a list of the 1000 numbers vertically next to a transclusion of content that needs enumerating to see if one could generate a (surface level) copyable text to go back into processing. So far no good as the selection is columnised.

Best wishes
Josiah

Mark S. wrote:

What I'm suggesting is that you don't need the counters -- you create a 1000 rules to apply a 1000 counts, one after the other. Building up those rules shouldn't take long in a good text editor (especially one's like Emacs that have column modes).