Main » Programming » Typesetter.css, make semantic HTML readable » New reply
    Alert
    You are about to bump an old thread. This is usually a very bad idea. Please think about what you are about to do before you press the Post button.
    New reply
    Post help

    Presentation

    [b]…[/b] — bold type
    [i]…[/i] — italic
    [u]…[/u] — underlined
    [s]…[/s] — strikethrough
    [code]…[/code] — code block
    [spoiler]…[/spoiler] — spoiler block
    [spoiler=…]…[/spoiler]
    [source]…[/source] — colorcoded block, assuming C#
    [source=…]…[/source] — colorcoded block, specific language[which?]
    [abbr=…]…[/abbr] — abbreviation
    [color=…]…[/color] — set text color
    [jest]…[/jest] — you're kidding
    [sarcasm]…[/sarcasm] — you're not kidding

    Links

    [img]http://…[/img] — insert image
    [url]http://…[/url]
    [url=http://…]…[/url]
    >>… — link to post by ID
    [user=##] — link to user's profile by ID

    Quotations

    [quote]…[/quote] — untitled quote
    [quote=…]…[/quote] — "Posted by …"
    [quote="…" id="…"]…[/quote] — ""Post by …" with link by post ID

    Embeds

    [youtube]…[/youtube] — video ID only please
    Thread review
    Covarr This thread makes me deeply glad I ditched the webdev industry.
    Kakashi
    Posted by CaptainJistuce
    down where it's wetter

    Seeing that in written form just now has changed that song forever for me.
    ‮strfry("emanresu")
    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?
    CaptainJistuce
    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.
    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.

    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.
    Kawaoneechan Right. So "### blah ###" is unpleasant... but there you are with a minor gripe yourself right after.
    ‮strfry("emanresu")
    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.
    Kawaoneechan
    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.
    ‮strfry("emanresu") [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
    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.


    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.
    Kawaoneechan 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.
    Kakashi
    CaptainJistuce Gotta keep the CSS files somewhere.
    Kawaoneechan Why are we badly discussing storage technology in a thread about a CSS design?
    CaptainJistuce I think he's saying that flash drives are full of spyware and ratting him out to the KGB.

    The problem, of course, is that there is KNOWN spyware for ARM-based hard disks and as of yet no known flash drive spyware, so he's trading an unknown security fear for a known security risk.
    creaothceann
    Posted by sureanem
    They're also more expensive, which is the #1 determinant of anything

    Except for people who have the cash and want a faster system.
    - The SSD in the PC I'm currently at has an access time of 0.225ms.
    - A SSD in another PC has an access time of 0.095ms.
    - A HDD in yet another PC has an access time of 13.9ms (146 times slower than the SSD).
    - An external HDD (via USB2) has an access time of 17.6ms (185 times slower than the SSD).

    Posted by sureanem
    and by default makes them far inferior to regular hard drives

    Except that I have literally given old office machines an 'extra life' by installing a SSD. And no, they don't need more that 128GB of space. (Even 64 would've been enough, though maybe a bit tight after a while.)

    Posted by sureanem
    Performance is fine with HDD

    Except for access times. (Perhaps you have a SSHD and just don't know any better?)

    Posted by sureanem
    noise is easily dwarfed by anything else (e.g. CPU fan)

    Except for systems like my home PC that doesn't have any fan activity (CPU, GPUs, PSU) in idle. (I also have two 10TB drives in my home NAS; they're easily more audible when they're not parked than the fan.)

    Posted by sureanem
    Power is never an issue

    Except in laptops.

    Posted by sureanem
    Also, they have creepy chips inside them. Who knows if you can trust them?

    lol what
    funkyass The video part of HDMI is dvi.
    ‮strfry("emanresu")
    Posted by BearOso
    Say what!? Now I know you're trolling. If there's one advancement in computing that isn't overblown it's SSDs. The performance difference from less latency in random access is very significant. On top of that they don't make noise, consume less power, and aren't susceptible to head crashes.

    They're also more expensive, which is the #1 determinant of anything and by default makes them far inferior to regular hard drives.
    Performance is fine with HDD, and noise is easily dwarfed by anything else (e.g. CPU fan). Power is never an issue.
    Also, they have creepy chips inside them. Who knows if you can trust them? Granted, I use FDE, but it's still creepy.
    I do have one inside my laptop and it works fine, but it's bloody tiny. For that price you could have a 1TB HDD, which is far more useful.
    (inb4 "why not both" - I don't have infinity dollars)

    I wouldn't seriously throw a laptop away, but IPS and VA are objectively better than TN. It's perfectly fine if the difference just doesn't seem like a big deal to you, personally. To each his own.

    Yeah, if I had infinite time and money I would obviously buy an IPS monitor - I don't play video games much anymore, so the downsides are negligible. But at present, it feels like an utter non-issue which brings no tangible value to the table, unlike mechanical keyboards and good mice which are at least nicer to use. Although touchpads are fine when you get used to them.

    Posted by funkyass
    [Image of Fry squinting]
    Ditto.

    I have a monitor, it has DVI (both kinds) and HDMI ports. HDMI port was broken since I bought it - could have RMA'd, but I was only interested in DVI anyway. Laptop has VGA and HDMI out. Had another monitor too, a smaller VGA one. So I got a VGA <-> VGA cable, but it turned out to be too low-resolution for that one too. I'm not even sure if it works with the DVI adapter, I think I tried it and there was some sort of issue. So I'd need a DVI <-> HDMI adapter, or a better VGA cable.

    To be honest, I feel kind of like Jack here. When you buy computer hardware, you tell yourself, that’s it. That’s the last GPU I’ll need. Whatever else happens, got that GPU problem handled. I had it all. I had a monitor that was very decent. A Steam library that was getting very respectable. I was close to being complete.
    BearOso
    Posted by sureanem
    Personally, I think they're overrated, just like SSDs.

    Say what!? Now I know you're trolling. If there's one advancement in computing that isn't overblown it's SSDs. The performance difference from less latency in random access is very significant. On top of that they don't make noise, consume less power, and aren't susceptible to head crashes.

    I wouldn't seriously throw a laptop away, but IPS and VA are objectively better than TN. It's perfectly fine if the difference just doesn't seem like a big deal to you, personally. To each his own.

    Posted by funkyass


    Ditto.
    creaothceann
    Posted by sureanem
    overrated, just like SSDs

    ......
      Main » Programming » Typesetter.css, make semantic HTML readable » New reply
      Yes, it's an ad.