Tips on working with SFU AEM pages

General Tips

Source Edit

From time to time, AEM uses special fonts for text components. To ensure the text stay as you like, please always use "Source Edit".

since "Source Edit" has tiny edit window, we strongly suggest using a programmer's editor for the editing. Notepad++ is a good one on Windows side.

A few tips on using Notepad++ for this task:

save the source code in file with extension "html" - so the editor could give you syntax hightlights.

increase the fonts size of the edit field to the level which make your eyes comfortable

set "word wrap" to see all the contents with less scrolling

use more indentations for better clarity

Sample source code (well formatted for human eyes)

the source code

This is a sample

This is another sample

This segment of code will display as follows:

This is a sample
This is another sample

here is another example in real play:

method 1: in the format of

"RoleAccount:myuserid"

- (the role account, a colon and then your personal SFU userid)

the segment of code will display as following line:

method 1: in the format of "RoleAccount:myuserid" - (the role account, a colon and then your personal SFU userid)

<div style="background-color: rgb(219,243,250);">First and foremost, you must...</div>

First and foremost, you must...

About links on AEM pages

only the following 2 formats are valid for any link:

absolute URL of an SFU AEM page (author site), for example:

/content/sfu/computing/about/support/tips/sfu-userid.html

absolute URL, for example:

https://www.cbc.ca

...

2021.11.15: this page is created.

it had URL: https://www.cs.sfu.ca/research/resources/zzz.html

we linked to this page fom https://www.cs.sfu.ca/research/resources.html

method 1: relative URL

method 2: absolute SFU AEM URL

both work (2021.11.15).

the second testing step:

move this page to a different place (e.g. renaming to zzz1 and see if the links from the parent page still works.)

result: only absolute SFU AEM URL follows/works!

conclusion: always only use absolute SFU AEM URL for links under AEM.

Text component testing: size (SFU AEM defaults)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

paragraph

hr:

Now we use percentage:

source code: style="margin-left: 10.0px;font-family:Consolas;font-size:99%;"

font-size:50%

font-size:60%

font-size:70%

font-size:80%

font-size:90%

font-size:100%

font-size:110%

font-size:120%

font-size:130%

font-size:140%

font-size:150%

font-size:160%

font-size:170%

font-size:180%

font-size:190%

font-size:200%

differences on different devices - when font sizes are different:

we have 4 images here (date: 2024.12.10)

As you can see:

- on desktop, it is better to use size 200%

- on mobile phone, it is better to use size 130%

Sigh...

^^^ size 200% on Edge (131.0.2903.86) on Windows 11 FU24H2.

^^^ size 200% on Chrome (131.0.6778.104) on Android 14 (Kernel: 5.15.123) on UMIDIGI G9 5G.

^^^ size 130% on Edge (131.0.2903.86) on Windows 11 FU24H2.

^^^ size 130% on Chrome (131.0.6778.104) on Android 14 (Kernel: 5.15.123) on UMIDIGI G9 5G.

Text component testing: Color of text

try different colors for the texts:

This color is called Tomato.

source code:
This color is called Tomato.

My face is red but my heart is blue.

source code:
My face is red  but my heart is blue

FRANCE

FRANCE

FRANCE

test code

Text component testing: Fonts

These monospaced fonts which are NOT available on SFU AEM

span style="font-family:Lucida typewriter;" NOT availabe on SFU AEM
121416181012141618101214

span style="font-family:Monaco;color:red" NOT availabe on SFU AEM
121416181012141618101214

span style="font-family:Andale Mono;color:red" NOT availabe on SFU AEM
121416181012141618101214

(monospace fonts) (fixed-width fonts) - Courier

span style="font-family:Courier;color:blue"
12345678901234567890
MMMMMiiiiiiiiiiiiiii
MMMMMMMMMMMMMMMiiiii
^^^ when these 3 lines are aligned, Courier functions fixed-width (PERFECT) in this browser on this device.

(monospace fonts) (fixed-width fonts) - Courier New (bold)

span style="font-family:Courier New;color:blue;font-weight:bold;"
12345678901234567890
MMMMMiiiiiiiiiiiiiii
MMMMMMMMMMMMMMMiiiii
^^^ when these 3 lines are aligned, Courier New;font-weight:bold; functions fixed-width (PERFECT) in this browser on this device.

(monospace fonts) (fixed-width fonts) - Consolas

span style="font-family:Consolas;color:blue"
12345678901234567890
MMMMMiiiiiiiiiiiiiii
MMMMMMMMMMMMMMMiiiii
^^^ when these 3 lines are aligned, Consolas functions fixed-width (PERFECT) in this browser on this device.

(monospace fonts) (fixed-width fonts) - lucida console

span style="font-family:lucida console;color:blue"
12345678901234567890
MMMMMiiiiiiiiiiiiiii
MMMMMMMMMMMMMMMiiiii
^^^ when these 3 lines are aligned, lucida console functions fixed-width (PERFECT) in this browser on this device.

(monospace fonts) (fixed-width fonts) - Lucida Sans Typewriter

span style="font-family:Lucida Sans Typewriter;color:blue"
12345678901234567890
MMMMMiiiiiiiiiiiiiii
MMMMMMMMMMMMMMMiiiii
^^^ when these 3 lines are aligned, Lucida Sans Typewriter functions fixed-width (PERFECT) in this browser on this device.

Here are some SANS-SERIF fonts (typeface fonts) (propotional fonts) (variable-width fonts)

span style="font-family:Arial"

span style="font-family:Arial Black"

span style="font-family:Arial narrow"

span style="font-family:Arial Rounded MT Bold"

span style="font-family:verdana"

Here are some SERIF fonts (typeface fonts) (propotional fonts) (variable-width fonts)

span style="font-family:Times New Roman"

span style="font-family:Lucida Bright"

adjust spacing

list (ul)

default spacing

item #01
item #02
item #03

tight spacing (important for mobile browsing):

-- this may work for the 2015 look-and-feel:

---- please note: the line-height 110% works better for the 2025 look-and-feel:

item #11
item #12
item #13

source code:

<ul>

</ul>

trying 3 dirrent bullets

top level item 0, try '◾'
- 2nd level item 22, '•'
- 2nd level item 23, or '●' (bigger)?
  - 3rd level item 333, '⬥'
  - 3rd level item 334, '⬥'
top level item 1. try '◾'

trying 3 dirrent bullets (color: red)

top level item 0, try '◾'
- 2nd level item 20, '◾'
- 2nd level item 21, '•'
- 2nd level item 20-1, or '●' (bigger)?
- 2nd level item 22, '⬥'
top level item 1. try '•'
top level item 2. try '⬥'

^^^ please note: without the "list-style-type: '◾';" on the top ul, this will not work at all

trying 3 different bullets (color: red)

top level item 0, try '◾' (U+25FE)
- 2nd level item 21, '•' (U+2022)
- 2nd level item 21-1, or '●' (U+25CF)(bigger)?
  - 3rd level item 322, '⬥' (U+2B25)

^^^ please note: without the "list-style-type: '◾';" on the top ul, this will not work at all

basic (squre, circle, square):

top level item 0
- 2nd level item 22
- 2nd level item 23
  - 3rd level item 333
  - 3rd level item 334
top level item 1

still cannot get rid of the "red square":

top level item 0
- 2nd level item 22
- 2nd level item 23
  - 3rd level item 333
  - 3rd level item 334
top level item 1

How to hide links in plain sights?

for example:

the following line has "SFU Groups" linked to "https://groups.sfu.ca", but can you tell without moving cursor over?

what is an SFU Groups group?

source code: an <a href="https://groups.sfu.ca" style="color:black;">SFU Groups</a> group

Please note: that the color settings of "style" cannot be used without font.

Color red	Font Consolas

the source code:

<td> Color red </td>

<td> Font Consolas </td>

just color

will show as:

just color

- no color and the HTML code is deleted from the source.

font with color

will show as:

font with color

- which is exactly what we instructed.

did you notice the issue? it is the ";" after the color code (when a font is specified, it could be omitted).

just color

will get nothing

just color

will get blue!

CAS-ed pages for testing (password-protected pages)

CSIL

Research labs

Sample segment

table width, column width, cell height, merged cells,

to be done: which column goes where? - so people can get most critical info on a phone.

Let's find more on common fonts

Here we have 33 (common) fonts listed - and the default SFU AEM font.

They are available on Managed Windows 11 (2025.01.20) - this means you can distiguish each font on this page.

Let's try to identify which ones work with all browsers on all systems (iOS, Android, Windows, Ubuntu).

for example we must find out: does text in font "Consolas" display properly on Android?

Andalé Mono

Arial

Baskerville

Bembo

Bodoni

Bradley Hand

Brush Script MT

Comic Sans MS

Consolas

Courier

Didot

Franklin Gothic

Frutiger

Futura

Garamond

Georgia

Gill Sans

Gotham

Helvetica

Impact

Lucida

Lucida Console

Luminari

Minion

Monaco

Mrs Eaves

News Gothic

Palatino

Sabon

Tahoma

Times New Roman

Trebuchet MS

Verdana

font: Andalé Mono

12345 abcde HIJKL - in Andalé Mono
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Arial

12345 abcde HIJKL - in Arial
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Baskerville

12345 abcde HIJKL - in Baskerville
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Bembo

12345 abcde HIJKL - in Bembo
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Bodoni

12345 abcde HIJKL - in Bodoni
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Bradley Hand

12345 abcde HIJKL - in Bradley Hand
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Brush Script MT

12345 abcde HIJKL - in Brush Script MT
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Comic Sans MS

12345 abcde HIJKL - in Comic Sans MS
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Consolas

12345 abcde HIJKL - in Consolas
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Courier

12345 abcde HIJKL - in Courier
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Didot

12345 abcde HIJKL - in Didot
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Franklin Gothic

12345 abcde HIJKL - in Franklin Gothic
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Frutiger

12345 abcde HIJKL - in Frutiger
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Futura

12345 abcde HIJKL - in Futura
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Garamond

12345 abcde HIJKL - in Garamond
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Georgia

12345 abcde HIJKL - in Georgia
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Gill Sans

12345 abcde HIJKL - in Gill Sans
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Gotham

12345 abcde HIJKL - in Gotham
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Helvetica

12345 abcde HIJKL - in Helvetica
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Impact

12345 abcde HIJKL - in Impact
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Lucida

12345 abcde HIJKL - in Lucida
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Lucida Console

12345 abcde HIJKL - in Lucida Console
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Luminari

12345 abcde HIJKL - in Luminari
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Minion

12345 abcde HIJKL - in Minion
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Monaco

12345 abcde HIJKL - in Monaco
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Mrs Eaves

12345 abcde HIJKL - in Mrs Eaves
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: News Gothic

12345 abcde HIJKL - in News Gothic
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Palatino

12345 abcde HIJKL - in Palatino
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Sabon

12345 abcde HIJKL - in Sabon
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Tahoma

12345 abcde HIJKL - in Tahoma
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Times New Roman

12345 abcde HIJKL - in Times New Roman
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Trebuchet MS

12345 abcde HIJKL - in Trebuchet MS
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

font: Verdana

12345 abcde HIJKL - in Verdana
12345 abcde HIJKL - in AEM default
^^^ are they identical?
iiiiiiiiii
MMMMMMMMMM
^^^ are they aligned?

issues to be dealt with

Need more tips?

Having comments, suggestions, inquiries and more questions? Contact us!

Please click here and use the best practices to get assistance from helpdesk.

Last updated @ 2025.01.20