Dave Jarvis' Repositories

# Graphical user interface

This chapter covers customizing the graphical user interface (GUI).

## Skins

A skin defines the visual style of the application. Skins, which use a syntax
based on cascading style sheets, configure the user interface colours, fonts,
spacing, highlights, drop-shadows, gradients, and so forth. See the [W3C CSS
tutorial](https://www.w3.org/Style/Examples/011/firstcss).

### Order

The order that stylesheets are applied dictates how styles get overriden. The
application loads and applies stylesheets in the following order:

1. **scene.css** -- Defines toolbar styling.
1. **markdown.css** -- Defines text editor styling.
1. **skins/skin_name.css** -- Main application chrome, extensible.
1. **custom.css** -- User-defined preferences.

### Customization

This section walks through creating and applying a custom skin step-by-step, to
personalize the application's appearance. Create a custom skin as follows:

1. Start the application.
1. Click **File → New** to create a new file.
1. Click **File → Save As** to rename the file.
1. Save the file as `custom.css`.
1. Change the content to the following:

   ``` css
   .root {
     -fx-base: rgb( 30, 30, 30 );
     -fx-background: -fx-base;
   }
   ```

Apply the skin as follows:

1. Click **Edit → Preferences** to open the preferences dialog.
1. Click **Skins** to view the available options.
1. Click **Browse** to select a custom file.
1. Browse to and select `custom.css`, created previously.
1. Click **Open**.
1. Click **Apply**.

The user interface immediately changes to a dark mode. Continue:

1. Click **OK** to close the dialog.
1. Change the **rgb** numbers in **custom.css** from `30` to `60`.
1. Click **File → Save** to save the CSS file.

The user interface immediately changes colour.

### Classes

For more control, this section explains how to use pre-existing skin templates with defined classes, making it easier to tweak the GUI. Accomplish this as follows:

1. Visit the [skin]({{skins.url.main}}) repository directory
1. Click one of the files (e.g., `haunted_grey.css`).
1. Click **Raw**.
1. Copy the entire text.
1. Return to `custom.css`.
1. Delete the contents.
1. Paste the copied text.
1. Save the file.

To see how the CSS styles are applied to the text editor, open
[markdown.css]({{skins.url.markdown}}), which is also in the repository.

### Modena

The basic look used by the application is _Modena Light_. Typically we only
need to override a few classes to completely change the application's look and
feel. For a full listing of available styles see the OpenJDK's [Modena CSS
file](https://github.com/openjdk/jfx/blob/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css).

### JavaFX CSS

JavaFX CSS has styling capabilities beyond regular CSS. The [Java CSS Reference
Guide](https://openjfx.io/javadoc/21/javafx.graphics/javafx/scene/doc-files/cssref.html)
shows differences between JavaFX CSS and W3C CSS. The guide covers functions
for manipulating colours and gradients using existing colour definitions.

### RichTextFX

The application uses RichTextFX to render the text editor. Styling various text
editor classes can require using the prefix `-rtfx` instead of the regular
JavaFX `-fx`.

## Fonts

The preview tab uses two categories of fonts: regular and monospace.

### Regular font

To change the regular preview font, complete the following steps:

1. Click **Edit → Preferences**.
1. Click **Fonts**.
1. Click **Change** under **Preview Font** for the **Preview tab font name**.
1. Find the font name by typing or scrolling.
1. Click the desired font family.
1. Click **OK**.
1. Click **Apply**.

The regular preview font is changed.

### Monospace font

To change the monospace preview font, complete the following steps:

1. Click **Edit → Preferences**.
1. Click **Fonts**.
1. Click **Change** under **Preview Font** for the **Monospace font name**.
1. Find the font name by typing or scrolling.
1. Click the desired font family.
1. Click **OK**.
1. Click **Apply**.

The monospace font is changed.

## Internationalization

Internationalization support is essential for editing and previewing text in
multiple languages. Both fonts and language must be set for non-Latin-based
text. [@tbl:editor-font-families] lists example Chinese-Japanese-Korean (CJK)
font settings for the editor and preview tabs.

| Tab     | Font Family       | Language           |
| ------- | ----------------- | ------------------ |
| Editor  | Noto Sans CJK KR  | Korean             |
| Editor  | Noto Sans CJK JP  | Japanese           |
| Editor  | Noto Sans CJK HN  | Chinese            |
| Editor  | Noto Sans CJK SC  | Simplified Chinese |
| Preview | Noto Serif CJK KR | Korean             |
| Preview | Noto Serif CJK JP | Japanese           |
| Preview | Noto Serif CJK HN | Chinese            |
| Preview | Noto Serif CJK SC | Simplified Chinese |

:: Editor and preview tab font families {#tbl:editor-font-families}

### Editor font

Follow these steps to change the editor font:

1. Click **Edit → Preferences**.
1. Click **Fonts**.
1. Click **Change** under **Editor Font**.
1. Find the font name by typing or scrolling.
1. Click the desired font family.
1. Click **OK**.
1. Click **Apply**.

The text editor font is changed.

Note the following:

* Install the desired fonts (restart the application).
* Enter font name directly if it cannot be selected.

### Language Settings

Language settings control the locale used by the application, which is important when using CJK fonts or other locale-specific features.

Change the locale as follows:

1. Click **Edit → Preferences**.
1. Click **Language**.
1. Select a value for **Locale**.
1. Click **Apply**.

The language is set.