The editor window
The editor window is the cssed documents container. Any document open in cssed, will own an editor window where you can see, and change document contents.
Each open document is displayed in a tab at the top of cssed editor window. If there are several open documents, and there is no more room for tabs, the new tab will be hidden and two small buttons facing right and left, will appear on the right side of the documents tabs. With those two buttons you can browse through all open documents.
 | If you get gtk 2.4.9 and above installed, you will notice that the small arrows are no more grouped together. To retrieve a more efficient usage in all applications, you may want to customize gtk by creating or modifying the .gtkrc file in your home directory. Here is how to do this on Mac (the name of the rc file may vary on other system, but the lines to insert are the same): |
 | A quicker access is provided by the contextual pop-up menu, which opens when you right-click on a tab. It displays all the open tabs in cssed, and you can choose any of them to make it the active document. |
The path to the current document appears in the cssed window title bar, providing that an existing document has been opened or a new document has been saved.
Setting document preferences
Apart from the global settings (discussed in the Section called Configuring with the dialog in Chapter 6), each document open in cssed can have its own preferences and behave in a different way. The Document menu shows and lets you set the current document settings. This menu changes each time you switch to another document to reflect its current settings.
Here are the settings you can set:
- View line numbers
On activation, the line numbers are shown in the right margin of cssed.
- View line endings
On activation, the end of line characters are made visible. It is useful to know what kind of document you are editing Unix (LF), Mac (CR) or DOS/Windows (CR and LF). [1]
- View white spaces
On activation, the white space characters are shown in a graphical way.
- View lines wrapped
On activation, when the lines are larger than the editor window width, they are wrapped at the right margin and continue at the left margin. In this mode the horizontal scroll bar is never shown.
- Enable autocompletion
On enabling, auto completion is enabled for the current document. It allows you to choose quickly properties and values from a popup menu. More on this thema in the Section called Auto completion.
- Enable folding
On enabling, a - appears in the left margin and all properties are unfold. Clicking on it switches the - to a +, and fold the given property; you unfold it again by clicking on the +. You can also fold/unfold all properties from the item folding within the Document menu. When you disable folding again, the properties are automatically unfold.
- Set EOL mode
This entry converts the end of line characters between the most commonly used types. You can convert a Windows document in a Unix one for example.
- Highlighting
This entry allows you to change the syntax highlighting chosen by cssed (based on the file extension) once the file is open.
The syntax highlighting for CSS files is based on what is set in preferences (see the Section called Configuring with the dialog in Chapter 6). For other files it is hard-coded at the time being, but will be configurable in a future release).
Here you can see a shell script highlighted:
- Force encoding
The default encoding for new document is UTF-8. You can force the encoding either for a new document or for an already existing document. See the Section called Forcing the encoding for an in-depth discussion.
- Character set
This menu is aimed at people who need to deal with Asian languages. Some explanation about its functionalities will be found in the Section called Setting the character set.
- Change Font
This entry lets you change the font for the current document.
 | Remember that when you change the document settings, they are only changed for the current document. |
You can see below the document settings in action.
| Note line numbers, folding enabled, line endings set to Unix though made on a Mac, lines wrapping, white spaces (... for spaces, arrows for tabulations), and highlighting. |
Auto completion
Auto completion is one of the most used features in cssed. It lets you start typing a property name and see all possible completions. Once you have selected a property, you can apply it one of its values from a pop menu.
To use auto completion, you should first activate it in the Document menu (See the Section called Setting document preferences).
Type the declaration name and the opening curly brace.
As soon as you will type the opening brace, you will be presented with the list of all possible CSS properties.
Use one of the following techniques to search for the desired property:
Type the first letters of the property, if you know it. The list will scroll up or down automatically to the properties whose names begin with the given letters.
Use the scrollbar to navigate the list.
Select the desired property by:
either double-clicking on it
or clicking on it and press return
The property will be written in the document.
Once the property is written in the document, type the sentence separator character :, a pop menu with the possible values for this property will be shown. You can then select the desired value the same way you did it for the property with the auto completion list.
A value embedded in parentheses leads to a dialog. Just click on it to access the dialog, fill it in, and click on OK.
Type a ; to complete the process.
When you have added all the properties you want to the declaration, hit the Esc key to hide the autocompletion list and use the combination keys Ctrl-l to delete the new line added by cssed. See the explanation in the Section called Auto completion annoyances.
| If you choose a value by error, just delete it as well as the sentence separator character :, and enter the sentence separator character : again to trigger the value's pop menu. |
To quickly switch auto completion on and off, you can use the accelerator key Alt-D-a. With this accelerator key you can use auto completion for a single item, and then toggle it again to off.
Some users do not like the auto completion cycle. To let them use just the auto completion list, the accelerator keys Alt-T-a will show this list even if auto completion is disabled for the current document. No trigger key will be further used to show the auto completion list, or auto completion menu if auto completion is disabled in the current document, even if you start the auto completion cycle showing the list with Alt-T-a.
| Mac OS X users: remember you cannot use accelerator keys. |
Auto completion annoyances
The auto completion is not finished yet, and there are some situations where it can be annoying to the user. The auto completion list is shown each time the opening brace is typed. This way when you type a media at-rule - for example - the auto completion list is shown even when a property into this at-rule is bad CSS.
| Use the Esc key to hide the auto completion list at any time. |
The auto completion pop menu works by reading the word from the start of the line to the sentence separator, and looking for a matching string in the CSS tree view (View: the Section called The tree view). This way it only will work with CSS formated with a sentence per line and not when you put various sentences in the same line, even when it is valid CSS.
To get auto completion to work with those requirements, cssed always adds an end of line character when you type the sentence end character ;.
This way - when using auto completion - you always must delete the last line added by cssed.
| To do it quickly use the accelerator keys Ctrl-l. |
You can also use Alt-; instead of ; to avoid to continue the auto completion cycle.
Selecting blocks of text
In cssed, there are multiple ways of selecting blocks of text.
Kind of blocks
- Any chunk of text
Push the left mouse button, select the block with the mouse, and release the button.
- A whole line
Move the mouse pointer to the beginning of the line (the cursor changes to a pointer) and click.
Or:
Click on a line number, provided that you have activated the line numbers (See the Section called Setting document preferences).
- Multiple lines
Put the cursor at the start of the text to be selected, push the Shift key and click on the line number you want to be the end of block.
- The whole text
Use Ctrl-A.
Or:
Push Ctrl and click on any number in the margin, provided that you have activated the line numbers (See the Section called Setting document preferences).
Indenting blocks of text
In cssed the behavior of the tab key when indenting a selected text block differs if there is one line of text selected, or if the block of text selected contains multiple lines:
When one line is selected, the Tab key deletes this line and adds a tab character.
To indent a single line, move the mouse pointer before it and then use the Tab key. It takes the end of line character into account.
When multiple lines are selected, the Tab key indents the whole block by one tab.
To indent multiple lines, you can just select the last character of the first line to be indented up to the first character of the last line to be indented.
 | If you want to indent a block of code, be sure it contains at least an end of line character with one of the above tips. |
Forcing the encoding
Default behaviour: as already stated, the default file encoding for any new document is UTF-8. When opening a file, cssed tries to recognize the UTF-8 encoding and open the file with that encoding if it is valid UTF-8. On the contrary, it will open the file with the ISO-xxxx encoding, which best matches.
Forcing: if you want to use another encoding, either with a new file or when opening an already existing file, force the encoding just before writing any text
If you want to write JIS or Hangul, you must force the encoding to DBCS on each document you create or open.
| You may want to check the encoding of the file foo with: file foo. Take into acount that file always reports ASCII encoding when there is no accented character in the file. |
| Do not mix encodings in a given file, you will end up with bad rendering. |
Setting the character set
This is only needed for Asian languages. The supported character sets are the following:
ANSI: American standard, generally used with ASCII encoding
Western Europe: accented characters, generally used with ISO-xxxx or UTF-8 encodings
GB2312: used with DBCS and UTF-8 encodings
Hangul: Native Korean, used with DBCS and UTF-8 encodings
Shift JIS: Japanese, used with DBCS and UTF-8 encodings
ANSI and Western Europe are recognized when typing characters.
To use input methods in cssed, you will need to proceed as follows: