Coder Social home page Coder Social logo

Comments (5)

hubgit avatar hubgit commented on September 8, 2024

Running the HTML5 Outliner bookmarklet on the updated HTML shows that the outline is improved:

screen shot 2015-05-13 at 10 59 24

compared to the current sample HTML, where most of the sections are nested under the Introduction:

screen shot 2015-05-13 at 11 00 31

from pubcss.

thomaspark avatar thomaspark commented on September 8, 2024

Thanks for opening up the issue. I agree that the less special classes we can rely on, the better. The HTML Outliner output for your markup turns out great, so that is definitely a point in your favor.

My approach came from trying to make the markup as simple and intuitive as possible. One of my concerns was that for something like subsubsections, you end up with a pretty complex nesting structure as compared to the more linear structure that coding novices and/or Word users might be comfortable with (a la Markdown). It also increases the chances of unmatched tags, or simply forgetting to wrap section tags.

I'll experiment with making the PubCSS markup compatible with Paper Now, and see if I run into any issues with my themes while doing that.

from pubcss.

hubgit avatar hubgit commented on September 8, 2024

It does seems like requiring sections for every level might be too much to ask of articles authored in Markdown (and in fact Paper Now, where I'm hoping to use the PubCSS styles) only adds a single level of explicit sections.

However, the PubCSS template does already use some <section> and <figure> markup, so maybe a good compromise would be to require at least one <section> - and only apply the numbering inside <section> elements - while using the heading elements (h1, h2, h3, etc) for the counter increments and resets.

The main requirement then would be that the heading elements used (h1, h2, h3, etc) accurately reflect the level of nesting, i.e. only a single h1 (the article title), and no jumping from h2 to h4.

from pubcss.

hubgit avatar hubgit commented on September 8, 2024

Here's an implementation of that idea: master...hubgit:heading-sections

The main changes are

  • removing the <section> tags that don't have an associated heading
  • wrapping the main article content in a <section>
  • moving the article metadata into the <header>

from pubcss.

thomaspark avatar thomaspark commented on September 8, 2024

I like the changes. Having just one <section> wrap the article makes the markup even more flat and markdowny.

However, I think I prefer how in the current version of PubCSS, the heading number corresponds with the depth of numbering: h1 for 1, h2 for 1.1, h3 for 1.1.1. Starting each new section with h2 could be counterintuitive, although I understand the reasoning behind it.

I also like that all of the metadata is tidily contained in <header>.

There was one problem I ran into with this. A margin-bottom needs to be set on .authors. No problem if there's only one row of .authors. But when a second .authors is added (like here), there needs to be a way to select only the last .authors to apply the margin to.

If <header> only contains author info (which is the case right now), I can use header > :last-child. But that no longer works if additional metadata like keywords and copyright follows it. One idea could be to give .authors a unique tag, and select with :last-of-type. It'd be a mild abuse of tags, but forgivable.

from pubcss.

Related Issues (18)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.