Reversed ordered list with raw HTML

support
1

I’d like to have an Ordered List rendered on the page, except with reversed numbering. I can achieve this via the reversed attribute:
https://www.w3schools.com/tags/att_ol_reversed.asp

But I will then also have to get raw HTML to render, and for that, I’m using this shortcode prescription:

Using that generates valid and correct HTML with the <ol reversed> tag, but the webpage does not render the list with reversed numbering/ordering.

Does anyone know why that might be? It isn’t an issue with the browser; I check using both Firefox and Chromium, and both of them present the same issue.

2

Option 1: Shortcode

layouts/shortcodes/rawhtml.html

{{ .Inner }}

markdown

{{< rawhtml >}}
<ol reversed>
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ol>
{{< /rawhtml >}}

Option 2: Attribute

config,toml

[markup.goldmark.parser.attribute]
block = true

markdown

1. Foo
1. Bar
1. Baz
{reversed="reversed"}
3

Thanks for that second method. I will use that.

But that does not work either. The browser does not seem to respect it. When I check the page using the built-in inspector, the list does begin with <ol reversed="reversed">, but what is rendered presents a list with regular ordering. I also tried <ol reversed="true">; it does the same thing.

4

I tested both methods. Please post your markdown.

5

Uh, just to make sure we’re on the same page, the reversed attribute does not reverse the order of the items. It reverses the numbering/lettering of the items.

So this:

1. Foo
1. Bar
1. Baz
{reversed="reversed"}

Produces this:

image

6

Yep; that’s exactly what I want.

The list looks something like this:

1. *ABC*

    **DEF**

    GHI

1. *JKL*

    **MNO**

    PQR
{reversed="reversed"}
7

Pasting your markdown into my test site produces:

image

8

Huh. And that’s exactly what I want.

And the HTML file that’s being produced is correct. So it can’t be anything wrong with HUGO (or the markdown or configuration). I’m at a loss as to where the problem lies.

9

Clear your cache. Use a different browser. Reboot. You know, the usual suspects…

10

Okay, so when I open the generated html file directly in a browser, it DOES respect reversed ordering. But when I use hugo server -D , and then open the served page, it DOES NOT reverse the ordering.

Might that mean an issue with the theme?

11

No, it is not an issue with the theme. Which port is Hugo listening on, and which port are you visiting?

12

I’m visiting: http://localhost:1313/

When I initialise the server, this is what it tells me:

$ hugo server -D
Start building sites …
hugo v0.84.3+extended linux/amd64 BuildDate=unknown

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  2  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 23 ms
Watching for changes in /home/user/Documents/Website/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/user/Documents/Website/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
13

Also, this is the CSS of the list element, as served to, rendered by and extracted from the browser:

element {
}
#content .container > ol, #content .footnotes > ol {
    padding-left: 0;
}
#content ol {
    counter-reset: list;
    list-style: none;
    padding-left: 2rem;
}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
}
* {
    color: #222;
    font-family: Inconsolata;
    line-height: 1.2;
}
*, ::after, ::before {
    box-sizing: border-box;
}
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

Are there any issues with what the browser sees?

14

This would be less painful for both of us if you would share your project repository.

15

Okay, so I was using the researcher theme, and when I switched to ananke, it turned out okay.

So it does indeed seem to be an issue with the theme.

If you look at the CSS above, the ordered list seems to have its list-style: none. Is that destroying the ordering?

16

See my previous comment.

17

I don’t have it online or public yet.

I installed the theme via:
git submodule add https://github.com/ojroques/hugo-researcher.git themes/researcher

and the “config.toml” is copied & modified from the same repository’s example:

title = "Researcher"
theme = "researcher"
enableEmoji = true
math = false          # enable KaTeX (https://katex.org/) globally

[params]
  author = "Olivier Roques"
  description = "A simple monospaced resume theme for Hugo."
  favicon = "favicon.ico"  # path to a .ico to use as favicon
  logo = ""  # url or path to a logo to put in the header
  [params.footer]
    text = "By Olivier Roques"
    url = "https://github.com/ojroques/hugo-researcher"
  [params.style]  # appearance options (can be omitted)
    fontFamily = "Inconsolata"
    pageWidth = "750px"
    avatarSize = "90px"
    colorBlack = "#222222"
    colorRed = "#dc3545"
  [[params.socialIcons]]
    icon = "fab fa-twitter"
    title = "Twitter"
    url = "https://twitter.com/"
  [[params.socialIcons]]
    icon = "fas fa-envelope"
    title = "E-mail"
    url = "mailto:mail@example.com"

[permalinks]
  "/" = "/:filename"

[menu]
  [[menu.main]]
    name = "About"
    url = "/about"
    weight = 1

[markup.goldmark.parser.attribute]
block = true

and the file “content/about.md”:

1. *ABC*

    **DEF**

    GHI

1. *JKL*

    **MNO**

    PQR
{reversed="reversed"}

That’s all. That should be a good minimal-(not)working-example.

18

This is a CSS problem. See here: https://codepen.io/carlmjohnson/pen/zYwGdKr

Your CSS is stripping off the OL markers.

19

Okay, but why is that happening? Is it the theme that’s doing that?

20

Yes, your theme says list-style: none;, which means to not have a counter.