snf.wsring.net

Search

Items tagged with: html

Any Markdown / Pandoc mavens know how to tweak the HTML DOM generated for HTML pages?

I'm looking at one for an article which doesn't seem to generate

<

article> or elements, though if it did either, would make some layout / CSS issues a lot easier to deal with.

Problem now is that when I set additional margins within <blockquote> segements, they don't really or consistently differ from the adjacent <br> elements. I have a sad.

The CSS I'm using, in part (and yes, I can share the full stylesheet, though this seems to be the operative code):
body { 
  margin: 1rem auto; 
  max-width: 90rem; 
  padding: 0 4rem 0.5rem; 
  width: auto; 
  font-size: 1rem; 
  line-height: 1.4; 
} 

blockquote { 
    margin-left: 8em; 
    margin-right: 6em; 
} 

article, p, ol, ul, li, div { 
    width: auto; 
    max-width: 45rem; 
    margin: 0 auto; 
    line-height: 1.4; 
} 

p { 
    margin: 1em auto; 
}

What happens is that the blockquote margins are acting against the full page width, and push the blockquote block back and forth across the full page, rather than constraining it within the region bounded by the <br> blocks. Given that the blockquotes aren't within the <br> blocks, that makes sense, but it's not the effect I want.

I'd also like to preserve the option to be able to set elements (images, sidenotes, callouts) within the left or right margins.

I'm thinking that changing the DOM to include an article element would make that easier, as I could set the width of the article or main elements.

Present DOM:

* html
* head
* body
* header
* nav
* p
* blockquote
* p
* body /
* html /

That would better be:

* html
* head
* body
* header
* nav
* article
* p
* blockquote
* p
* article /
* body /
* html /

("element /" is being used for closing tags)

Looking at HTML5 semantic elements:

* \<section>
* \<nav>
* \<article>
* \<aside>
* \<hgroup>
* \<header>
* \<footer>
* \<time>
* \<mark>

... "article" is what I'm looking for.o

Though ... Dive in to HTML5 doesn't use these: <view-source:http://diveinto.html5doctor.com/past.html>

But yeah: if I could shim an <article> tag in there, I think I'd be happier.

And yes, I can (and probably will) CodePen this in a bit.

#pandoc #markdown #html #css
 

pandoc

Build html, pdf (via latex) and epub files from md files
ct.2018.07 S.168

https://pandoc.org/index.html

atom markdown preview: https://github.com/atom/markdown-preview

#pandoc #markdown #md #html #epub #pdf #atom #ct201807 #ct
 
Later posts Earlier posts