35

Timeline

Date What was changed?
Sep 23, 2020 It took me longer than I wanted, but I’ve got some updates for you on our s-prose component. You can see the pull request with my thinking over at our design system’s repo. It does the following:
  1. Spreads s-prose headers out from paragraphs for better grouping.
  2. Tightens up s-prose paragraphs a bit, and made sure spacing under headings are more consistent consistent.
  3. Replaces all s-prose margins internal to the component with a CSS variable var(--s-prose-spacing) so our users can more easily tinker with it in their browsers and user scripts.
  4. Kills trailing margins in s-prose. You can see some examples of content at our Stacks documentation.
Aug 27, 2020 I’ve split the difference between the original 1.3 line-height and the proposed 1.6 line-height. We’re now at 1.5, with additional refinements to spacing between elements. I’ve also reduced line height within code blocks back to near the original value.
Aug 27, 2020 This is now live

We’re doing a bit of refactoring on our post formatting. Currently, we apply a single class with both layout and styling called .post-text. Our first goal is to separate layout from our text styles. Simple enough!

However, our current post styling has a few missing spots and areas for improvements. Using our design system as a sandbox, we’ve beefed up our styling and created a new component called .s-prose. It’s designed to offer styling for everything the CommonMark spec allows. This should allow us to add Stack Overflow-flavored styling anywhere we need to consume Markdown—questions and answers, of course, but also things like user profiles.

Our .s-prose component adds:

  1. Proper formatting for definition lists

  2. Further header support and better spacing there

  3. Additional blockquote refinements.

  4. Refinements for revealing spoilers. We now reveal this on click / tap for a more consistent experience across devices—fewer accidental reveals as well, since it’s no longer a :hover interaction. Clicking again does not hide the spoiler. We also now add a badge to the top right corner. You can see how these work on our design system documentation. It looks something like this:

    This is a spoiler
    It has two lines

  5. General refinements to spacing including nested lists, images within lists

  6. Sizing variations for different contexts. We offer xs, sm, and md variations of the .s-prose component.

As with everything, our prose component is a work in progress. We think we’ve got a heck of a start to a reusable component. We plan on going live with the new component network wide on Thursday, August 27, 2020. We’ll edit this post if that changes.

If you see something funky, let us know. Some things are intended but might feel like regressions—images have a slightly different baseline—but others may have slipped through the cracks.

41
  • 23
    Question - what site(s) will this be tested on?
    – Aibobot
    Aug 25, 2020 at 17:45
  • 21
    @Aibobot We can't toggle this changeset on and off per site, so it'll go live across the network once the PR is merged and deployed. We did do extensive internal testing, so fingers crossed y'all shouldn't see any actual bugs.
    – Adam Lear StaffMod
    Aug 25, 2020 at 18:59
  • 8
    @SonictheMaskedWerehog Yep, that should be fixed by this new component. Aug 25, 2020 at 20:41
  • 5
    @AdamLear Thanks! Also, user profiles seem to use an outdated version of SE CSS which doesn't contain many of the changes made to posts, e.g. links aren't underlined yet, and spoilers don't show permanently when clicked. Will those inconsistencies also be fixed by this update? Aug 25, 2020 at 21:10
  • 10
    Also, I don't see underlines on links in your design document. Is that being reverted? Aug 25, 2020 at 21:11
  • 57
    Did the line-height of SO just change?
    – j08691
    Aug 27, 2020 at 14:46
  • 10
    I'm not deleting comments but if you have an ask or a bug, please put it as an answer, not a comment. Comments are not a great place to build an argument and make a point - you can't get specific feedback and the comments can only be upvoted, leaving an unbalanced view of the suggestion. For all of these reasons, please, write a thought-out explanatory answer.
    – Catija
    Aug 27, 2020 at 15:24
  • 66
    Can you turn this into a preference? I prefer what we had before
    – Foo
    Aug 27, 2020 at 15:27
  • 4
    I am not sure of the impact of this change, but IMNSHO the CORRECT spacing between numbered list items is 0. If I think items need extra space I would insert it myself. The current layout is difficult enough on a small screen without even MORE wasted space.
    – Milliways
    Aug 28, 2020 at 11:47
  • 10
    The spacing looks excessive on my Android device. Lots of scrolling for nothing.
    – henning
    Aug 28, 2020 at 12:00
  • 41
    "We’re doing a bit of refactoring on our post formatting." Please don't overload the term refactoring like this. You're making behavior changing refinements, which is great. Refactoring means making behavior preserving refinements to the source. Having the distinction in our jargon is useful, but we're going to lose it if we're not careful. Thanks! Aug 28, 2020 at 13:42
  • 4
    @WeatherVane There were no changes to the bounty link in this update.
    – Adam Lear StaffMod
    Aug 28, 2020 at 19:20
  • 22
    What evidence is there that such wider spacing is relevant in technical writing & in code with their high information density & slower comprehension, which is the situation in SO/SE? There is an enormous difference between such writing & normal prose.
    – philipxy
    Aug 30, 2020 at 1:09
  • 7
    please keep the increased spacing, it makes it easier to read for people with less than perfect vision (eyesight). which is a very welcome change, an accessibility improvement.
    – Will Ness
    Aug 30, 2020 at 22:27
  • 4
    The line-height change just hit SO -- and it is horrible. No more than 1.1 please, or make this an option to be set in the user-profile. The new line-height is quite hideous. Sep 1, 2020 at 1:48

31 Answers 31

1
2
2

Can we have the spoilorized text be lighten but not hidden when we are creating a post, editing a post, or in review queues?

3
  • Basically whenever you are in a review queue? Why specifically suggested edits?
    – 10 Rep
    Sep 1, 2020 at 1:15
  • @10Repisn'tactiveonMSE I changed it. Sep 1, 2020 at 1:23
  • 1
    Note that review queues don't respect ignored tags... yet. I'd be hesitant to auto-reveal spoilers on review because this could actually spoil someone. When creating or editing a post though, should be fine.
    – Robotnik
    Sep 1, 2020 at 2:06
1
2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .