JAlbum / HTML Editor

HTMLEditorGS.png
HTMLComment.png
HTMLProjectP.png

The editor can be invoked when you want to edit a comment/description, either in Settings>General>Album description, Explorer>comments or the Folder Properties panel. It can be opened by control clicking on the text field, or using the 'More' menu, or by clicking inside the text field and clicking on the 'pencil & paper' HTML editor icon at the top right.

For the Album description and folder descriptions the editor opens with a full set of editing tools, the comments field opens with a reduced set of the more commonly used tools. To use the full set of tools in comments, open the editor whilst holding down the SHIFT/ALT + SPACE (Mac users may need to click on the HTML editor icon, rather than control clicking).

HTMLFull.png
HTMLShort.png


Each of the tools have their own tooltip, to clarify their functions, which are listed below in the order they appear in the full set of tools. The text formatting can be applied to selected text, or you can click to start then type your text and click again to stop applying the formatting.

Note that after applying a tool if you insert text immediately after the last character affected the new text takes on the applied format. If you don't want that then place the insertion point after the space following the last letter.

Note, some of the HTML tags described below include class names that are specific to jAlbum's implementation of the editor. They are not needed for manual entry of such tags, unless you want to use the editor and have them displayed as though they were entered within the editor. For example, the 'Text colour' button produces code including 'class="color"'.

Note, how some of the formatting appears on the page will depend on the skin being used. For example the 'lists' will be affected by the skin's text alignment, making the gap between bullet points/numbers and the list contents vary. If you are not happy with the layout you can experiment with applying an alignment to the list.

Typing New line/Enter

When entering a newline in the editor a break tag '<br>' is inserted. There will no break tag at the end of the text.

Bold

HTMLB.png

bold.


HTML tags

<b>Bold text</b>

Italic

HTMLI.png

italic.


HTML tags

<i>Italic text</i>

Underlined

HTMLU.png

underlined.


HTML tags

<u>Underlined text</u>

Note, underlined text normally indicates it is a link to somewhere else, its use may be confusing if not used as a link. The style can be changed to a wavy and/or a coloured line by adding style attributes:

<u style="text-decoration-style: wavy;
text-decoration-color: red;">

Text Colour

HTMLC.png

coloured text


HTML tags

HTMLColourPrev.png
<span class="color" style="color:#fe0909">coloured text</span>

Click on the icon and a small window will open showing the current text colour, click on the coloured area to open a colour chooser. Select the colour you want by using any of the control methods you prefer and then click OK, then click OK again on the small window to apply that colour.

ColourPicker.png

Note, the span tag surrounds the text to be coloured, the 'style' attribute is applying a colour of red, green and blue hexadecimal values fe, 09 and 09. Hexadecimal numbers are base 16 and go from 0 to 9 and then a to f (10 to 15)

Highlight Colour

HTMLBC.png

highlight colour


HTML tags

<span class="highlight" style="background-color:#33AC6F">highlight colour</span>

Apply a colour behind the text, using the same controls as for Text Colour above.

Link

HTMLLink.png

jalbum.net


HTML tag

<a href="http://jalbum.net">jAlbum.net</a>

After clicking on the link icon a small window will open, where you can enter the url of the link. You can also choose how the link works, the choices are:

HTMLLinkWindow.png

default Opens the linked document in the same tab/window as it was clicked

_blank Opens the linked document in a new window or tab

_new Opens the linked document in a new window

_self Opens the linked document in the same tab/window as it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

If you select text before clicking on the link icon that text will be used for the link's text (name). If no text is selected the link's name will be the same as the url entered. Links can be edited by placing the cursor within the link - you don't have to select the linked text from the beginning to end. If you select text within a linked text, the link will be changed for only the selected region.

Add ruler

HTMLRuler.png


HTML tag

<hr>

Draws a line across the width of the comments area. You can control the width and position of the line by adding styling to the tag, for example

<hr style="width:33%;margin-left:33%;">

would give a line centred and a third of the comments width.


Code

HTMLCode.png



Code lets you display HTML/CSS/JavaScript code, rather than interpreting the code and displaying the rendered result. One of two sets of tags is used for code, depending on how the code is generated. For a single line of text that has been selected and the code tool applied the code tags used are the '<code> </code>':

<code><a href="https://jalbum.net/en/samples">Samples</a></code>

The code entered is displayed on the page using the browser's default monospace font.


For text selected over multiple lines, pasted or typed into the code field the tags used are the '<pre> </pre>':

<pre><a href="https://jalbum.net/en/samples">Samples</a></pre>
The code entered is displayed in a fixed-width font, spaces and 
line breaks 
are preserved.


Note, when viewed in the HTML editor, code entry is displayed as pasted, but in jAlbums comment field it is displayed within 'code' or 'pre' tags, and reserved characters are converted to HTML entities

Align left

HTMLAL.png

Text is aligned to the left of the comment area.


HTML tags

<p style="text-align:left;">Text is aligned to the left of the comment area.</p>

Align centre

HTMLAC.png

Text is centre aligned inside of the comment area.


HTML tags

<p style="text-align:center;">Text is centre aligned inside of the comment area.</p>

Align right

HTMLAR.png

Text is aligned to the right of the comment area.


HTML tags

<p style="text-align:right;">Text is aligned to the right of the comment area.</p>

Justified

HTMLJ.png
Justified text.png


HTML tags

<p style="text-align:justify;">Justified text goes here</p>


Heading

HTMLHeading.png
Heading

HTML tags

<span class="size" style="font-size: 2rem">Heading</span>

This is technically not a heading tag, but simulates it by increasing the font size. If true heading tags were used the page may not validate as correct HTML.

Quote

HTMLQ.png

A quote is displayed in the editor with a vertical bar before the quoted text


Ordinary text

HTML rendered quoted text is usually displayed as a block of indented text.

Ordinary text

HTML tags

<blockquote><p>HTML rendered quoted text is usually displayed as a block of indented text.</p></blockquote>

List

HTMLOL.png

This is an unordered list, items in the list have a bullet point before them.


  • Item A
  • Item B
  • Item C

HTML tags

<ul><li>Item A</li><li>Item B</li><li>Item C</li></ul>

Note, that with HTML5 the end list tags (</li>) are optional

Number List

HTMLNL.png

This is a number list, items get numbered sequently, starting at 1.


  1. Item A
  2. Item B
  3. Item C

HTML tags

<ol><li>Item A</li><li>Item B</li><li>Item C</li></ol>

Note, that with HTML5 the end list tags (</li>) are optional

Image

HTMLImage.png

HTMLImageSample.png

HTML tag

<img src="https://jalbum.net//help/upload/en/2012/2/skin-10173616.png">

The path to the image can be absolute, as in the example shown, or relative to the page. Relative paths use '../' to go back up a folder and "/" with the folder name to go into a subfolder.

Remove formatting

HTMLRemove.png

Remove applied format from the selected text.

Undo/Redo

HTMLUndo.png

HTMLRedo.png
Undo or redo the previous actions