[csswg-drafts] [css-ui] Control whether an element is findable/searchable (Ctrl+F) (#3460)

hftf has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-ui] Control whether an element is findable/searchable (Ctrl+F) ==


I want to control whether an element is findable/searchable via a browser’s Find function (usually accessed with the <kbd>Ctrl+F</kbd> or <kbd>Cmd+F</kbd> shortcuts).

## Why?

In an interface where meaningful elements accompany or interrupt the flow of running text, users should still be able to interact normally with the text as if those elements were inert.

[This JSFiddle](http://jsfiddle.net/jw8do93r/) shows a sentence interspersed with some annotations. Both the words and annotations are marked up with abutting `<span>` tags. (The example is simplified from a real interface I designed.)

Suppose you want to find a sentence within a long annotated paragraph. Most browsers will only find up to a single word (e.g. `Th`, `This`), but not a string of several words (`This sentence`). That behavior is demonstrated below by Chrome 71/Mac:

<p>
<details>
<summary>GIF showing Find behavior for annotated sentence example</summary>
<img src="https://user-images.githubusercontent.com/312957/50220620-d4983780-0360-11e9-91c6-d5efa555ed13.gif"/>
</details>
</p>

While this feature would primarily be used by authors to improve user experience in browsers, it could also be used by search engines to ignore certain interface elements when indexing or displaying blurbs on results pages.

## Current status

The desired behavior is similar to the existing `user-select` property, which controls whether an element is selectable or copyable.

However, the spec does not define whether `user-select` affects findability, and if not, does not provide an alternative mechanism for doing so.

[CSS Basic User Interface Module Level 4](https://drafts.csswg.org/css-ui-4/#propdef-user-select) refers to “findable” once, in the context of generated content:
  > #### 6.1 Controlling content selection
  > When generated content in pseudo elements becomes selectable through this mechanism, UAs should also make this content findable through their search function.

[CSS Generated Content Module Level 3](https://drafts.csswg.org/css-content/#accessibility) refers to “searchable” once, in the context of generated content:
  > #### 1.1. Accessibility of Generated Content
  > Generated content should be searchable, selectable, and available to assistive technologies.

## Workarounds

Use CSS generated content.

Cons:

* Abuses presentation and removes important semantics
* Not possible to nest or include mixed/phrasing content

---

Other workarounds:

* Use JavaScript to reposition elements
* Use tables for layout

## Questions

1. Should `user-select` encompass findability?
2. If not, should a new control be invented?
3. How do findability, selectability, copyability, etc. interact with similar annotation methods, such as ruby annotation or [interlinear glosses in linguistics](https://en.wikipedia.org/wiki/Interlinear_gloss)?
 * Should the [default UA stylesheet for ruby](https://drafts.csswg.org/css-ruby-1/#default-stylesheet) define properties like `user-select` for `rt`?
 * Should a separate issue be created for this?

## More examples

1. Example of English text containing a word with a phonetic ruby annotation [(JSFiddle)](http://jsfiddle.net/09gz4e8j/1/):
 
 <p>
 <details>
 <summary>GIF</summary>
 <img src="https://user-images.githubusercontent.com/312957/50224872-00211f00-036d-11e9-9a11-54dce9550cf3.gif"/>
 </details>
 </p>

2. Example of per-letter ruby annotations (taken from a [recent presentation](http://fantasai.inkedblade.net/style/talks/i18n-primer/#i18n)):

 <p>
 <details>
 <summary>GIF</summary>
 <img src="https://user-images.githubusercontent.com/312957/50220621-d4983780-0360-11e9-86ab-b91c6a7168b6.gif"/>
 </details>
 </p>

## Further reading

* [StackOverflow: HTML: Can you hide/ignore text elements from browser Find (CTRL+F) (▲13, 2013)](https://stackoverflow.com/questions/19457994/html-can-you-hide-ignore-text-elements-from-browser-find-ctrlf)
* [StackOverflow: Is there any way to designate content off-limits to browser's built-in text searching? (▲2, 2015)](https://stackoverflow.com/questions/28505441/is-there-any-way-to-designate-content-off-limits-to-browsers-built-in-text-sear)
* [[css-content] Request for note regarding selection, search, and accessibility of generated content (2015)](https://lists.w3.org/Archives/Public/www-style/2015Nov/0303.html) – entire thread


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3460 using your GitHub account

Received on Wednesday, 19 December 2018 14:10:40 UTC