Eine Suchkarte mit echtem Glaseffekt – ganz ohne Web-Engine

Die Suche ist eine häufig genutzte Funktion in einem Editor. Aber weil sie gut funktionierte, haben wir sie lange nicht angerührt.

Beim Suchfenster von mote war es genauso. Es bestand immer aus zwei Zeilen, und selbst wenn man erst ein Wort im Dokument auswählte und es dann öffnete, blieb das Suchfeld leer.

Drei Apps gaben dieselbe Antwort

Bevor wir etwas änderten, öffneten wir im selben Dokument in Typora, MarkText und Obsidian die Suche und das Ersetzen und machten Bildschirmaufnahmen davon. Notion prüften wir anhand der öffentlich zugänglichen Hilfe. In einer Tabelle zusammengetragen, waren die Gemeinsamkeiten deutlich.

Die Suche begann mit einer Zeile. Das Ersetzen wurde nur bei Bedarf aufgeklappt. Das ausgewählte Wort erschien sofort im Suchfeld. Auch die Anzahl der Treffer im Eingabefeld anzuzeigen und mit Pfeilen zwischen den Treffern zu wechseln, war bei den meisten gleich.

mote sollte diesem Ablauf ebenfalls folgen.

Die Standardansicht haben wir auf eine Zeile reduziert. Das Ersetzen lässt sich über die Schaltfläche links oder mit Ctrl+H öffnen. Wenn der ausgewählte Satz eine einzige Zeile lang ist und höchstens 200 Zeichen umfasst, wird er automatisch als Suchbegriff eingetragen.

Wenn es keine passenden Ergebnisse gibt, wird statt der Zahl 0 „Keine Ergebnisse“ angezeigt. Das Eingabefeld erhält einen roten Rand. So lässt sich sofort prüfen, ob es sich um einen Tippfehler handelt oder ob der Ausdruck tatsächlich nicht im Dokument vorkommt.

Obwohl wir nur eine Zeile eingespart hatten, war mehr vom Inhalt zu sehen. Auch der erste Suchtreffer wurde seltener von der Karte verdeckt.

Die Suche wird viel häufiger verwendet als das Ersetzen. Wenn eine nur gelegentlich genutzte Funktion ständig aufgeklappt bleibt, bezahlt man bei jeder häufig ausgeführten Tätigkeit dafür.

Wir haben nicht alles so geändert, dass es anderen Editoren gleicht. Die schwebende Karte oben rechts und die Optionsschaltfläche haben wir beibehalten. Wir haben uns andere Produkte nicht angesehen, um sie nachzuahmen. Wir wollten vertraute Konventionen von den Entscheidungen unterscheiden, die nur mote trifft.

Der Text unter der Karte wird tatsächlich unscharf

Die Suchkarte sieht wie Glas aus. Das ist kein bloßer Effekt. Der Inhalt unter der Karte wird tatsächlich unscharf gezeichnet.

Anfangs beschlossen wir, den Unschärfeeffekt unter Linux ganz wegzulassen. Der Renderer von GTK kann die Oberfläche hinter einem Geschwister-Widget nicht abtasten. Außerdem verändert sich der Hintergrund jedes Mal, wenn das Dokument gescrollt wird, sodass er in jedem Frame neu berechnet werden müsste. Wir kamen zu dem Schluss, dass ein schnelles Bild wichtiger ist als ein schönes.

Die Lösung bestand darin, nicht die Karte unscharf zu machen, sondern den Editor selbst das unscharfe Bild zeichnen zu lassen.

Beim Zeichnen des Dokuments zeichnet der Editor nur den von der Karte bedeckten Bereich ein zweites Mal. Beim zweiten Zeichnen wird ein Weichzeichner von 18 px angewendet, und die Karte legt lediglich eine leichte Tönung darüber.

Neu gezeichnet werden nur die Zeilen, die unter der Karte tatsächlich sichtbar sind, und dies geschieht innerhalb des Frames, der ohnehin gerendert wird. Im Leerlauf bleibt die Zahl der eingeplanten Frames weiterhin bei 0.

Beim Header funktioniert es genauso. Wenn das Dokument gescrollt wird, gleitet der Titel unter den Header und wird auf natürliche Weise unscharf. Da das scharfe und das unscharfe Bild im selben Moment gezeichnet werden, geraten sie nicht gegeneinander in Versatz.

Anstelle eines Schattens haben wir die Glaskante mit einem 1 px breiten Rand versehen. Auf einem weißen Dokument ließ sich die Kante allein durch einen Schatten nur schwer erkennen. Zwischen der Karte und der rechten Seite des Fensters haben wir außerdem einen Abstand von 24 px gelassen, damit der Schatten sichtbar sein kann.

Auf eine Einblendanimation haben wir verzichtet. Wer Ctrl+F drückt, weiß bereits, wonach gesucht werden soll. Selbst eine kurze Inszenierung wird in diesem Moment zur Wartezeit. Die Karte öffnet sich sofort beim Drücken und sieht vom ersten Bild an wie Glas aus.

Auch übersehene Suchtreffer haben wir wiedergefunden

Nachdem wir die Oberfläche reduziert hatten, fielen uns Stellen auf, an denen Suchergebnisse nicht richtig angezeigt wurden.

Treffer in Tabellen wurden nicht farbig markiert. Im Lesemodus waren die Hervorhebungen versetzt. In Inline-Code und Textmarkierungen verdeckte die vorhandene Hintergrundfarbe die Suchmarkierung.

Jedes Problem hatte eine andere Ursache.

In Tabellen musste die Position für jede Zelle separat berechnet werden. Im Lesemodus mussten die Positionen ausgeblendeter Zeichen neu abgeglichen werden. Bei Text mit Hintergrundfarbe musste die Suchmarkierung zuerst gezeichnet werden.

Wir korrigierten die Positionsberechnung und die Reihenfolge, in der die Farben gezeichnet werden, und lösten damit alle drei Probleme.

Suchergebnisse werden gelb markiert. Nur das gerade betrachtete Ergebnis wird orange angezeigt. Auf dem Bildschirm sowie in PDF und HTML verwenden wir dieselben Farben.

Die Textfarbe haben wir nicht verändert. Schließlich wird ein Textmarker nicht über die Buchstaben gemalt, sondern bringt Farbe zwischen Papier und Schrift auf.

Glas hat seinen Preis

Wenn man bei geöffneter Suchkarte scrollt, wird der Unschärfeeffekt für jedes Bild neu berechnet. Zwar wird nur der Bereich unter der Karte neu gezeichnet, doch die Kosten verschwinden dadurch nicht.

Deshalb stapeln wir nicht mehrere Glasschichten übereinander. Wir verwenden Glas nur für den Header, die Seitenleiste und die eine gerade geöffnete Karte.

Glas ist kein Material zur Dekoration, sondern ein Budget, das innerhalb der verfügbaren Leistung aufgeteilt werden muss.

Das Suchfenster schöner und zugleich leichter zu machen, schien ein Widerspruch zu sein. Doch am Ende blieb nur eine Frage übrig.

Wann muss dieses Bild neu gezeichnet werden?