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!

Simon Fraser University
Engaging the World

Faculty of Applied Sciences

School of Computing Science

Tips on working with SFU AEM pages

General Tips

Source Edit

Sample source code (well formatted for human eyes)

the source code

This segment of code will display as follows:

About links on AEM pages

only the following 2 formats are valid for any link:

Text component testing: size (SFU AEM defaults)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Now we use percentage:

differences on different devices - when font sizes are different:

Text component testing: Color of text

FRANCE

Text component testing: Fonts

These monospaced fonts which are NOT available on SFU AEM

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

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

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

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

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

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

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

adjust spacing

trying 3 dirrent bullets

trying 3 dirrent bullets (color: red)

trying 3 different bullets (color: red)

How to hide links in plain sights?

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

issues to be dealt with

Contact us