Writing and layout controls

controls

Writing map

This is AI-generated technical demonstration text, not thesis writing. The examples show the writing controls used by the test publishing command.

  • Plain paragraphs use Poppins. The page title uses Black Kiyrand automatically.
  • A heading such as ### Memory makes a section heading.
  • *a phrase* makes that phrase italic. **a phrase** makes it bold.
  • [[Note|words shown]] creates a note link and an automatic preview on hover or keyboard focus.
  • ![[Note]] inserts a whole note, with its source label and visible end.
  • ![[Note#Heading]] inserts that section. ![[Note#^block-id]] inserts an identified paragraph.
  • ![[picture.png|220]] displays a 220-pixel-wide image as a separate block. Click it to enlarge.
  • The image layout callouts below choose placement and width. Text follows outside the callout.
  • Light/dark mode, colours, font families and preview animation are site settings. They need no syntax in each note.
  • Daily sequence and return links are generated from note relationships. A daily note needs its existing narrative_date property for chronological order.
  • Figure cards use the existing figure records' image and kind properties. A card without an available original cannot display that missing picture.

Image beside text, left

Write this in Obsidian:

> [!image-left]
> ![[assets/circles-portal-study-figure-oct11-1.png|190]]
> Your caption here.

Your paragraph goes here, outside the callout.
Image layout demonstration using the existing spatial study.
Image layout demonstration using the existing spatial study.

This paragraph demonstrates text beside an image placed on the left. You choose the width in Obsidian: 190 gives a small drawing, while 260 gives it more room. The surrounding text wraps in the space that remains. Its position is explicit, so shrinking an image does not unexpectedly change its alignment. On a narrow screen, the picture sits above the paragraph to keep both readable. This is demonstration text only; it does not add an interpretation of the drawing to the thesis.

Image beside text, right

> [!image-right]
> ![[assets/circles-portal-study-figure-oct11-1.png|220]]
> Your caption here.

Your paragraph goes here.
The same drawing with right placement.
The same drawing with right placement.

This example puts the drawing on the right. The image remains proportional and is not cropped. You can use this for an image that supports a particular paragraph without interrupting the reading sequence. The next heading ends the image layout, so an image cannot drift into the following section. The caption stays with its image. Click the image to inspect it at a larger size, then close the viewer to continue reading.

Full width

> [!image-full]
> ![[assets/circles-portal-study-figure-oct11-1.png]]
> Your caption here.

The full-width option fills the reading canvas, retains the image proportions, and begins its own block. Use it selectively for drawings that need space.

Show the full-width example
Full-width layout demonstration using the existing site-search image.
Full-width layout demonstration using the existing site-search image.

Try a memory or the project definition. Hover or focus a link, then choose Open source. The preview remains open while you move into it.

Navigation controls, tags, download links and external websites do not get source-text previews. Their destinations are different from a source note. Ordinary internal note links need no special preview marker.

What is prepared automatically

Your source remains Markdown. The test publishing command resolves excerpts, checks their targets, adds source boundaries and return routes, and uploads the prepared copy. This is custom publication infrastructure: native Flowershow still does not resolve note transclusion by itself.

The three image placement callouts are also custom conventions for this publishing command. Obsidian recognises their callout syntax; matching placement in Obsidian requires the supplied CSS snippet.