CSS fun: edit-text textarea, lined styling

Tips & Tricks
#1

Just a fun little bit of CSS:

<style>
.lined {
  display: block;
  font-size: 20px;
  line-height: 30px;
  background-image: linear-gradient(lightblue 2px,transparent 1px);
  background-size: 100% 30px;
  background-attachment:local;
  width:100%;
  min-height:300px;
}
</style>
<$edit-text field="this_text" tag="textarea" class="lined"/>

Screenshot 2021-12-03 12.51.25 AM

4 Likes
#2

Ah, fun indeed. I had not considered using a background-image in an editor.

…and this makes me realize it should be possible to annotate on top of images then! It is not optimal because I assume the image resizes in a way that the text doesn’t but maybe there’s some solution to that.

#3

Very nice!
You may want to move this topic to the Tips & Tricks category. IMO it would be a nice topic there.

#4

Although I really don’t like admin folk messing with post contents/titles (admin messing with these things impacts my ability to find/process stuff), tagging is to me perfect for admin folk to mess with…

I don’t use tags to find stuff or identify stuff, because they aren’t helpful to me at all. I ignore them. So please, admin, feel free to set the tag(s) as you deem appropriate.

#5

It’s not a tag thing, @Charlie_Veniot, it’s an edit of the category

image

I done gone done it init. :upside_down_face:

#6

Tag, category, whatever. Po-tay-to, po-tah-to.

I know how to set them, but I don’t bother because the choice of category often makes no semantic sense to me.

To me, this does not qualify at all as a tip. Maybe as a use-case for some tip.

Meh.

#7

You may also be interested in kookma livenote!

Live Notes — an experimental live note taking (tiddlyspot.com)

image
image1235Ă—834 35.5 KB

1 Like
#8

And that makes zero sense to me in a thread that is now categorised as “Tip & Tricks”.

And doesn’t really add much to the spirit I kind of tried to indicate in the subject line “CSS fun”.

And folk wonder why I have cognitive challenges with TiddlyTalk …

So frigging chaotic. Cognitive overload. So much work, so little fun.

1 Like
#9

It shows another example of adding background image to an edit widget!
If you do not like it, you can ignore the message! But it is not friendly to answer in such a way you did here!

#10

That’s just Charilie’s MO. Reminds me a bit of Marvin…

:slight_smile:

#11

Hey I don’t mean to offend, I just feel like I’m getting cognitively hen-pecked here.

  • Asked to set the category to something that makes no sense to me
  • told how to set that category when I indicated I really prefer let somebody else do something that makes no sense to me
  • finding this thread no longer making any sense when I thought it was just an opportunity to discuss a fun bit of CSS
  • getting a note about a plugin that is perfect for folk who don’t want to play with CSS, when I was thinking this was about having fun with that bit of CSS

And I’m already continuously frustrated by cognitive over-stimulation via a forum product that is a really cognitive pain to use.

I keep trying, keep needing to get away from this to recuperate, then come back after some rest.

I’m obviously due for another break, because I keep getting annoyed and agitated by the medium.

Stubborn me, I should know when to give up.

#12

That’s pretty amazing! Now if you could only make the title interactive. Then it could be a post-it note replacement.

It may be a false memory, but I feel that I’ve seen something like this several years back, possibly even TWC, and maybe with yellow “paper” .

#13

@Charlie_Veniot thanks for sharing this;

I just had a little play with this and added the additional styles to your lined class

word-break: normal;
word-wrap: break-word;
white-space: pre-wrap;

Then placed my text in a div;

<div class="lined">
mytext
</div>

This accommodates free hand text very well, producing line feeds where you expect. This is useful as is.

However Headings and paragraphs the alignment with the lines starts to wander.

I imagen some additional CSS could redefine the line hights to a standard so that this remains consistent even with wikitext.

1 Like
#14

Wow! Awesome trick. Does this take up a lot of memmory? I try to avoid importing images because it takes up too much memmory

#15

Sorry to muddy the discussion further @Charlie_Veniot (it is a cool bit of css).

@Mark_S there is

http://stickynotes.tiddlyspot.com/

For a bit of post it style goodness.

1 Like
#16

No worries. I should know better than to be participating in busy forums.

I don’t operate well in anything that has too many people, too many topics, too many distractions: too many attention-grabbers (when everything is interesting) to process when attention-deficiency disorder is too pronounced.

A pretty cool community for an awesome product, I can’t help but stubbornly keep trying. Maybe in very small doses…

#17

I just revisited stickynotes, changing the svg’s width and height to 1em allows the notes to blend into the text. That demo wiki is TW 5.1.9 and sticknote works for me on Tiddlywiki.com v 5.2.1 - we are so lucky to have such backward compatibility.

1 Like