Please consider these tasks:
- Find all words in text on HTML page and highlight them
- Syntax highlighting: parse text of <pre> and mark all keywords by changing their color
- Find all misspelled words in <textarea> highlight them specifically.
Currently you can do #1 and #2 by wrapping each text found into <span>s with specific classes – thus to modify DOM structure of the document. Such modification by itself is a) not trivial to implement, b) is highly non-desirable (consider text editor with syntax highlighting) and c) even impossible in case of <textarea> for example.
Ideally we should have some facility that will allow us to a) mark text fragments, b) apply styling to such marked runs through CSS and c) do that without DOM tree modifications.
As a result upcoming Sciter will have:
- In CSS, support of
::mark(...name[s]...)
pseudo element. - In script runtime, new methods of Selection class:
Selection.applyMark(start,end, ... mark names...);
– to add marks to the range.Selection.clearMark(start,end, ... mark names...);
– to clear marks from the range.
Example, CSS:
div::mark(hilite) { background-color:lime; } div::mark(hilite2) { background-color:cyan; } div::mark(literal,string) { font-style:italic; color: red; }
First rule will tell the engine to set background color on all text runs that are marked by “hilite” to “lime”.
And script code
var text = $(div).firstNode; var start = [bookmark: text, 6, false]; var end = [bookmark: text, 11, false]; Selection.applyMark(start,end,"hilite");
will apply mark “hilite” to the text node from 6th until 11th position and so you will have the following rendering:
Note: this will not change DOM structure but rather apply some meta information to characters in the text.
Fantastic, will make it possible to implement a syntax highlighting library much easier without the craziness of classifications.
Does it intelligently updates the ‘mark’ position when insertions and removals occur?
Since there is no DOM involved, will I be able to use all CSS properties for styling the mark?
On modification of particular paragraph (single <text> in <palintext>) it will erase all marks so you will need to reparse that paragraph/line.
As of CSS on marks, you can use only “character subset” of properties like: font, color, background, text-decoration, etc. You cannot change display and other box related properties of text runs.