CSS styling for HTML content

I am using Tinderbox to output a bunch of HTML files that I then store in DevonThink. Folder structure looks like this:

css
    main.css
maincontent
    file1.html
    file2.html
    file3.html

Each of the html files has a link to the css file in its <head>

Everything looks good with the HTML files when viewing locally on Safari. However, the CSS doesn’t seem to be used to render the pages when viewed in DevonThink. Is this use supported? Should I instead embed the CSS in the HTML as “style” tags? Some other method of linking CSS and HTML files?

Thanks!

A screen capture of the group structure in DEVONthink and the View > Document Display > Source code, showing the head would be useful.

That’s what I figured.

The ../ is not valid in DEVONthink as a document could have multiple parents.

Hmm. Ok. I’m not familiar with all the ins and outs of relative links in HTML. Is there a way to link from “first_note.html” to “main.css”?

Since this is showing the CSS in a group at the root of the ZKN Tests database, it would be /css/main.css.

You could also use the item link, available from the contextual menu.

Ok, actually I tried that but it didn’t work because when I tried to edit the HTML file in DevonThink, the quotes I typed were curly instead of straight. Once I edited the file in a text editor and opened it again in DevonThink, it worked fine. When I was editing the file in DevonThink, I expected it to act like a plain text editor because the font was monospaced (the plain text font from the settings) and the syntax was highlighted.

Try disabling Preferences > Editing > Smart Quotes.

It was disabled.

Also, it might make sense to have these be disabled by default on plain text files? I know I like smart quotes in rich text but they tend to cause problems in plain text.

1 Like

People use plain text for all manner of things - not just code handling. (And some are incredible sticklers for using proper typographer’s quotes.) This is why it’s a preference to enable or disable, as people see fit.