OpenScholar Column Hacks

Table hack

HTML <table> elements are meant for tabular data, not for creating two-dimensional layouts. However, OpenScholar's only other non-code solution to have content in columns is to not write it in a Page but to write each piece in a Custom HTML widget and use the Layout to arrange them. Content in widgets is much harder to manage than content in Pages (or other post types).

First List

  • Aenean consectetur lacinia pharetra.
  • Aenean consectetur lacinia pharetra.
  • Aenean consectetur lacinia pharetra.

Second List

  • one two three
  • four five six
  • seven eight nine

In theory, table semantics applied to non-tabular data can be confusing when encountered with a screen reader. In practice, because layout tables are so common, browsers and screen readers use heuristics to guess when a table doesn't really contain tabular data; the above example, with only two cells and no headers, is very unlikely to be treated as tabular data.

Another problem with using tables for layout is they can't automatically reposition cells in a row to avoid horizontal scrolling in narrow windows (i.e. they're not good for responsive design). OpenScholar applies some CSS to table cells when the viewport width is less than 479px to display them as blocks instead of table-cells. For a few cells, OpenScholar's strategy can be effective.

Low-code alternative

If hand-editing a little HTML using the editor's Source button is feasible, you can wrap each block of content in a div with a class: <div class="display_inline">. When the content is saved (not while it's in the editor), the divs will be side-by-side when there's enough room and will stack vertically when there's not (e.g. in a narrow mobile browser window). The display_inline class is a part of OpenScholar but there's always some risk that the platform will change or remove classes, they're not meant for content use. To avoid the risk, it's better to create a custom CSS "utility class," .os-inline-block { display: inline-block; } for the site and use that instead: <div class="os-inline-block">.

First List

  • Aenean consectetur lacinia pharetra.
  • Aenean consectetur lacinia pharetra.
  • Aenean consectetur lacinia pharetra.

Second List

  • one two three
  • four five six
  • seven eight nine

OpenScholar's WYSIWYG editor, CKEditor, has an optional plugin to add a create div container button but it can be very fiddly to enter content within a div, follow it with a second div, etc. without resorting to the Source view. There are yet more plugins like Show Blocks and Magic Line that can help but it can still be tricky. Because OpenScholar doesn't permit writing styles within the editor, CSS classes to provide the desired styling have to already exist on a site so they can be applied to the divs.

See also: Test