ZTree.com  | ZEN  | About...  

 Index   Back

It's a question of style...   [OT]

By: Martijn Coppoolse   Homepage   Voorburg, NL  
Date: Feb 27,2019 at 05:43
In Response to: It's a question of style... (John Gruener)

> > Or you could include this bit in each of your replies (note
> > that the extra spaces are important):
> > .posting { max-width: 40em; }
>
> This is great info Martijn. Thanks. I greatly appreciate your tips.
> I've been playing with this now for a little while (and apologize to
> anyone getting RSS feeds of all my test posts).

You’re welcome, I enjoy playing around with this as well... 8-)


> First I discovered that no matter where in the posting you place this
> script, it applies to the entire post.

Yes, the so-called ‘query’ ".posting" means “apply this style to every element with class='posting'”. Since the max-width limits the width of the post, everything the latter contains (i.e. the post's contents) will be limited as well, by default.

The quoted lines are embedded in <span class='citation'> (which is how they’re made grey and italic), so they can be targeted specifically.

Note that the post preview page doesn’t embed the citations, though, so the only way to test that is by actually submitting a post.


> Therefore if the 'em' is too small it breaks up the included > text lines
> of the post to which you're responding.

Ah, yes. There’s the problem with inserting hard line breaks again.

An easy solution could be to make the cited lines not wrap:

<style >.posting { max-width: 40em; }</style >
<style >.posting .citation { white-space: nowrap }</style >


But that would mean they also wouldn’t wrap on small screens. Unless that style rule is only applied for larger screens. Hm...

<style >.posting {max-width: 40em;}</style>
<style >.@media(min-width: 25rem){.posting .citation{white-space:nowrap;}}</style >


This last set of rules appears to work fine on both my desktop and my phone; but I have Gentium set as default browser font, which is fairly narrow, especially when using italics. YMMV.

I’m applying it to this post, for testing.

Perhaps some explanation is in order:

  • .posting is applied to every element with class 'posting';
  • .posting .citation is applied to every element with class 'citation' anywhere inside an element with class 'posting'
  • all rules contained in the braces following @media(min-width:25rem) will only be applied if the condition min-width:25rem is met. In short, when the width of the screen is 25 rems or larger.
  • What’s rem now? That’s the Root Em unit; i.e. the nominal width of a capital M in the root element’s font and font size. The root element is the HTML document’s body.
(You may have noticed that the line wrapping stops above this; that’s because the posting element is a <p> paragraph element, which is a block element that is automatically broken up whenever another block element is introduced. The enumerated list above is also a block element... :-\)

> The forum response window appears to break these lines at
> about 75 characters. (I'm not sure if this is dependent on the browser
> or the font being used, but it's what I see the forum doing in Firefox.)
>
> So I was trying to find the best 'em' value when responding to
> another's post, and settled on an em of 45. I use Courier New as my
> default browser font, so again, I'm not sure whether this is browser or
> font dependent.

The forum software runs on the server, and has no idea of font or font size in the browser. It only has the post’s textual contents (including any HTML codes it contains), and tries to construct a reply based on that. So I’m assuming it merely counts characters to wrap the lines.

Apart from whitespace normalization, it does have some rudimentary parsing to be able to skip HTML elements in the reply, but that isn’t very robust; if the post contains HTML that is more than a very simple tag — for example, if the HTML tag contains quoted attributes (which is merely good practice) — it will tend to stumble, and sometimes include the HTML attribute in the cited text.

The reply mechanism looks like it’s inspired by mail clients, so 75 characters sounds logical. (The older e-mail standards suggest wrapping plain text e-mails at 72 characters, to prevent any line exceeding 80 characters —accounting for some control characters, and the CR/LF at the end— so that it would always fit on the 80-column consoles of the time).


> For everyone's info, the forum script purposely does not apply a font
> to the postings. This is so you can set your browser to the default font
> of your choice when a web page font is not specified. This option is
> available in IE, Chrome and Firefox, but not in Edge.

That’s something I’ve always liked. The end user decides what they want it to look like, instead of it being dictated by the author (who might have completely different preferences and device capabilities, or even physical capabilities, than the reader).


--
Martijn

123 views      
Thread locked
 

Messages in this Thread

 
94,382 Postings in 11,909 Threads, 347 registered users, 5 users online (0 registered, 5 guests)
Index | Admin contact |   Forum Time: Jul 17, 2019 - 4:38 pm EDT  |  Hits:28,069,550  (18,268 Today )
RSS Feed