Re: Styling of search/find-in-page results

On 03.04.2014, at 07:20, Mitar <mmitar@gmail.com> wrote:
> 
> Currently it is not really possible to style search/find-in-page
> results. Some browsers reuse selection style (Firefox), some browsers
> have special style you cannot style with CSS (Chrome). I think a
> pseudo-element selector should be provided to change background-color
> and color properties.
> 
> Additionally, some browsers support highlighting all search results
> (for example, in Chrome, when user selects to "highlight all"
> matches). This might be another pseudo element?
> 
> The use case for this is in Mozilla pdf.js HTML5 PDF library and
> viewer. It uses HTML5 canvas to render PDF5 content. But for the user
> to be able to search and select text content of the PDF, a transparent
> text layer is created above. If you search on the page, you get
> results, but because text layer is transparent, instead of the result
> only an empty colorful box is shown. See here:
> 
> http://mozilla.github.io/pdf.js/web/viewer.html

Perhaps this and the other issue you've raised about lack of integration with the UI[1] could be solved together? 

e.g. when user invokes search the browser fires an event and then page can respond with a list of DOM nodes (or bounding boxes?) of things that match the search:

document.addEventListener('find', function(event){
    myDocumentSearch(event.findInPageRegEx).then(event.setSearchResultsCallback);
});

If you could tell browser what matches the search, then you wouldn't need to set highlighting style yourself — the browser would know how to render it in a way expected by the user.

-- 
regards, Kornel

[1] http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2014-February/042100.html