Unwanted clipboard behavior flex inline table
Concerning https://jsfiddle.net/a2bsvoer/
Visually I have what I want. However, the linked jsfiddle causes the browser to copy cells into the clipboard with each cell (character) on its own line. How do I make it so that the browser copies full lines into the clipboard?
I'm open to completely refactoring with these requirements:
1. I do need to access (via JS, CSS) individual cells containing at most a single Unicode glyph (ignoring ZWJ etc. behaviors). Pretend this is a terminal screen or VGA text mode.
2. The emojis must be centered within their text cells. (If this wasn't a requirement, I'd be done by now.)
The HTML is generated, so strict use of whitespace is also fine. I wrote the example this way to be easier to see what is going on.
My gut is telling me to go old-school and use a table element, but doing so causes tab characters to be inserted into the clipboard.
I'm trying to avoid writing JS to intercept and de-mangle the clipboard on the copy operation.
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
56 Replies
well, this is the behavior that's supposed to happen
you're using spaces for layouting, and forcing divs to be inline
Sure. I've been able to squeeze the balloon so to speak, and get copy lines, but then the characters are no longer centered in their cell.
because you're using divs
and for some reason, you're using spans inside the divs
initially the
col divs were spansthey become block-level elements because they are part of a float
in the end, will work like divs
if i take those spans out, then the whitespace disappears. those are 0x20 not 0xA0
i know
but that doesn't matter
fwiw, changing those divs to span does nothing
why don't you use a table?
i say in the OP. i get tabs instead of newlines
how about you remove the spans and use the html entity for the spaces?
what
  ?
or whatever it is. i've not used numeric entities in a whileyes, that
or something like that
no, whitespace becomes insignificant then.
then can you re-create the table solution?
https://jsfiddle.net/a2bsvoer/1/ is probably as close as i'm going to get
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
you're still setting the td to be inline-flex
which makes it into inline elements
this does make it easier to demonstrate part of the problem though.
change
td { display: ___; } to each of inline, inline-block, inline-flex, table-cell and observe
i cannot center the wide characters within its cell if i do not change how it is displayeddon't touch the display
i have an almost-working solution
the clipboard behavior of inline is mutually exclusive with being able to center the glyph
correction
table has a weird line-height behavior i had to work around >_>
I HAVE a working solution
ooOOOoo
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
that does not meet my 2nd requirement
what is it?
it works
per OP:
The emojis must be centered within their text cells. (If this wasn't a requirement, I'd be done by now.)
they are
what browser?
chrome
do you have a screenshot?
of what?
this?
that is wrong.
those are not centered within their individual cells
alright, let me start over
i don't think it's possible without using JS.
the behavior of
display: inline-flex; to show the glyphs centered seems to be mutually exclusive with the behavior of display: inline-block; to copy the text as complete linesit is, but i have a solution for the first one
i already had that working though : |
i do appreciate your time. thank you for trying
if i can't figure this out, i'm moving forward with the table/table-cell approach, using a to-be-written JS copy routine to strip tabs before committing anything to the clipboard
my solution is almost working
i've been almost working for well over two hours, amid unrelated youtube videos
how about using svg to center the icon?
if you're trying to leverage user-select, it's probably not going to work.
the icon? that's just a placeholder for any wide characters
i want to support whatever characters. i'm not trying to show a specific set of them
i picked 🤬 as i feel it's the most apropos to the problem i'm having ; )
that's what made it work 90% of the way
no, it isn't
maybe it works to strip the tabs from the table output
but it doesn't help when the cell text is in an inline-flex, which is needed for centering
when using inline-block, the clipboard contents look fine; there no need for user-select shenanigans.
because it's handled as a block element
right but inline-block somehow is handled differently. it sucks that being able to center text is tied to the clipboard behavior.
thanks for trying user-select. i didn't know it changed the behavior of copying from table-cell.
because it's treated as inline
flex and grid as inline are hacky as hell
this might even be a bug
it does, for everything
not everything ; )
if you use text, it only selects the text without any richtext
that is, styles and stuff
in your example, if you give
td the style display: inline-flex; it looks right but still copies wrongyeah, because flex requires it's children to be treated as blocks
and not as inline
i'm wondering if i can get grid to do my bidding. grid is new to me. is flex slightly older?
both are kinda somewhat the same age
i say
grid but the same happens to flex
every child has to be a block