Invisible text but still selectable

HTML & CSS
1

We’re trying to create an OCR for a client and one of the requirements obviously, is for the users to select the text. Fortunately, we’re able to align the text, though not perfect yet. The only problem is the selection part. I tried using 0 as opacity and negative text-indent but both techniques won’t allow me to select the text anymore.

I tried hiding the text via

overflow:hidden, height:0 and padding-top:26px

. It did allow me to highlight a part of the document but the height is too short. Is there any other way to do this aside from using JS?

2

What is an OCR in this context? I can’t quite picture what you are doing. (I’m probably just stupid, but while you wait for someone else to answer, you might as well humor me!)

3

We have a text on top of an image that people can highlight to make transcribing it a little easier. Here’s a little snippet of the code:


<html><head><style type="text/css">html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:""}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{*font-size:100%}body{font:12px/1 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}.overlay{width:100%;height:100%;z-index:1;position:fixed}</style></head><body style="position:relative">
<span style="position:absolute;left:306px;bottom:1936px;font-size:2.7em;letter-spacing:1px;width:830px;line-height:.75;z-index: 9;padding-top:24px;height:24px;overflow:hidden;">For more information
</span><span style="position:absolute;left:284px;bottom:1900px;font-size:2.7em;letter-spacing:1px;width:830px;line-height:.75;z-index: 9;">contact ]o Hueston on:
</span><span style="position:absolute;left:193px;bottom:1865px;font-size:2.7em;letter-spacing:1px;width:830px;line-height:.75;z-index: 9;">0800 472 469 or 09 528 3924
</span><span style="position:absolute;left:348px;bottom:1829px;font-size:2.7em;letter-spacing:1px;width:830px;line-height:.75;z-index: 9;">or m. 021 487 283
</span><span style="position:absolute;left:99px;bottom:1794px;font-size:2.7em;letter-spacing:1px;width:830px;line-height:.75;z-index: 9;">www.restored beautygetaways.co.nz
</span><div class="overlay"></div><img src="image.jpg" style="z-index:0" style="width:100%"/></body></html>

Or do you want a visual example?

4

You mean you’ve wrongly positioned the text and now it isn’t visible? Well, they can still use ‘select all’ and copy-and-paste. Possibly you could use alternative style sheets or use a background image rather than an IMG.

5

I’m still not sure what this is meant to achieve. Do you want text positioned over an image?

6

Hi,

If you are trying to place invisible browser text on top of an image which I assume contains the same text then you will need to place it there without using absolute positioning or overflow;hidden as elements with those properties cant be selected by some browsers. Firefox always had a problem selecting text of absolute elements.

Use a background image and the just position your text with margins. I’m not sure if that will be any use because although you can now select the invisible text you won’t know that you are doing so because there is no clue as to what you have selected.

I think we may still be missing the point.:slight_smile:

7

Paul, That’s very helpful, I’ll try it out, thanks! :slight_smile: fingerscrossed

What technique can you recommend with regards to making the text invisible? Overflow hidden? text-indent? or is opacity good enough?

@ralph.m We’re trying to create an internal app for a company that will make it easier for them to transcribe the contents of PDFs they scan. For Phase I, they can zoom in on the document, now we want them to be able to select the text so they can just copy and paste them, and probably correct minor mistakes like spellings or weird characters. So the document is the image and we want to lay the text on top of it. We want to make it invisible so it doesn’t look horrible.

8

Hi,

You could just set the text itself to transparent for good browsers (Firefox/safari ie9).

For ie8 and under you’d have to ues opacity but that means it will be hard to select (unlike the transparent text version).

Here is an example of what I think you are asking.

http://www.pmob.co.uk/temp/imagetext.htm

You should be able to select and copy that text although it appears to be an image.

9

Sorry if I am being dense about this. If you scan a document these days, with OCR it will be turned into text anyway. If you already have the text available, why not just post that on the web? Either way, I don’t see the point of what you are doing. You can take something like a Word document and save it as a PDF, in which case you can copy and paste the text from the pdf, too. So again, I can’t envisage a scenario where this setup you are requesting is needed. :confused: