One of the things people have said they would like on Cohost is a way to do that old Twitter joke where you type up to the word limit so the tweet ends in a cut-off word. People have brought up a few ways to do this on Cohost, the easiest one being posting just a headline, which has a 140 character limit, but I haven't seen anyone suggest what I think is a much more interesting option, which is to use CSS to produce a negative margin so the frame of the post itself cuts off the text. This has several advantages, the main one being that it looks like the website itself is cutting you off. The main disadvantage is that screen readers aren't affected and won't communicate the visual joke very well. If you're using a screen reader, this part of the post has long since gone out of the frame, so sighted people can't see it. It can be just a little secret between me and you.
- he/him
fat queer fox, enjoyer of music, hoarder of shiny discs, sonic and racing game speedrunner, hater of cars and streaming services
in reply to @thecommabandit's post:
If anyone wants to use this, I did it like this:
<p style="margin-bottom:-3.5em;">Text goes here, though you might have to adjust the margin size to get it right</p>
It also looks way better if you don't use tags
EDIT: @eladnarra has pointed out that screen readers keep reading the text after the cut-off. For accessibility, I would suggest that the text after the cut-off includes a brief explanation of the gag, plus a secret joke just for people who use screen readers.
And if you want to be able to use markdown inside it for your italics or whatever, I think you can do:
<div style="margin-bottom:-3.5em;">
and then a blank line, and then all of your post, then another blank line, before
</div>
i think you can wrap text after a certain point in a <span style=speak:none>? though i guess the point you choose will not necessarily be where the text stops for sighted readers?
another option is -webkit-line-clamp (nonstandard but widely supported: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
though i think yours is much better
i love how webkit line clamp uses some older version of the css flex model and just like... every browser has to support this now
youtube uses webkit line clamp. google uses webkit line clamp. there is no alternative to it.
glad you like it! i discovered it entirely by accident when trying to format a quote cos i didnt like how markdown did it!
FYI: Unfortunately it doesn't work if you're using a screen reader - I just tried with Talkback on my phone, and it read the cut-off text.
I figured that might happen, I've edited the post to point this out in the cut-off part, can you give it a try and see if it works?
Yup, it works (at least with TalkBack)!
Since I'm not a screen reader user & don't do any user testing, however, I can't say whether or not that's a workaround people would prefer - hopefully as Cohost expands some folks using assistive tech will be willing to comment on CSS crimes with how they'd like things like this conveyed. 🙂
i did something structurally similar here by making the manually-placed show-more button look like it was an automatic length-based one https://cohost.org/rc/tagged/behind%20the%20game's
thanks! i have almost no practice working in box model so negative margin-bottom is the trick i needed to make a dumb joke post of mine finally work right
On mobile chrome, if you long press the text, you can select up to the bottom and see all the text :3
you can also simply double click the box to select all text then copy paste into nopepad and then it'll no longer be a secret between me and you so be aware that the cut off text can always in fact be read
i have been sent on a mission by our mutual friend blindmusiclover to tell you, specifically, that they appreciate the joke here (they're stuck in activation queue hell)