Markup: Image Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis varius pellentesque. Vivamus sit amet tellus porta, bibendum justo ac, vestibulum sapien. Integer vel velit at risus pharetra dignissim id sed lacus. Donec lectus orci, fermentum ac volutpat et, semper a sapien. In fringilla gravida dignissim. Praesent sed mauris id mi venenatis accumsan. Curabitur vulputate massa at velit pharetra tristique nec vel diam.
Continue reading


Edge Case

Super/Duper/Long/NonBreaking/Path/Name/To/A/File/That/Is/Way/Deep/Down/In/Some/Mysterious/Remote/Desolate/Part/Of/The/Operating/System/To/A/File/That/Just/So/Happens/To/Be/Strangely/Named/Supercalifragilisticexpialidocious.txt

A few things to check for:

  • Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
  • Check the browser window / tab title.
  • If you are a plugin or widget developer, check that this text does not break anything.

The following CSS properties will help you support non-breaking text.

-ms-word-wrap: break-word;
word-wrap: break-word;

 


Markup: Text Alignment

This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.

Continue reading


Markup: Title With Markup

Sed scelerisque ornare tortor at pellentesque. Curabitur commodo magna eget magna posuere, non suscipit turpis aliquet. Aenean cursus mollis magna eget semper. Nullam vel lorem nisl. Integer sollicitudin malesuada scelerisque. Duis condimentum neque laoreet, porttitor felis non, ultricies dolor. Mauris quis ipsum quis libero dictum tempor at et eros. Etiam lacinia vel dui eget dapibus. Morbi in purus dignissim, sagittis odio fermentum, euismod mauris.
Continue reading


Title should not overflow the content area

Title should not overflow the content area

A few things to check for:

  • Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
  • Check the browser window / tab title.
  • If you are a plugin or widget developer, check that this text does not break anything.

The following CSS properties will help you support non-breaking text.

-ms-word-wrap: break-word;
word-wrap: break-word;

 


Edge Case: Nested And Mixed Lists

Nested and mixed lists are an interesting beast. It’s a corner case to make sure that

  • Lists within lists do not break the ordered list numbering order
  • Your list styles go deep enough.

Ordered – Unordered – Ordered

  1. ordered item
  2. ordered item
    • unordered
    • unordered
      1. ordered item
      2. ordered item
  3. ordered item
  4. ordered item

Ordered – Unordered – Unordered

  1. ordered item
  2. ordered item
    • unordered
    • unordered
      • unordered item
      • unordered item
  3. ordered item
  4. ordered item

Unordered – Ordered – Unordered

  • unordered item
  • unordered item
    1. ordered
    2. ordered
      • unordered item
      • unordered item
  • unordered item
  • unordered item

Unordered – Unordered – Ordered

  • unordered item
  • unordered item
    • unordered
    • unordered
      1. ordered item
      2. ordered item
  • unordered item
  • unordered item