Typography

Date: 2025-02-16

Just some paragraphs to start out:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget odio sit amet augue bibendum ornare. Mauris ullamcorper sollicitudin dui, sed congue dolor rutrum in. Pellentesque massa sem, lacinia et tortor sit amet, dignissim finibus sapien. Ut at dolor id lacus sagittis pellentesque id sit amet felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus blandit posuere vulputate. Sed molestie, eros malesuada facilisis pellentesque, dui ante feugiat purus, eu eleifend tortor ligula sit amet turpis. Suspendisse potenti. Maecenas tempor, nulla auctor finibus molestie, quam urna tristique metus, vitae cursus leo lectus ac metus. Proin ligula risus, convallis sit amet ipsum sit amet, sodales placerat mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean suscipit aliquet venenatis. Nullam in faucibus felis. Proin nec pellentesque ligula, non scelerisque urna. Aliquam interdum hendrerit varius. Nunc faucibus iaculis vulputate.

Praesent ut pellentesque odio. Vestibulum id hendrerit enim, id malesuada nisl. Curabitur rutrum risus convallis, interdum quam a, bibendum urna. Donec in leo dolor. Sed vulputate sem id velit euismod, ac feugiat turpis ultrices. Phasellus nec mattis augue. Donec a ullamcorper dui. Suspendisse ultricies eros nec massa auctor luctus. Etiam accumsan lorem at molestie commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque consectetur nibh in nulla dictum, ac sagittis augue consectetur.

Maecenas suscipit accumsan urna, nec hendrerit risus cursus eu. Donec dapibus fringilla ante. Donec ac ligula ullamcorper, aliquam quam quis, malesuada sem. Ut vitae bibendum orci. Suspendisse commodo eros ac arcu sagittis eleifend. Morbi at tortor tellus. Nullam a viverra ligula. Integer rutrum nisi vitae ipsum rhoncus interdum. Cras facilisis hendrerit elit ultrices dignissim. Ut at arcu finibus, aliquam ante id, placerat dui. Aliquam non ex urna.

In vehicula fringilla augue sed aliquam. Suspendisse potenti. Maecenas semper vestibulum est id placerat. Nunc id est a quam commodo congue ac sed mauris. Proin accumsan imperdiet lectus, sit amet porttitor nisl fermentum vitae. Nullam semper lorem gravida, varius ligula sit amet, aliquet lorem. Mauris vel dignissim nisi. Phasellus sit amet urna non neque condimentum iaculis.

Donec et posuere nulla. Integer ac molestie dui. Morbi ac bibendum sapien. Nullam tristique nisi nec efficitur tempus. Cras eget ornare sem, eget sodales quam. Suspendisse potenti. Praesent eu lacus at quam eleifend lobortis. Suspendisse maximus convallis volutpat. Morbi ut ornare nunc.

Images

test-1920-1080

test-1024-576

Now two images one after another:

test-720-405

test-480-270

Resized Images

Will no longer be supported:

test-1920-1080

test-1024-576

test-720-405

test-480-270

Images Without Metadata

Now a simpler type of markdown is available:

test-1920-1080

test-1024-576

test-720-405

test-480-270

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

And now the headings one after the next:

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

Markdown Semantic Text Elements

Bold

Bold (alt)

Italic

Italic (alt)

~~Strikethrough~~

Inline Code

Code Blocks

Example JavaScript code:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

Example Java code:

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}

Example shell script:

#!/bin/bash
echo "Hello, World!"

Longer code block example:

def mergeSort(arr):
  if len(arr) <= 1:
    return arr

  mid = len(arr) // 2
  leftHalf = arr[:mid]
  rightHalf = arr[mid:]

  sortedLeft = mergeSort(leftHalf)
  sortedRight = mergeSort(rightHalf)

  return merge(sortedLeft, sortedRight)

def merge(left, right):
  result = []
  i = j = 0

  while i < len(left) and j < len(right):
    if left[i] < right[j]:
      result.append(left[i])
      i += 1
    else:
      result.append(right[j])
      j += 1

  result.extend(left[i:])
  result.extend(right[j:])

  return result

mylist = [3, 7, 6, -10, 15, 23.5, 55, -13]
mysortedlist = mergeSort(mylist)
print("Sorted array:", mysortedlist)

Horizontally long code block example:

public class WideRowExample {

    public static String buildExtremelyVerboseGreetingMessage(String firstName, String lastName, String city, String country, int age, String favoriteColor, String hobby) {
        return "Hello there, " + firstName + " " + lastName + "! You are " + age + " years old, you live in " + city + ", " + country + ", your favorite color is " + favoriteColor + " and you enjoy " + hobby + ".";
    }

    public static void main(String[] args) {
        java.util.List<String> namesOfPeopleAttendingTheAnnualCompanyConferenceThisYear = java.util.Arrays.asList("Alice Johnson", "Robert Williamson", "Christina Margaret O'Donnell", "Hiroshi Tanaka", "Fatima Al-Rashid");

        for (int indexOfCurrentPersonInTheAttendeeListThatWeAreCurrentlyProcessing = 0; indexOfCurrentPersonInTheAttendeeListThatWeAreCurrentlyProcessing < namesOfPeopleAttendingTheAnnualCompanyConferenceThisYear.size(); indexOfCurrentPersonInTheAttendeeListThatWeAreCurrentlyProcessing++) {
            System.out.println("Processing attendee number " + (indexOfCurrentPersonInTheAttendeeListThatWeAreCurrentlyProcessing + 1) + " whose full name happens to be: " + namesOfPeopleAttendingTheAnnualCompanyConferenceThisYear.get(indexOfCurrentPersonInTheAttendeeListThatWeAreCurrentlyProcessing));
        }

        double totalAccumulatedRevenueFromAllRegionalSalesOfficesCombinedAcrossTheEntireFiscalYear = 1250000.75 + 980000.50 + 1100000.25 + 875000.00 + 1325000.99 + 760000.10 + 1450000.45;
        System.out.println("The grand total of all revenue collected from every single regional sales office during this fiscal year is approximately: $" + totalAccumulatedRevenueFromAllRegionalSalesOfficesCombinedAcrossTheEntireFiscalYear);
    }
}

Now the same text as inline code, to test if that doesn't break page width: System.out.println("Processing attendee number " + (indexOfCurrentPersonInTheAttendeeListThatWeAreCurrentlyProcessing + 1) + " whose full name happens to be: " + namesOfPeopleAttendingTheAnnualCompanyConferenceThisYear.get(indexOfCurrentPersonInTheAttendeeListThatWeAreCurrentlyProcessing)); in general it should be fine I think?

HTML Semantic Text Elements

Note: not supported in our Gravis implementation.

I18N <abbr>

Citation <cite>

Ctrl + S <kbd>

TextSuperscripted <sup>

TextSubscripted <sub>

Underlined <u>

Highlighted <mark>

20:14 <time>

x = y + 2 <var>

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates

Unordered List

list item 1
list item 2
- list item 2.1
- list item 2.2
- list item 2.3
  - list item 2.3.1
  - list item 2.3.2
  - list item 2.3.3
- list item 2.4
- list item 2.5
list item 3
list item 4

Ordered List

list item 1
list item 2
1. list item 2.1
2. list item 2.2
3. list item 2.3
4. list item 2.4
5. list item 2.5
list item 3
list item 4

Mixed List

list item 1
list item 2
- list item 2.1
- list item 2.2
  1. list item 2.2.1
  2. list item 2.2.2
  3. list item 2.2.3
- list item 2.3
- list item 2.4
list item 3

Table

Name	Genre	Release date
The Shawshank Redemption	Crime, Drama	14 October 1994
The Godfather	Crime, Drama	24 March 1972
Schindler's List	Biography, Drama, History	4 February 1994
Se7en	Crime, Drama, Mystery	22 September 1995

Typography

Images

Resized Images

Images Without Metadata

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Paragraphs

Markdown Semantic Text Elements

Code Blocks

HTML Semantic Text Elements

Blockquote

Unordered List

Ordered List

Mixed List

Table

Other posts