A Complete Blog Formatting Test

Achievement: Created A Blog Layout

I was able to create a blog layout based on my background image. It's an interesting process figuring out the CSS elements and HTML elements once more.

Blogs For Testing

A Complete Blog Formatting Test

Header Level 3

This post is a little laboratory for testing every formatting option available in the blog editor.

Basic Text Formatting

Bold text: velvet silence feels heavier at night. Italic text: soft enough to hold me. Underlined text: quiet things still leave echoes. Strikethrough text: words I almost said. Bold and italic text: the hush between heartbeats. Bold with italic inside: a little bit of everything at once.

Paragraph Alignment

LEFT ALIGNED the silence settles like dust on old letters, soft and slow and almost impossible to notice.

CENTER ALIGNED

soft, heavy, patient
the kind of quiet that feels like moonlight.

RIGHT ALIGNED

and somewhere in the distance,
the night keeps breathing.

Unordered List

  • velvet silence

  • ghost-soft longing

  • forgotten letters

  • moonlit windows

  • quiet corners

  • things left unsaid

Ordered List

  1. inhale

  2. exhale

  3. listen

  4. remember

  5. let go

Nested Lists

  • Things I remember

    • rainy windows

    • old photographs

    • songs at midnight

  • Things I forget

    • yesterday

    • tomorrow

    • why I walked into the kitchen

Links

Here is a normal link: Friend Rewind

Here is another link: Visit my favorite little corner of the internet

Emoji Test

🌙 ✨ 🕯️ 🦋 🪽 💿 🩵 ☁️ 🫧 📖 🕰️ 🌧️

Blockquote

velvet silence — soft enough to hold me, heavy enough to remind me what I've lost.

And here is some text immediately after the quote to make sure spacing works correctly.

Image Test

Insert an image here using the editor's Insert Image feature.

Try:

  • Image 1 small: 

  • Image 2 landscape: Wide Landscape

  • Image 3 tall portrait: Tall Portrait

This should help test whether images stay inside the content area or overflow.

GIF Test

Ctrl + X Works. 

Code Block Test

html
<span><span class="hljs-tag"><<span class="hljs-name">p</span>></span></span><span>Velvet </span><span>silence </span><span>drapes </span><span>the </span><span>room </span><span>in </span><span>soft </span><span>melancholy.</span><span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></span><span>
</span>

And some normal text immediately after the code block.

Inline Code Test

Here is some inline code inside a normal paragraph.

Horizontal Rule Test

Long Text Test

This paragraph exists specifically to test how the editor handles a larger amount of text. Velvet silence is the sort of phrase that sounds almost weightless until you actually sit with it. It lives in empty rooms, half-finished conversations, old messages, forgotten photographs, and the strange space between wanting to speak and deciding that silence is easier. Sometimes the quiet is peaceful. Sometimes it is not. Sometimes it simply sits beside you without asking anything at all.

Mixed Formatting Test

This sentence contains bold text, italic text, underlined text, struck text, a link, 🌙 an emoji, and inline code.

END OF TEST


Kudos: 0

Comments