d1vanov/libquentier

Note editor: a word highlighted by spell checker loses bold and italic font style

Closed this issue · 7 comments

michaelkn commented

The issue is caused by the following CSS style applied to the misspelled word:

.misspell {
    font-style: normal;
    font-weight: normal;
    background: url(qrc:/underline.gif) bottom repeat-x;
}

<em class="misspell">mispelled</em>

I understand a reason of the font-style override for the <em> tag. This tag marks text that has stress emphasis and it is typically displayed in italic type.

I would suggest to replace the <em> tag by <span> which provides no visual change by itself as mentioned here. Then we might get rid of the font properties in CSS:

.misspell {
    background: url(qrc:/underline.gif) bottom repeat-x;
}
d1vanov commented

Thanks for the analysis, the suggestion seems reasonable only need to carefully look into HTML to ENML conversion rules - currently they are set up to ignore em tags with misspell class.

Also, I recall em tags are also used for highlighting of text being searched for, so the highlighted text would also lose bold and italic font style. Probably need to switch to span tags there as well.

michaelkn commented

I'll try to implement the suggestion and prepare a PR.

michaelkn commented

need to carefully look into HTML to ENML conversion rules - currently they are set up to ignore em tags with misspell class

It seems the tag itself isn't used, only the class:

4592 void NoteEditorPrivate::setupSkipRulesForHtmlToEnmlConversion()
...
4618     ENMLConverter::SkipHtmlElementRule spellCheckerHelperSkipRule;              
4619     spellCheckerHelperSkipRule.m_includeElementContents = true;                 
4620     spellCheckerHelperSkipRule.m_attributeValueToSkip = QStringLiteral("misspell");
4621     spellCheckerHelperSkipRule.m_attributeValueCaseSensitivity = Qt::CaseSensitive;
4622     spellCheckerHelperSkipRule.m_attributeValueComparisonRule = ENMLConverter::SkipHtmlElementRule::Contains;
4623     m_skipRulesForHtmlToEnmlConversion << spellCheckerHelperSkipRule;
michaelkn commented

em tags are also used for highlighting of text being searched for, so the highlighted text would also lose bold and italic font style

The highlighted text doesn't lose italic font style, because there is another css property used: <em class="hilitorHelper" style="font-style: inherit;

nevertheless we could replace this em tag for uniformity

d1vanov commented

It seems the tag itself isn't used, only the class

Yep, correct. I recall now that I wanted to make these rules account for element name + attribute name + attribute value but then took a shortcut so right now only the attribute value is used in comparison.

The highlighted text doesn't lose italic font style, because there is another css property used: <em class="hilitorHelper" style="font-style: inherit;

That's good, it's about time CSS has helped something instead of being the source of trouble 😊

d1vanov commented

This one was fixed in commit 0e3b93e merged to development branch.