TiddlyWiki / TiddlyWiki5

A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.
https://tiddlywiki.com/
Other
8.02k stars 1.19k forks source link

Request: Wikimarkup for Tab/multispace #4398

Open twMat opened 4 years ago

twMat commented 4 years ago

I wish to type "equidistant spaces" in the editor comparable to how it's done in word editors using the tab key. Multiple rows would result in the words aligning in columns.

Ideally, the space should show both in view and edit modes. Perhaps they don't have to appear in the same way though - compare to using | to create (equidistant) tables.

Note that it IS possible to have tab characters show properly in the editor... but it unclear how to produce them there by other means than copy-pasting from some other text editor. And in view mode they're squashed.

Directly using the UTF8 variants doesn't seem to work (...but being forced to type complex strings is not ideal anyway).

One idea might be to have three common blank space characters in a row be converted into a large tab space.

pmario commented 4 years ago

IMO - no

There is a reason, why user whitespace is ignored by browsers. CSS has to be used for styling. ... What if you edit your text using 3 columns, but there isn't enough space on the screen to show it. ...

IMO it should be done with CSS only. examples will follow

twMat commented 4 years ago

@pmario - no examples needed.

If the purpose with wikitext is to "allows you to focus on writing without a complex user interface getting in the way" then the user must not be bothered with having to do @@.... now what was I supposed to typer here?

IMO we are repeatedly missing a distinction between the acceptable level of mess to do permanent stuff like various code constructions vs. making notes and writing freely. For the latter, the threshold for what is acceptable is substantially lower.

twMat commented 1 year ago

bump

Jermolene commented 1 year ago

Hi @twMat if the goal of including these "equidistant spaces" is to cause the text after them to line up vertically, then perhaps the closest is the existing table syntax, perhaps with some additional CSS to to hide the borders.

Otherwise, perhaps you could give some illustrations to show what you're thinking of?

twMat commented 1 year ago

@Jermolene - thanks for asking.

There are actually three "behaviours". I'd be happy with any but in order of preference, these are:

I don't know how the keyboard tab key does what it does in a text editor, but the ideal would simply(?) be to make this key work in the editor (currently it shifts focus from the editor) and have the character display as a wide space also in view mode. That would also make is simple to indent code (instead of using multiple space characters).

Regarding styled tables - I guess the output could be sufficient, but a complex wikitext syntax along the lines of @@.somestyle | ..| ... @@ is just too cumbersome to be useful in practice.

Here are some examples of what I want to be able to do. These are made with a text editor:

image

Peeking at the hidden characters in, for example, that last "table" reveals it is not a table (as indicted by the double arrows) but rather inserted spaces to create fixed distances from the left margin:

image

A particularly common use case is seen in the first example above, i.e a simple indentation. Apparently we're not supposed to use : (i.e a <dd> element) without the ; (<dl>) but often you just want a quick but proper indentation.

So, I'm requesting some simple wikitext syntax for this; if not the tab key, then a simple marker/tag to signify a space that, in viewmode, displays like when "tab" is clicked in a regular text editor. Any wikitext should ideally not wrap the segment (like e.g //italics// or ''bold'' do).

The third alternative would be some simple syntax that inserts a fixed width space between the words, like so:

image

This could also be used for indentation but not for table like appearances with equidistant columns. Maybe there could be a wikitext mark for &emsp; which does produce a space (albeit still narrow).

pmario commented 1 year ago

Regarding styled tables - I guess the output could be sufficient, but a complex wikitext syntax along the lines of @@.somestyle | ..| ... @@ is just too cumbersome to be useful in practice.

I think you mean:

|somestyle tc-max-width tc-table-no-border|k
| 1) square | 2) cycle | 3) triangle | Answer: _ _ _ _ _ _|
---

As far as I can see a table would work well for this. The only problem is the multi-line text in "Fact:" ... but the explicit formatting breaks down on small screens. So the <br> linebreaks should not be there anyway.

|somestyle tc-max-width tc-table-no-border|k
| 1) square | 2) cycle | 3) triangle | Answer: _ _ _ _ _ _|
|>|>|>| <hr> |
|Misunderstanding: |A Jacket warms your body.|>||
|^Fact: |A Jacket is a poor conductor of<br>heat so the heat radiation from<br>your body...|>||
|>|>|>| <hr> |
|>|Download by clicking the button|[Button] ||
|>|>|>| <hr> |
|>|>|>|<<toc HelloThere>> |
|>|>|>| <hr> |
|Bobby |Joanna |Joe | |
pmario commented 1 year ago

The equidistant text is a bit trickier, but can be done with display: flex. See video explanation at: https://www.youtube.com/watch?v=u044iM9xsWU

Hardcoding distances does not make any sense. We need to be dynamic because our stuff should also work on small screens.

<style>
.xx {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;

/* remove the list styles */
  margin: 0;
  padding: 0;
  list-style: none;
}

.xx li {
  flex-grow: 1;
  flex-shring: 1;
}
</style>

@@.xx
* This
* has
* an
* equidistant
* space
* between
* each
* word
@@
twMat commented 1 year ago
As far as I can see a table would work well for this.

I appreciate your suggestions @pmario - but no a table would not work well. Simple indentations, or to separate some words, or put them into columns is just too ubiquitous for full table constructs. Keyboards have a designated tabulator key simply because "tabs" are useful and I wish TW could recognize this. TW is primarily a designed to be a personal note-taking tool, not a tool to create public websites where it may be justified to bother with complex structures to achieve simple things. I suspect users currently settle for less than what they'd really want by just ignoring the matter. Or, as I occasionally do, insert multiple &nbsp; (which really also is too clunky but I've managed to memorize that command and for lack of a real solution...)

The optimal solutions from a users p.o.v, and without consideration to side effects (such as backward comp. issues) would be these:

  1. The actual tabulator key ↹ works like it does in common text editors. This is optimal because it behaves like people know from text editors and because it appears the same in view and edit mode. And it would improve indentation (and thereby readability) when coding directly in TW.
  2. A single, or repeated, easy-to-remember-and-type character comparable to m-dash in wikitext (´---´). To me, this approach sounds very doable.
    ...actually, just like the m-dash becomes a <hr> if typed on a single line, couldn't e.g three common space characters in a row become a fixed distance? Or perhaps three underlines (´___´). This would at least accommodate the last "behaviour" outlined in my previous post.
  3. Some "command" e.g These<<tab>>words<<tab>>are<<tab>>spaced<<tab>>out. This borders on too cumbersome but passes IMO. (If custom html elements could accept self closing tags, then something like <space/> would also be sufficient, but.)

...and, as noted, the optimal would be if these "characters" show the succeeding text at a fixed distance from the left margin. But otherwise that they're just converted to a fixed distance effectively pushing the rest of the text to the right.