Hello!
This request is about the following source file: anki-manual/src/searching.md at main · ankitects/anki-manual · GitHub. It is rendered as Searching - Anki Manual.
Issue
I have always been a bit unhappy with the current way search strings and their descriptions are displayed in the docs. For me, it is difficult (or at least needs more mental effort than I think it should) to skim through those line to find a search feature that I am looking for. Here is what it looks like:
I have been thinking about this and thought to myself: Maybe the issue is that the eyes have no real “skimming-point”. The search string and the description starts at the same line, after all. And there isn’t much visual distinction between the code block (search string) and the description. As an example, the following would be easier to differentiate:
(I know it isn’t pretty but that’s not the point)
This distinction can be achieved with the following css, e.g. in misc.css:
code {
background-color: lightblue !important;
}
If the “skimming-point” is the missing puzzle piece, then I believed a markdown table is the most logical choice.
I thus added this code to searching.md:
<div class="searching_table">
| Search String | Explaination |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `dog` | searches for "dog" - will match words like "doggy" and "underdog" too. |
| `dog cat` | finds notes that have both "dog" and "cat" on them, such as "raining cats and dogs". |
| `dog or cat` | finds notes with either "dog" or "cat". |
| `dog (cat or mouse)` | finds notes with "dog" and "cat", or "dog" and "mouse". |
| `-cat` | finds notes without "cat". |
| `-cat -mouse` | finds notes with neither "cat" nor "mouse". |
| `-(cat or mouse)` | same as the above. |
| `"a dog"` | finds notes with the exact sequence of characters "a dog" in them, such as "atta dog", but not "dog a" or "adog". |
| `-"a dog"` | finds notes without the exact sequence of characters "a dog" in them. |
| `d_g` | finds notes with d, <one character>, g, like dog, dig, dug, and so on. |
| `d*g` | finds notes with d, <zero or more characters>, g, like dg, dog, dung, etc. |
| `w:dog` | searches for the word "dog" as opposed to a sequence of characters - will match "dog", but not "doggy" or "underdog". Requires Anki 2.1.24+, AnkiMobile 2.1.61+, or AnkiDroid 2.17+. Note that formatting changes may be interpreted as word boundaries, e.g. searching for `w:exam` will match **exam**ple, as the "exam" part of example is in bold format. |
</div>
and this code to misc.css:
.searching_table table th:first-of-type {
width: 35%;
padding: 2vh;
}
.searching_table table td {
padding: 2vh;
}
.searching_table table td code {
background-color: lightgray;
}
This is the result:
Advantages
- The search string is on their own column, making it easier to skim them.
Disadvantages
- The markdown file won’t adhere to the 80 character limit, as there is no way to adhere to it if the tables contents exceed it.
- It also introduces a new css rule for the code block, because it was impossible to differentiate the code block from the gray used in the table.
- If the search string contains
|, then it must be excaped. Else, the table eats it (and gets malformed). - Search strings that are too long just break and look bad, see image below.
Question
Surely there must be a better way to display those “search-term:description” pairs. Something that is accessible in both, the source code (e.g. 80chars limit) as well as the user facing website that mdbook generates. I’d love to hear your ideas!
Thank you!