Sinhala HTML Editor Basic Help (Font)

Text Formatting

ASHE utilises two method to modify textual content: specific text formatting tags and style attribute properties.

Text Formatting Tags (Bold and Italics)

ASHE features two text formatting tags, <strong> and <em>, web browsers generally presents the nested text between the tags as bold and italics respectively.

• To use text formatting tags:
  1. Select a range of text in the textarea.
  2. Click button in the menu to make the text bold / Click button to modify the text into italics.
     • In the former case the html code produced in the textarea should be:
       <strong> selected text </strong>
     • Whist for the latter case : <em> selected text </em>
  3. To view the content as it would be presented in a webpage click button.

NB: If desired both properties can be applied to a text selection. You need to use the features successively. The nested content between each sets of the tags will be modified accordingly. The order in which the tags are inserted doesn't effect end results (i.e. <em><strong> text </strong></em> presents the text in the same manner as <strong><em> text </em></strong>).

Text Formatting with the Style Attribute

ASHE features several text modification properties that uses html elements style attribute, namely, font size, font colour, typeface, text underline, text alignment and background colour. The procedure to use each of the features is similar.

• To use text formatting features that utilises the style attribute
  1. Select the range of text in the textarea
  2. Make the desired selection from a drop down menu (e.g. Font Size 8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt 72pt ) or in the case of the text underline property, click button.
     • The html code should appear as:
       •  <span style= "property1:value1;" > text </span>
       • ( e.g. <span style='font-size:20pt;'> text </span>)
     • In the case of the text-alignment property <div> element is used instead of <span>.
  3. If you desire you can view how the content is presented in the browser by clicking button.

NB: The property/s within the style attribute is nested between a pair of “ or ‘. Certain values (e.g. typeface values) can also be presented between quotation marks.

Multiple Modifications

• If you want to apply multiple modifications to a selection of text, ASHE text formatting features can be used successively. The order in which the modification is applied is unimportant if none of the elements are <div>.
  • Example:
    • <span style="property1: value1"> <span style="property2: value2"> text </span> </span>
    • produces equivalent results to
    •  <span style="property2: value2"> <span style="property1: value1"> text </span> </span>
• It is acceptable to have <span> tags nested between <div> tags, however, vice versa is not recommended. Thus with ASHE ensure that the tags containing the text-alignment property is the outermost.
  • Example:
    •  <div style="property1: value1"><span style="property2: value2"> text </span> </div> (recommended)
    • <span style="property1: value1"><div style="property2: value2"> text </div> </span>
      (not recommended)
• The content nested between the pairs of tags will be modified with the assigned property value.
  • Example:
    • <span style="property1: value1”> text 1 <span style="property2: value2"> <span style="property3: value3"> text 2 </span> text 3 </span> </span>
      • Property value 3 only applies to text 2.
      • Property value 2 applies to text 2 and text 3.
      • Property value 1 applies to text 1, text 2 and text 3.
  • The principle also applies if the series of tags were <div> tags. It is probably of greater relevance since in many webpages, pairs of <div> tags often nested between other pairs of <div> tags.

Alternatively, when a selection of text requires multiple properties, it is possible to manually insert the additional properties and values to the tag containing the style attribute. Adoption of such a method produces a less cumbersome html code, yet achieves the same result as the above mentioned procedure.

• To apply multiple properties to content by inserting of additional properties to a style attribute
  1. Select the range of text in the textarea.
  2. Make the desired selection from a drop down menu or button
     • Example: <span style='property1:value1;'> Text1 </span>
  3. Manually enter the second property and value after the semicolon.
     • Thus : <span style='property1:value1; perperty2:value2;'> Text1 </span>
     • Additional properties could be inserted similarly. Ensure that all properties are nested between pair of “ or ‘ and separated by ;.
       

Properties in Detail

Default or Inherit Value

If the particular style property is undefined (not specified) in your webpage, the browser renders the content with its default or inherit property values. For Instance, if the color property (font colour) is not defined, the textual content is likely to be presented in black. Most default values are the common to all web browsers. Properties such as the default font typeface may differ between browsers.

Font Size

Property: Font size – Size of text that would be presented by the browser.
Value: Could be an accepted keyword: x-small, small, medium, larger, xx-large etc.... or a numerical value and appropriate unit of length .

Most commonly used units for font size are: em, % and pt. The default size is generally medium, 100% or 1em. Given the default typeface variations amongst browsers, the actual size of text is likely to differ accordingly. In situations where identical font display (amongst browsers) is desired, consider specifying the font typeface and/or use absolute units to define the font size.

Font Colour

Property: Color – The colour of the text that would be displayed by the browser.
Value: There are several accepted forms for specifying values of colour (text, borders or background).

Most frequently used are English keywords and hexadecimal RGB values. E.g. white in hexadecimal is #ffffff. The two first hexadecimal digits specify the amount of red in the colour, the third and fourth specify the amount of green and the last two figures specify the amount of blue (i.e. rrggbb). The amount range from 0-9 then A-F (e.g. #ff0000 is red, #0000ff is blue). There are 216 colours that are considered websafe, which all computers would display correctly. However, most computers today have the capacity to display a significantly greater range of colour (from the 16 million+ colours available). Hexadecimal values of colours are available in various reference sources in the web (e.g. w3school, Wikipedia, etc..). The colour values (English keyword, hexadecimal or other forms) are applicable in the same manner for other style properties (e.g. borders and background colours).

Default (font colour): Typically #000000 (black).

Font Typeface

Property – font-family – Defines the typeface of text.

Value: Should contain several font names as a "fallback" system to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it attempts to display the textual content with the next font. If none of the fonts are matched, the web browser will use a default font. Start the list with the desired font, and end with a generic family. For instance, third on the list in ASHEs font family dropdown menu is:

Georgia ,"Times New Roman", Times, serif

The browser will attempt to display the content in Georgia. If it isn't supported, the web browser it will attempt to display the content in Times New Roman and so on through the list. ASHE features several frequently sourced font typeface combinations used in websites. The list of available typefaces are considerable. However, the capacity of browsers/OS to display different typefaces vary with the system. Further limitations maybe applicable for textual content containing complex script characters (e.g. Sinhala).

Text Alignment

Property: text-align - Defines the alignment of content (textual and/or graphical) within an element of specified width or display screen.

Values: Four values are available for the property - left, right, center or justify. Selection of right value positions the content to the right side of the element or display screen. Other values functions in the same manner. Default value is text-align:left.

Text Background Colour

Property: background-color - Specifies the background colour of an element. The feature in ASHE (‘BG colour’) enables you to define background colour of a text selection.

Value: Accepted forms for specifying values of the colour is described in a previous section.

Default: Generally white (#ffffff)

Underline text

Property: text-decoration - Associated property for several text modifications.

Values: ASHE features the value underline to underline selected text. There are several other values associated with the property, overline, line-through .. etc.. These are not featured in ASHE, but can be manually entered into the textarea.

Default value is expected to be text-decoration:none (i.e. no text decoration applied).

Other font properties

There are other text based properties not featured in ASHE that can be manually entered within style attribute. They include: font-style, font-variant, font-weight, line-height, letter-spacing, word-spacing and numerous others.