0

I have several JPG images, all of them contain some text (they are pages of some comics). I want to make the text selectable (and ultimately, copyable), but my only idea for that is the <text> tag from SVG, but that solution can be really messy, even when I make the opacity 0.0, basically rendering the SVG <text> invisible, only visible when selected, but only one mistake (with the font, placing, etc) is enough to make it messy and ridiculous.

Is there a more elegant (and less messy) solution for this problem? If you have just a slightly idea, please share, it would be great. I stuck for weeks this problem.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
FPeter
  • 43
  • 2
  • 9
  • It is impossible to select text that is within an image. Are you meaning text that is overlayed on top of your image, like a `
    ` that is positioned over an `?
     – Patrick Evans Jan 30 '16 at 18:01
  • No, i positioned an over the image and the element of the are selectable just like the normal text. – FPeter Jan 30 '16 at 18:04
  • Which ever method you use, you need to position text. The advantage with SVG is it scales, which will be your winner and always keep text at position, size independent, ... all this if you want a visible selection, if not, then you have two answers, pick the one best suited. – Asons Feb 04 '16 at 08:17

2 Answers2

0

The only way to make it look and feel real is to use the actual text inside an HTML element. Sadly, that would mean removing the text from the actual image, then finding a font that's similar enough, and finally writing and positioning the text.

The other idea is to just assign the text to each image, and when you, say, click the image, you'll get its text copied in the clipboard (if copying is the main intention here).

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • That would be perfect. It is possibly to assign text for an area? And if yes, please tell me how, because i can't find any reliable method. – FPeter Jan 30 '16 at 18:05
  • You can always use custom HTML attributes and fill them in with pretty much what you want. Not sure where you're getting the images from, but you can make something like a dictionary, like `{"image_one.jpg": "The text for the first image", "image_two.jpg": "The other text", etc}` – Shomz Jan 30 '16 at 18:07
  • From an xml file, when an area (for example: a balloon) have the same id as the corresponding text, so it would look like this {id1: "id1", id2: "id2" } Now the problem are the clipboard, but you helped a lot, i felt I running in cirles. Possible answer: http://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery Thanks again a lot – FPeter Jan 30 '16 at 18:12
  • Cheers, mate. I'm glad I could help. – Shomz Jan 30 '16 at 19:11
0

Here's a cheap and quick suggestion - duplicate the text you want to copy into the image title or alt properties.

Then, onclick (or dblclick) on the image you can retrieve the text from title/alt attribute and copy it to the clipboard.

It ain't wonderful, but will work...

Tony Duffill
  • 277
  • 1
  • 5