A “What You See Is What You Get” editor (in short: “WYSIWYG editor”) aims to provide the most detailed representation possible of the finished text while it is being written or edited. The visual implementation of text formatting, lists or tables allows a comfortable handling without having to deal with the technical functionality. The concept is already known from mail programs or word processors and has been providing valuable services there for decades.
The previously used editor “Redactor II” was discontinued some time ago and has some weaknesses that can only be insufficiently remedied within the scope of our options. A major point of criticism lies in the technical implementation, which relies directly on the browser's own “contenteditable” interface for the implementation of functions, but which is generally considered to be very unreliable and buggy. Users of earlier versions already came into contact with CKEditor 4, which had similar problems to “Redactor II”.
The current version 5 of CKEditor represents a complete conceptual and technical redesign. With CKEditor 5, a WYSIWYG editor has been created that allows stable and reliable creation and editing of (extensive) texts in a platform-independent manner. The use of the unreliable “contenteditable” interface is used here only for the most necessary: Receiving text input as well as displaying the final result. This almost revolutionary approach peaks with CKEditor 5 in an extremely reliable editor, which also has a large number of useful and helpful features.
A new editor not only means a lot of work for us in terms of integration, but also gives us the opportunity to put existing practices to the test and reconsider them. Some decisions were made in the past out of sheer habit or as a technical compromise, although they were not always the ideal solution. With the migration to CKEditor 5, we have made some improvements that may be unfamiliar to some users, and we would like to explain their rationale here.
Important aspects in a text are often marked with in bold or italic font to emphasize them specifically. There are also situations where the relevance or urgency of a particular aspect needs to be emphasized more strongly. Usually, text colors are used for this purpose, but depending on the color scheme of the style, they are only suitable to a limited extent and sometimes become illegible due to a lack of contrast when different styles are used.
The text markers are available in four different colors and are based on the color scheme of notices. This allows for customized rendering depending on the style used, for example, light colors in a light style and conversely darkened colors when using a dark color scheme. Text markers are semantically mapped using the <mark> HTML element, improving both accessibility and search engine recognition of important content.
The behavior of the Enter key is inconsistent in many places: sometimes it creates a simple line break and sometimes a new paragraph is created when the key is pressed. When using the previous editor, a new paragraph is created when the Enter key is pressed, but this is visually displayed as a mere line break. This decision is partly due to technical reasons in combination with the old editor, but causes lasting problems with accessibility and interaction with other pages and programs when copying or pasting text.
With the change to CKEditor 5, we are ending this misuse of paragraphs and improving the semantics of the texts created in the long term. In the future, paragraphs will be displayed as actual paragraphs and behave as users are used to in word processing programs, for example. Explicit line breaks can still be created via Shift + Enter, for example for the display of addresses. The correct use of paragraphs improves the interaction with other websites and programs enormously, texts are usually copied and pasted correctly and no longer require corrections of line breaks or paragraphs.
Existing texts are dynamically adjusted to avoid unexpected gaps between paragraphs. This compatibility layer makes it possible to continue using existing texts and program logics without any changes and still produce a correct final result.
In the editor, it is partially possible to adjust the font used for texts, and changes to the font color or size are also possible. The usefulness of these functions is limited to a few edge cases, but conversely they offer enormous potential for unintentional misuse. The spectrum of misuses is very broad and ranges from barely noticeable deviations to actual problems with reading texts, not to mention problems with processing by search engines.
WoltLab Suite 6.0 adds three new options that influence the use of font face, color and size. By means of these options, the use of these text formatting can be selectively prevented when creating texts. In addition, these formatting are removed when displaying texts so that existing occurrences no longer have any effect.
These three new options do not result in any changes to existing texts; for example, suppressed text formatting becomes directly visible again when the respective option is deactivated. In the following, we would like to discuss the serious problems of this type of text formatting and enable operators to understand the consequences of not using these options.
A typical source of changed fonts, colors or sizes is the insertion of text from other sources. The adoption of elements such as lists or the bold printing of text parts is very advantageous, but it is not uncommon for unwanted changes to be adopted in the process. Typical here, for example, is a black font color (the default style uses a very dark shade of gray) and a similar-looking font that the author of the text does not even notice.
Requirements and preferences for the appearance of a website can change over time, for example, the use of a different font or the adjustment of the color schemes used. However, the font and color that are fixed in texts do not adapt to these changes, with the result that some text may become partially or completely out of sync.
A slightly different font is often unpleasant, but not necessarily a problem. Much more serious are fixed color values, for example when using a significantly different color scheme, such as a dark color mode instead of a previous light color palette. In this situation, texts become difficult or even impossible to read, and in the case of almost identical font and background colors, this can even be interpreted as an attempt at manipulation by search engines.
Even without strongly deviating color schemes, individually assigned font colors can be a problem. Some users use very pale color tones to intentionally display texts only very faintly, but in doing so cause such weak contrasts that readers with limited eyesight can no longer perceive them at all. However, the readability of a text does not only result from sufficient contrast but also from the avoidance of color combinations that are indistinguishable for some readers. A popular example is the lack of differentiation between red and green colors in the case of red-green vision impairment, which also exists in this form for other color combinations.
Often hardly noticed, changed font sizes in texts are at least as serious a problem, but are often difficult to recognize as such. Apart from the unintentional use of other font sizes by inserting text from, there is a whole range of motivations for the use of deviating font sizes.
A prominent example is writing text in a larger font due to a significant visual impairment of one’s own. Instead of using the existing capabilities of the operating system and browser to improve the readability of texts, one’s own texts are written in a larger font, deviating from all others. This is convenient for the author, but it leads to inconsistent text sizes and does not solve the problem that the texts of other participants are “too small” for the author.
Other authors use larger font sizes to mark up headings instead of using the existing options for setting headings. At first glance, such deviations are often hardly noticeable, but this has significant consequences for the structure of texts. When “real” headings are used, a structure is created that is understood and implemented by both search engines and a “screen reader”.
29
25
17
Comments 2