Text content
A Word-like editor module is available for editing "normal" text content. Many of the formatting elements it contains correspond to the functions familiar from word processing.
Checklist for texts - what you should always bear in mind
The formatting options offered should not be misused. Here is a checklist of things to bear in mind when formatting texts:
- Headings Never never write headings entirely in capitals
Use normal capitalisation instead.
⇒ Not like this: ÜBERSCHRIFT (wrong), but like this: Heading (correct) - Headings do not end with a colon
Occasionally you come across headings such as "Contact:" - however, no colon makes sense here as it is a heading. (The colon would only make sense if it is in the same line of text, e.g. "Contact: First name Last name"). - Avoid blank lines
Do not visually separate paragraphs of text within a content element by inserting blank lines between them. As a rule, these blank lines have an unintended effect, create unexpected empty spaces and thus result in a rather unbalanced appearance.
Increased spacing only makes sense between different content sections, i.e. between two content elements. If required, you can adjust the spacing of a content element upwards or downwards. However, please refrain from manually inserting blank lines! - Avoiding multiple spaces
The space between words can be increased by tapping the space bar several times. However, this inserts so-called fixed spaces, which interfere with automatic text wrapping. On small screens (e.g. smartphones), the intended indentation can also lead to an unintended, chaotic appearance. It is therefore better to stick to the normal text flow and please do not use a lot of spaces! - Make word monsters (long words) separable
Long words cause problems wherever there is little space, e.g. on smartphones. It then makes sense to insert predetermined breaking points in these words to enable a kind of hyphenation if required.
Description - Teaser paragraph
Heading 5 from the editor's format menu is used to make the introductory paragraph of a text larger (see, for example, the university profile page). This heading format is only for this purpose and should not be used in other contexts (e.g. as an internal heading in the text body) or across longer sections of text. - Paragraph heading instead of bold print
If a paragraph heading is to be created in a text, this is done via theparagraph headingin the editor's heading menu. Please always assign a heading format in this way and do not bold the entire text of a paragraph! - Lower case
Never mark text as lower case (from the style menu) over longer passages, just because this may seem more visually appealing. Lower case is really only for the "small print".
→ This is a text in lower case. This formatting applies to the "small print" and should only be used in exceptional cases. It is very important to heed this for reasons of accessibility! - Do not link headings
The purpose of headings is to introduce the subsequent content - and not to refer away from it. For this reason, headings should never be linked. If a link is to be created, it can instead be added at the end of the text following the heading. - Write email addresses short and without spam protection
If you do not integrate contact data via the Stud.IP plugin (e.g. if no personal data but a functional account is linked), please write university email addresses with a short domain ending (i.e. funktionskonto@uol. and no longer .
In addition, please do not use any self-made (supposed) spam protection such as konto(at)uol.de! Our TYPO3 CMS automatically provides all linked e-mail addresses with spam protection that is not recognisable at first glance. However, if you make manual changes, this spam protection may be prevented!
Checklist for hyperlinks
Link texts for hyperlinks
Choose descriptive texts for hyperlinks (i.e. not "here", "click here"). As a rule, it is advisable to highlight meaningful words in the flowing text and make them clickable. As a rule, it is not recommended to use URLs as link texts (unless they are short and permanent). URLs can change. Texts should also be readable by screen readers - long URLs are disruptive here (accessibility).
Page or file links instead of "external" links
If the links are to uol.de pages, please select the target page or file in the [Page] or [File] tab in the link browser. If it is a UOL page outside your own pages, you can enter the page ID of the target page in the [External URL] tab instead, e.g. 79(see Fig. 1).
You can determine the ID of a UOL page by clicking on the invisible link to the right of the date in the page footer (mouse arrow changes to click symbol, see Fig. 2 + 3).
Changes in TYPO3 v12
The update to TYPO3 v12 has also brought with it a renewed editor module, in which some things are solved differently than before. This brings some advantages, but occasionally also limitations, as not all previous options are (yet) available in the current module.
Here is a continuously updated list of changes:
- The current editing status of a Text&Media element can now be saved with
Ctrl-s(corresponds to the Save button) - Right-clicking within the editor no longer has a specific function
- Fixed (non-breaking) spaces are now created using the key combination
Ctrl-Shift-Spacebar(Mac:Alt-Shift-Spacebar) (wasCtrl-Spacebar). They are highlighted in light pink in the editor and are therefore easier to find. - If a text is to be formatted as code (such as the above-mentioned key combinations), this is now assigned in the style menu (was a separate button in the toolbar).
- Conditional hyp hens ("soft hyphens", i.e. predetermined breaking points within long words) are created with
Ctrl-Shift minus signsor by clicking on the(-)button in the toolbar. They then appear in the editor with a light blue background. - Dashes are inserted with
--(two minus signs), long dashes with three minus signs. (Previous shortcutCtrl + minus signno longer works!) - Typographical inverted commas are created automatically if you enter the character " or ' (double or single inverted commas) before and after text. If the automatic conversion is not desired, it can be cancelled with the Undo button (or
Ctrl-z). - Tables can be formatted as usual via the style menu. However, certain features are now assigned separately, e.g.
gridsand alternatingwhite and greyrows. In contrast to before, several features are possible or necessary at the same time.
Problems after the TYPO3 update
- Images that were inserted directly into the text (i.e. not via the media tab) may cause problems, i.e. opening and editing the relevant content elements does not work as desired:
- if they are images with an external http address
- if these have been inserted as an image using copy-paste
- For (1.) and (2.) it applies equally that the images must be re-integrated once by first re-uploading them in the TYPO3 file list.
- Tables sometimes appear differently after saving the content element than before. In some places, the new editor module automatically makes changes that not only happen "under the bonnet" but are also visible on the outside. We are still gathering experience here and will then take appropriate measures.
Overview: The editor toolbar and context menu
Overview of the formatting symbols
1 Style menu - a range of ready-made formatting options for paragraphs, lists, tables, etc. - see Further formatting using the style menu
2 Paragraph format menu - for subheadings within an element, these can be selected here. However, care should be taken to ensure that a sensible gradation is used. If, for example, the content element itself already has a title of type subheading 1, subheading 2 should be used next within the element to emphasise the structure.
Note: The use of headings within content elements only makes sense in exceptional cases. As a rule, it is better to create a new, additional content element that contains the subheading in question and the subsequent text.
3 Bold, italic, strikethrough - during text input or for subsequent text formatting of the text selected with the mouse.
4 Superscript/Subscript: TextSubscript or TextSuperscript, e.g. CO₂ or 100m³. (Note: The first three digits are also available as ready-made special characters: Digit¹, Digit² and Digit³, to be found after the omega symbol, see [19])
5 Lists and indentations:
- Numbered list
- Indent list item (= one list level lower), the generated sub-list can in turn be freely formatted as numbered or with an indent.
- Next list item
- First item
- Second point
- Third item
- List with indents ("bulleted list")
- Button "Increase indent": Indent list item (= one list level lower), the generated sub-list can in turn be freely formatted as numbered or with an indent.
- Button "Reduce indent": Outdent list item (= one list level higher)
6 Quote:
Quote - what needed to be said
Author of the quote (paragraph after the quote is automatically made smaller and formatted with a closing separator line)
7 DIV - this symbol can be used to pack the selected text, which may consist of several paragraphs, lists or similar, into a surrounding container. This is particularly interesting when using "Expand next element" (in the style menu), as several elements can be viewed as one and thus expanded/collapsed together.
8 Align text in the current block as left-aligned, centred or right-aligned - please only change this setting in justified exceptional cases, as the UOL standard is left-aligned flattening!
9 Create/edit or removehyperlinks - see notes on hyperlinks
10 Clipboard: Cut / Copy / Paste as plain text, Paste from Word
11 Remove formatting - resets the text formatting of the selected text to standard, i.e. bold print etc. is removed.
12 Undo or repeatediting step
13 Select all (e.g. to cut or copy the entire content of the element)
14 Setspell check ("SCAYT") and automatic replacement ("AutoCorrect")
15 Insertimage - Attention: Only in exceptional cases for images that should "float" in the text like letters, e.g. small symbols! Normal photos and similar should be officially integrated as media.
16 Insertformula - this requires additional steps, see more detailed description on displaying mathematical formulae
17 Inserttable - see notes on tables
18 Inserthorizontal separator line - please use sparingly , if at all!
19 Insert special characters - the omega symbol opens the palette of special characters
20 Code: Format selected text as code (e.g. programming code).
21 Insert abbreviation - the full form of an abbreviation can be added; this is important for accessibility!
22 Maximise editor - enlarges the editor window.
23 Show blocks: Make block elements (especially paragraphs) visible - this can help with orientation.
24 Source code: Here you can switch to the HTML source code view of the content (only for people who know what they are doing!)
25 Insertnon-breaking space ("fixed space" between words, as if it were only one word) - see Fixed spaces and hyphenation
26 Conditional line break with hyphen and without hyphen: This can be used to insert a break (especially in long words) to improve the appearance of line breaks - see Fixed spaces and hyphenation
Format text
In normal text, as known from WinWord and similar, the usual text formatting such as bold, italics etc. can be applied to text previously selected with the mouse using the corresponding symbols.
In addition, the editor offers so-called "text styles", which can be used to apply some additional formatting, e.g. coloured highlighting or strikethrough text.
Paragraphs and line breaks
Pressing the Return key (Enter key) at the end of a typed line creates a paragraph break , which is characterised by a ...
... optical space to the previous paragraph. If you do not want such a space, but only a line break, use the Shift-Return key combination instead:
[new line] This creates a new line within the current text paragraph.
Text paragraphs can be formatted as a whole in a certain way - see Further formatting using the Style menu.
Further formatting using the style menu
The style menu of the TYPO3 editor can be used to add further formatting to text sections. Here, block styles are distinguished from text styles - the former always refer to the entire current text paragraph, the latter to words marked with the mouse within text paragraphs.
Block styles
Formatting paragraphs
Block styles can refer to normal text paragraphs, list items or tables, table rows or table cells, for example. Depending on where the cursor is currently located, corresponding styles are offered. Here are some examples:
Frame (simple line around the current paragraph) - the "Style" menu item called "Frame" can be used from time to time for highlighting. However, this style really only ever refers to one paragraph!
Note: Highlighting with a frame should be used sparingly, as the effect only makes sense if several paragraphs are not framed at the same time - so "less is more" applies.
Introductory text
This formatting can be used to assign a slightly larger font to an introductory text paragraph. This may be useful at the beginning of a web page directly below the page heading (as is the case at the beginning of this page, for example). The introductory text is therefore not a heading itself, but rather a short teaser text.
Important: This formatting should really only be used for a short introduction consisting of a few lines, i.e. never in the complete text of a web page.
Lower case
In rare cases, paragraphs can also be changed to lowercase by selecting the "Style" menu item "Lowercase". Sometimes the "small print" appears at the end of a text. However, this may only be used in appropriate cases, i.e. never in the entire text of a web page.
Example in small print:
The formatting "small print" (really only use it for the "small print", never for larger parts of a page!) should only be used in exceptional cases, as the font is not quite as legible for some people due to the reduction in size. Even if this style may sometimes look quite good in combination with normal-sized fonts, it should be recognised that this font size is simply not intended for longer texts.
Follow-up element expandable
With this style, the current paragraph is converted into a kind of button and should therefore contain very little text. If you click on it in the web page, it functions as an expand button: The following element is shown or hidden. If you want to show/hide several consecutive paragraphs/lists together, you can select them with the mouse and then click on the DIV symbol in the toolbar. This wraps the selected paragraphs/lists in an (invisible) frame element, making them behave like a single paragraph.
Subsequent element can be expanded
This text expands or collapses when the previous button is clicked.
Text styles ("inline style")
While block styles always affect an entire text block (paragraph, list element, table cell, etc.), text styles only affect the currently selected words/letters. A yellow background is currently available here to achieve an effect similar to a highlighter.
Hyperlinks
Create hyperlinks
The most characteristic element on websites is the hyperlink. Clickable texts or images take you to further information.
All types of hyperlinks - whether to email addresses, to download documents, to external and TYPO3's own websites or to telephone numbers - can be edited in the TYPO3 editor using the chain link symbol (see Figure 1 below).
The "Insert link" window opens, in which the desired hyperlink variant can be selected via the corresponding tabs (see Figure 2 below).
Link types:
- Page links (to your own pages): Selectable in the link browser in the [Page] tab.
- Links to a content element within a page: If you want a link to a specific scroll position within of a web page, click on the small black arrow symbol to the left of the page's document symbol in the [Page] tab to see the content elements it contains (see image 3 below). Now click on the desired element to create a link to it.
- File links: Link to a file on the website, selectable in the [File] tab. Caution: It is usually better to create download links with a content element of the file link type instead!
- "External" links: Links to websites outside your own pages can be entered in the [External URL] tab:
- Insert any http address - Tip: Best from the clipboard after you have opened the desired target page in another browser window and copied the http address from the address line!
- Link to another uol.de website: Instead of an http address, a number can be entered, which then generates a link to the TYPO3 page with the corresponding ID. The page ID of the target page can normally be determined from the "short URL", which is displayed in the page footer next to the webmaster information and the editing date, e.g. the short URL "https://uol.de/p123456" results in the page ID 123456.
- Language change link: Instead of an http address, you can enter
&_language=1to generate a link to the English version of the current website. To link from an English page to the standard German version, use&_language=0. - Please note: Do not use for email! Only http addresses or website IDs may be referred to here!
- Email links: Please write the relevant email address legibly in the page, followed by a space. It will then link automatically and TYPO3 will also automatically add spam protection. Important: The spam protection will only become active once the automatic linking has taken place!
- Telephone links: If a telephone number should be callable by clicking on it (e.g. on smartphones), select the telephone number with the mouse and then click on the chain link symbol. Then select the [Phone] tab. The phone number should then be entered in international format, e.g. for the phone number 0441 798-1234 in this form:
+494417981234
Further information: Page links vs. external links
Page links and "external" links to pages within uol.de achieve the same result on the generated page, but they are saved differently internally.
In the case of links to uol.de pages, "page links" or "file links" have the following advantages over "external" links:
- The link is known within TYPO3 and a warning is displayed, e.g. if the file or page is deleted, that links point to it. It is also possible to display the links. This is not possible with "external" links.
- If the URL or file name of the link target is changed, the link will continue to work.
- More meaningful error messages are displayed during the link check.
- The page or file is called up directly when the link is clicked (without redirects), which often leads to faster loading of the page.
Edit hyperlinks
Existing hyperlinks can be edited with the TYPO3 editor as follows:
- Double-click on the link
- or select the link and click on the chain symbol
The link browser then opens and the links can be edited as usual (selection of page, file, entry of external URLs etc.).
Format hyperlinks as buttons
Special formatting is available for existing hyperlinks via the style menu. This allows a link to be displayed as a button. With the exception of the inline button, the buttons are automatically displayed in a new line and in some cases extended to the full available width:
Link as a light-coloured button
Within a text paragraph: Inline button
Check hyperlinks
Hyperlinks that point to external or internal destinations can become invalid if something changes in the destinations. To check whether these hyperlinks still work, a link checker runs regularly to find and log faulty links. The module also offers the option of editing content directly from the list of broken links.
More information about the link checker
Video of the training on internal and external links
In an online training course on the subject of hyperlinks, it was shown how to link to internal (own) pages and other (non-own) UOL web pages as well as certain scroll positions within them. The use of shortlinks is also explained in this context.
Note: The video is only available to members of the university.
Video of the link verification training
In an online training course on the subject of hyperlinks, it was shown how non-functioning links can be found and edited/corrected. The TYPO3 module "Check links" is used, which independently checks the links in the content elements for validity and, if necessary, points out link errors.
Note: The video is only accessible to members of the university.
Lists
Lists are often used for enumerations. They can have bullet points or be numbered. Lists can also be nested by moving parts of lists to the right using the "Increase indent" symbol:
- Unsorted
- list
- with
- several
- elements
- which can also be mixed
- and nested
- can be
- Conclusion of the ...
- surrounding list!
Format lists
The formatting of lists can be changed if required: List entries can be displayed expanded, and instead of working with numbers for numbered lists, letters (a,b,c or A,B,C or α,β,γ) can also be used.
In both cases, the formatting is carried out as described in the following example:
- "Expanded" lists are a speciality.
- In this case, the individual list elements are separated from each other by a vertical space (approx. half a blank line between list elements)
- This looks particularly clearer if the individual list items are multi-line.
- A small trick is required to assign the "expanded" block style to the list as a whole:
- Variant:
First select text from the list with the mouse so that at least two list items are covered by the selection. - Variant:
In the "Path" line at the bottom of the editor window, first click on the "ul" element (for numbered lists: "ol") - this selects the entire list. - You can then select the "Expanded list" entry under "Block style".
- Variant:
Tables
Note 1 on tables:
Tables are used to display tabular data - and only then!
Please do not use tables for layout purposes to achieve a column division!
→ A column division of page content can be achieved with grid elements.
→ A juxtaposition of text and associated image can be achieved via the position and alignment of text & media.
Note 2 on tables:
The more columns a table has, the bulkier it becomes. On smartphones, it can quickly happen that it is no longer displayed completely and you have to move it horizontally back and forth.
→ Consider whether you can present the data differently, e.g. in list form. A list behaves much more smoothly on small screens than a table.
Example table
| abc | def | ghi | jkl |
| mno | pqr | stu | vwx |
| third | line | shows | colour change |
| fourth | row asadfoi asdf |
(In this example table, the styleswTab. white/grey and gridwere assignedusing a CSS class ).
Inserting and editing a table
- The table icon in the toolbar can be used to insert a table and immediately assign a specific number of columns and rows.
- Use the TAB key to jump to the next table cell or, at the end of the table row, to the first cell of the next row. This creates a new row within the last table row.
- Right-clicking in a table cell opens a context menu with many other options:
- Table rows can be removed or inserted at a specific position.
- Table cells can be inserted, deleted, split or joined with neighbouring cells.
- Table columns can be inserted or deleted.
- The entire table can be deleted.
- Certain column widths can be fixed using the
Tab.cell 25%andTab.cell 50%methods below. Otherwise, the columns adapt flexibly to the available space.
Customise the appearance of the table
The appearance of the table, individual rows or individual cells can be changed using the editor's style menu:
Table with grid
The table contains grid lines between the cells.Table with horizontal grid
The table contains horizontal lines between the rows.Table with equal-width columns
All columns in the table are automatically set to a uniform width.Table alternating white/grey
The table rows (=lines) are alternately highlighted in white and grey.Table: Contents vertically centred
The contents of the table cells are output vertically centred (by default, they are aligned flush at the top)Table row grey
The current table row (=line) is highlighted in grey.Table cell grey
The current table cell is highlighted in grey.Table cell 25% wide
The width of the current table cell is set to 25 per cent of the total table width. (Important: This affects the entire column! Please only make this assignment in the top row of the table and ensure that the assigned widths of the individual cells do not exceed 100 per cent).Table cell 50% wide
The width of the current table cell is set to 50 per cent of the total table width. (Important: This affects the entire column! Please only make this assignment in the top row of the table and ensure that the assigned widths of the individual cells do not exceed 100 per cent).Table cell for date
The width of the cell is set so that there is space for a date (e.g. for the character string Jan. 2020 - Dec. 2021). On smartphone screens, however, the width is limited so that the cell never gets more than a third of the available width so that there is still enough space for further columns.
Examples of tables:
Standard table (without additionally assigned formatting)
| Header1 | Header2 |
|---|---|
| Data cell | Data cell Data cell 2nd row |
| Data cell | Data cell |
| Data cell Data cell 2nd row | Data cell |
| Data cell | Data cell |
Style: Table with grid
| Header1 | Header2 |
|---|---|
| Data cell | Data cell |
| Data cell | Data cell |
Style: Table with horizontal grid lines
| Header1 | Header2 |
|---|---|
| Data cell | Data cell |
| Data cell | Data cell |
Style: Table alternating white-grey
| Header1 | Header2 |
|---|---|
| Data cell | Data cell |
| Data cell | Data cell |
| Data cell | data cell |
| data cell | Data cell |
Style: Table: Contents vertically centred
| Header1 | Header2 |
|---|---|
| Data cell | Data cell Data cell 2nd row Data cell 3rd row |
| Data cell | Data cell |
| Data cell Data cell 2nd row Data cell 3rd row | Data cell |
| Data cell | Data cell |
Table too wide
| Header1 | Header2 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Data cell | Column content | Column content | Column content | Column content | Column content | Column content | Column content | Column content | Column content | Column content | Data cell |
| Data cell | Data cell | Data cell | Data cell | data cell | data cell | data cell | data cell | data cell | data cell | data cell | Data cell |
Addition of footnotes
Footnotes can be used to add supplementary or explanatory content to a text. As in printed publications, these are located at the end of the page and are referenced via footnote references.
Superscript numbers in square brackets are used as footnote references[1]. Such formatting is automatically recognised as a footnote reference and activated if the counterpart, i.e. the footnote belonging to this number, is also found.
Entering footnotes
- Create a separate content element of the type "Text & media" for the footnote texts (normally at the end of the main content area).
- In the [Advanced] tab of this element, enter the word
fussnotenin the "CSS class" field. Alternatively, the Englishfootnotescan also be used. - In the text field of the content element, create individual footnotes as new paragraphs, preceded by the corresponding number in square brackets. The number in square brackets can be formatted as a superscript in the same way as at the top of the text, but does not have to be.
- In the online display of the website, the corresponding numbers of the footnotes and footnote references are now automatically linked[2].
Footnotes
[1] Use of footnotes: This always includes the footnote itself (text preceded by a number in square brackets) and the footnote reference (superscript number in square brackets as an appendix to a word within the text)
[2] Please note: Many footnotes can be used across a website if required. However, you must ensure that the sequence of footnote references is correct. There is no automatic check if, for example, a footnote reference is incorrectly used more than once. It can only work correctly if exactly one corresponding footnote reference is found in the text for each numbered footnote.
Fixed spaces and hyphenation
The flexibility of web pages to be displayed on screens of different widths has a (perceived) disadvantage: line breaks in continuous text are automatic, so you don't have as much control over the appearance of the text.
Three special cases are described here:
1) The line break should not separate certain words.
This can be achieved by inserting fixed spaces between the words instead of normal spaces. To do this, remove the existing normal space and then type the key combination Ctrl + Shift + Space (under MacOS Ctrl + Alt + Space).
2) Hyphenation should be enabled for very long words.
Web browsers often do not yet handle this by themselves, but hyphenation can be achieved by inserting so-called conditional hyphens at the desired "predetermined breaking points". There is a button (-) in the toolbar for this, or the key combination Ctrl + Shift + minus sign (under MacOS Alt + Shift + minus sign) can be used instead. At the end of the line, the word is then separated where necessary and a hyphen is inserted.
3) For certain passages, an automatic separation without a hyphen should be enabled for certain passages.
A space without a hyphen is inserted in a word for this purpose. This is achieved by placing the cursor at the predetermined breaking point in the word and then clicking the BRE AK button in the toolbar.
Technically speaking, these special spaces, like conditional hyphens, are normal characters (similar to letters etc.). Due to their invisibility, however, they are not so easy to recognise.
Particularly important:
Long words are often poorly displayed on smartphone screens or in page titles or navigation menus as there is not much space for them. Therefore, "predetermined breaking points" should be inserted using conditional hyphens!
Tools
Clean up the formatting after pasting
Conveniently, content can be pasted from the clipboard, e.g. from Microsoft Word or Excel. Unfortunately, the content copied from there often contains quite a lot of unnecessary formatting commands ("formatting rubbish") "under the bonnet", which can lead to display problems as well as additional ballast. TYPO3 tries to remove this "rubbish" itself when inserting using Ctrl-V, but this is not always successful.
With the Tx button in the editor, the formatting of the selected text can be subsequently removed. This is sometimes useful for content pasted from the clipboard, but has the disadvantage that desired styles are often also removed (e.g. bold or italics).
A finer clean-up can be achieved with external tools. These can, for example, remove unwanted formats from Word without damaging the normal (desired) formatting: