 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / December 2006css to annotate image files?
dear css experts: I have some TIFF images of text articles. I would love to be able to use the "Find" feature in my browser to a particular word in the text, and to have hrefs in the document be clickable. Acrobat Acrobat can do this for pdf documents, but I would love to stick to tiff or gif or some other plain browser format. my OCR software gives me the exact location of each word, so I have the raw information necessary. now, css can render this as invisible text above the image (in an absolute location). I presume (but have not yet tried) that a find would still be visible to the browser user, because the found text would be rendered. I would love to have the ability to render a semi-transparent block in css, so that I can highlight clickable area in the underlying image, too, but I think this is not possible. I guess my question is if anyone has written a program that automates this "making bitmaps searchable" using CSS? /iaw > I guess my question is if anyone has written a program that automates > this "making bitmaps searchable" using CSS? I'd be wary of this for web use. Search engine spiders don't like invisible content and regard it as spamdexing, penalising it as such. If you do it, then make the stuff visible (although not prominent) to non-JS users, then only "hide" it with a bit of JS at page load time. You can certainly use CSS and standard :hover or clickable button techniques to make it appear. Two caveats though: if this stuff is worth seeing, then it's usually more annoying to have it on hover only. Maybe I really do want to read the stuff. Secondly it ought to appear when printed, when better accessibility is needed, or when I've manually selected to show everything (and that should be persistent for at least my session). When I do image galleries I embed the metadata inside the image (JPG EXIF) and then extract it into the HTML automatically. I also use a lot of Dublin Core to structure it, but not the more obscure formats like MPEG-7. I don't do much CSS on top of this. hi andy: thanks for the advice. fortunately, search engine inclusion is not important to me. I am just trying to add the ability to "search=find" (OCR-equivalent) text in image-files of articles. The user will see the true authentic representation of the text in the image itself. This seems to be harder to do than I thought. I can't even get a simple "proof of concept" to work. sigh... regards, /iaw > I am just trying to add the ability to > "search=find" (OCR-equivalent) text in image-files of articles. Seems like the images alt text is what you need, or maybe even look at using longdesc. You'll have to process the HTML a bit though, either before publishing (XSLT might be handy) or with some client-side JS. ivowel@gmail.com a écrit : > [...] I am just trying to add the ability to > "search=find" (OCR-equivalent) text in image-files of articles. The > user will see the true authentic representation of the text in the > image itself. A possible start would be: * create a div of fixed width and height (in pixels) * set the image as background of that div * split the recognized text in words, or possibly in lines, create one span per unit and position it inside the div (using lines instead of words as unit allows the search to span several words) But then a simple proof of concept shows that a lot of information is missing: do you have any way to obtain the font used in the image? How can you make sure the end user has the same font installed, or allows text to be as small as the text in the image? I would go another route: * create a div as above * put the image in it * write a simple FORM that lets the user enter search pattern * write the server side code that, given that search pattern, find all the matches and, for each match, computes a rectangle framing the matching text, then creates a span inside the outer div (simple border, no background to let the text shine through) * when this is working, add some Ajax "magic" for interactivity. Good luck!  SignatureDaniel Déchelotte http://yo.dan.free.fr/ hi daniel: the best analogy may be the desire to display a NYTimes front page image, and allow a user to search for text on this page. your first suggestion is also what I was thinking of, but the remaining issue is how I can make the foreground words invisible, except that I need at least a colored box when selected. I value speed and convenience [using ordinary browser mechanisms] over perfect alignment accuracy or even multi-word searches. I can also assume that my users have the basic microsoft web fonts. at least on a word-by-word basis, I can make sure that I won't be off too much. In fact, I would even be happy to display an arrow where the searched for word starts---the point is to allow the reader to find a word on a long image page. I have never used ajax. maybe I need to learn it to do something like this, though. Andy---any alt tags on images are not searchable, and even if they were, they would not show the reader where a particular word starts. regards, /iaw > ivowel@gmail.com a écrit : > [quoted text clipped - 27 lines] > > Good luck! |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.