RSS Feed
  0 users browsing Programming. | 1 guest  
Main » Programming » Typesetter.css, make semantic HTML readable
Pages: First Previous 1 2
Posted on 19-08-20, 08:26 am
Ask me about SCI

Post: #350 of 400
Since: 10-29-18

Last post: 12 hours
Last view: 2 hours
Why are we badly discussing storage technology in a thread about a CSS design?
Posted on 19-08-20, 08:40 am
Custom title here

Post: #649 of 695
Since: 10-30-18

Last post: 15 hours
Last view: 16 min.
User is online
Gotta keep the CSS files somewhere.

Just in case you thought something could EVER be straightforward, and needed someone to dash your hopes across the rocky shoals of harsh reality.
Posted on 19-08-20, 11:07 am

Post: #192 of 199
Since: 10-29-18

Last post: 4 days
Last view: 11 hours
Posted on 19-08-20, 11:49 am
Don't. Even. Blink.

Post: #351 of 400
Since: 10-29-18

Last post: 12 hours
Last view: 2 hours
Personally, I like what Typesetter is all about. Even if I prefer darker themes, actually. If nothing else it ought to be trivial to make a dark take on Typesetter 🤷‍♀️

And this coming from the guy who'd rather not use any CSS at all.
Posted on 19-08-20, 12:07 pm
Full mod

Post: #324 of 340
Since: 10-30-18

Last post: 4 days
Last view: 1 day
Posted by sureanem
The Financial Times use #33302e / #fff1e5. That looks very nice, I think, although it shouldn't be ideal - reddish text on salmon background isn't exactly optimal from what I gather.

That looks pretty nice, although I'd feel a bit awkward straight-up stealing somebody's colour-scheme unless it was deliberately made available, like Solarized.


Yeah, somebody else mentioned [paragraph indent/spacing]. I'll definitely change it.

Which one will you get rid of?


I got rid of the blank lines between paragraphs; the demonstration site is updated. I also made a bunch of other changes following the example and instruction of the typography book I'm following:

- The book has all headings the same size as everything else, with a single line-break before and after, but makes them fancier in various ways (all-upper-case, small-caps, italic)
- The book doesn't use underlines or outlines for anything other than table headers and footers
- The book doesn't use shaded backgrounds or bold text

Unfortunately, I don't think it's practical or useful for me to follow the book exactly.

- Although the book's headings don't stand out very much, it's still easy to navigate the book because it has section titles printed in the left and right margins of every page so you can just flick through. You can't (easily) do that in HTML, and you can't flick through it the same way. The closest thing is quickly scrolling through, and bold headings definitely help there.

- The book is like 90% prose, so the line spaces around headings and the like really stand out. In comparison, the kind of documents I write tend to have a lot of bullet-point lists and code-blocks which add a lot of whitespace of their own, and heading whitespace isn't as notable.

- The book has the privilege of a rigid and well-defined document structure, but although there's an official algorithm for building an outline of an HTML document, it's not available to CSS, so I just have to do my best. Ideally I'd use <h1> for the document title, <h2> for sections and <h3> for sub-sections, but Markdown only makes <h1> and <h2> pleasant to use, so either I use h2 for sections and lose subsections, or have the document title look the same as a section heading.

So I'm not *entirely* happy with the way the stylesheet looks now, but I can't think of any changes that are likely to improve *every* semantic-markup HTML document - it seems like every improvement for one document makes a different document worse.

The ending of the words is ALMSIVI.
Posted on 19-08-20, 02:22 pm (revision 1)
Stop typing, start thinking.
Post: #590 of 630
Since: 01-26-19

Last post: 1 day
Last view: 7 hours
[deleted]

Yeah anyway, I digress.

Posted by Screwtape
Posted by sureanem
The Financial Times use #33302e / #fff1e5. That looks very nice, I think, although it shouldn't be ideal - reddish text on salmon background isn't exactly optimal from what I gather.

That looks pretty nice, although I'd feel a bit awkward straight-up stealing somebody's colour-scheme unless it was deliberately made available, like Solarized.

Black on salmon-pink is standard for such newspapers, and Pantone have described it as "bisque," which is a perfectly standard X11 color (#ffe4c4), if a bit dark. Ironically, Pantone's "bisque" is completely off.

So try taking the average between X11 bisque and white (#fff1e1), this is almost identical to newspaper salmon pink (#fff1e5) while being A-OK to use.

I got rid of the blank lines between paragraphs; the demonstration site is updated. I also made a bunch of other changes following the example and instruction of the typography book I'm following:

...

Ideally I'd use <h1> for the document title, <h2> for sections and <h3> for sub-sections, but Markdown only makes <h1> and <h2> pleasant to use, so either I use h2 for sections and lose subsections, or have the document title look the same as a section heading.

So I'm not *entirely* happy with the way the stylesheet looks now, but I can't think of any changes that are likely to improve *every* semantic-markup HTML document - it seems like every improvement for one document makes a different document worse.

Don't you just add more pound signs?
# ... # - h1
## ... ## - h2
### ... ### - h3

A minor gripe is the aggressive hyphenation. I don't think code should be hyphenated, for instance. "src/typeset- \n ter*.less" looks completely wrong, to me.

Also, I think the code should have a bit more spacing. The exclamation mark after "typesetter.css" is a bit too snug, at least to me.

On my machine (1000x600), the navigation on the demo page gets cut off, about half of the "N" in "Navigation" is hidden and I get an ugly horizontal scroll bar (which only goes to the right). It looks like it's just at the breakpoint, but it probably shouldn't be so snug anyway. Maybe add a margin-left to the <nav>?

EDIT: deleted OT

There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-20, 03:11 pm
The Thirteenth Doctor

Post: #352 of 400
Since: 10-29-18

Last post: 12 hours
Last view: 2 hours
Posted by sureanem
Don't you just add more pound signs?
# ... # - h1
## ... ## - h2
### ... ### - h3
Why would you bring Markdown into this? Are you trying to throw chaff to distract from how most of your post is off-topic?

Because the topic is Typesetter.css, not disk drive technology.
Posted on 19-08-20, 03:26 pm
Stop typing, start thinking.
Post: #592 of 630
Since: 01-26-19

Last post: 1 day
Last view: 7 hours
Ideally I'd use <h1> for the document title, <h2> for sections and <h3> for sub-sections, but Markdown only makes <h1> and <h2> pleasant to use, so either I use h2 for sections and lose subsections, or have the document title look the same as a section heading.

I was just curious about this statement here.

There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-20, 04:07 pm
Censor Decoy

Post: #353 of 400
Since: 10-29-18

Last post: 12 hours
Last view: 2 hours
Right. So "### blah ###" is unpleasant... but there you are with a minor gripe yourself right after.
Posted on 19-08-22, 08:33 am
Full mod

Post: #327 of 340
Since: 10-30-18

Last post: 4 days
Last view: 1 day
Posted by sureanem
Black on salmon-pink is standard for such newspapers

This surprises me. The only similar publications I can think of are Bloomberg and the Australian Financial Review, and neither of them are pink. In fact, the article you link says "The paper, first published in 1888, tinted its pages in 1893 to distinguish itself from its rival", so I'm guessing it's not actually a standard for such newspapers after all.

Ideally I'd use <h1> for the document title, <h2> for sections and <h3> for sub-sections, but Markdown only makes <h1> and <h2> pleasant to use

Don't you just add more pound signs?
# ... # - h1
## ... ## - h2
### ... ### - h3

So, Markdown supports two different heading syntaxes: ATX headings with the leading hashes (inherited from ATX), and Setex headings (inherited from Setext), which look like this:


Heading 1
=========

Some text goes here.

Heading 2
---------

More text


As a purely personal opinion, I love Setext headings and hate ATX headings. Setext headings *look* like headings, even in plain text, while ATX headings sometimes get confused with hashtags. A level-1 Setext header uses more "ink", so it looks more important than a level-2 Setext header, while a level-1 ATX header looks *less* important than a level-2 ATX header.

This kind of heading numbering stuff is a common problem for HTML documents, so I kind of assumed Markdown processing tools would have a "renumber heading levels" option so you could render Markdown to HTML and have the heading levels properly nested. Unfortunately, neither Python-Markdown or even Pandoc seem to have such a feature.

A minor gripe is the aggressive hyphenation. I don't think code should be hyphenated, for instance. "src/typeset- \n ter*.less" looks completely wrong, to me.

Letting inline code stretch rightward forever is ugly, force-wrapping it with a hyphen is (potentially) misleading, and force-wrapping it without a hyphen is also (potentially) misleading). I guess we probably shouldn't insert glyphs into what is supposed to be a verbatim string, though.

Also, I think the code should have a bit more spacing. The exclamation mark after "typesetter.css" is a bit too snug, at least to me.

That's entirely up to the fonts your browser has chosen, I'm afraid. It probably defaults to Times New Roman and/or Ariel; I recommend reconfiguring your browser to something nicer.

On my machine (1000x600), the navigation on the demo page gets cut off, about half of the "N" in "Navigation" is hidden and I get an ugly horizontal scroll bar (which only goes to the right).

I'm using a CSS media-query to move the <nav> and <aside> elements to the margins, when there's enough room for them. Unfortunately for me, browsers define the "viewport width" to include the width of the vertical scrollbar, even though that space isn't available for my content. I'd changed the media-query to add a bit of safety margin, so the wide layout should only be used when you really, truly have enough room for it... unless your browser's default text size is smaller than your operating system's scrollbar size.

The ending of the words is ALMSIVI.
Posted on 19-08-22, 09:24 am
Custom title here

Post: #650 of 695
Since: 10-30-18

Last post: 15 hours
Last view: 16 min.
User is online
Posted by Screwtape

That's entirely up to the fonts your browser has chosen, I'm afraid. It probably defaults to Times New Roman and/or Ariel; I recommend reconfiguring your browser to something nicer.
Arial.
Ariel is a precocious teenage girl who lives where it's better, down where it's wetter, under da sea.

Just in case you thought something could EVER be straightforward, and needed someone to dash your hopes across the rocky shoals of harsh reality.
Posted on 19-08-22, 05:11 pm
Stop typing, start thinking.
Post: #595 of 630
Since: 01-26-19

Last post: 1 day
Last view: 7 hours
Posted by Screwtape
Posted by sureanem
Black on salmon-pink is standard for such newspapers

This surprises me. The only similar publications I can think of are Bloomberg and the Australian Financial Review, and neither of them are pink. In fact, the article you link says "The paper, first published in 1888, tinted its pages in 1893 to distinguish itself from its rival", so I'm guessing it's not actually a standard for such newspapers after all.

It is. El Economista (MX), Handelsblatt, and Het Financieele Dagblad are all printed in salmon-pink, for instance. Likewise, the business (and sports) sections of other newspapers tend to be in pink.
It's entirely possible the Financial Times started the practice, though. They are after all the gold standard, and there's no shame in imitating a gold standard.

So, Markdown supports two different heading syntaxes: ATX headings with the leading hashes (inherited from ATX), and Setex headings (inherited from Setext), which look like this:

...

As a purely personal opinion, I love Setext headings and hate ATX headings. Setext headings *look* like headings, even in plain text, while ATX headings sometimes get confused with hashtags. A level-1 Setext header uses more "ink", so it looks more important than a level-2 Setext header, while a level-1 ATX header looks *less* important than a level-2 ATX header.

I seem to recall people writing non-Markdown ATX-style headings in forum posts many years back. But yeah, to each their own.

Letting inline code stretch rightward forever is ugly, force-wrapping it with a hyphen is (potentially) misleading, and force-wrapping it without a hyphen is also (potentially) misleading). I guess we probably shouldn't insert glyphs into what is supposed to be a verbatim string, though.

You could force-wrap it if the line alone exceeds the line length, and else have it wrap before starting the code block if at all. I don't know if CSS supports this, though.

That's entirely up to the fonts your browser has chosen, I'm afraid. It probably defaults to Times New Roman and/or Ariel; I recommend reconfiguring your browser to something nicer.

Alas, not possible. It's using standard web fonts, which means Arial since it's marked sans-serif.
But for instance GitHub doesn't have this problem. There it gets "padding: .2em .4em;" and "font-size: 85%;". For word-wrap, it uses break-word for everything. I think that looks nicer, although the shading might not be too professional.

I'm using a CSS media-query to move the <nav> and <aside> elements to the margins, when there's enough room for them. Unfortunately for me, browsers define the "viewport width" to include the width of the vertical scrollbar, even though that space isn't available for my content. I'd changed the media-query to add a bit of safety margin, so the wide layout should only be used when you really, truly have enough room for it... unless your browser's default text size is smaller than your operating system's scrollbar size.

Yeah, that looks much better. Apparently it's to prevent an infinite loop, which does make sense. Kind of like how you can get some really fun stuff to happen with :hover and animations.

As an aside, I wonder if that's Turing-complete. They already managed to get it Turing-complete if you repeatedly clicked somewhere, but could you accomplish the same thing by just hovering over an element?

There was a certain photograph about which you had a hallucination. You believed that you had actually held it in your hands. It was a photograph something like this.
Posted on 19-08-23, 12:14 pm

Post: #193 of 199
Since: 10-29-18

Last post: 4 days
Last view: 11 hours
Posted by CaptainJistuce
down where it's wetter

Seeing that in written form just now has changed that song forever for me.
Posted on 19-08-25, 06:20 pm

Post: #59 of 59
Since: 10-29-18

Last post: 23 days
Last view: 2 days
This thread makes me deeply glad I ditched the webdev industry.

https://en.wikipedia.org/wiki/List_of_Screw_Yall
Pages: First Previous 1 2
Main » Programming » Typesetter.css, make semantic HTML readable
Yes, it's an ad.