Text width CSS knowledge required

1

Folks,

The Question

Is there a smart css width or class I could use that is also “responsive” that can somehow combine all the subsequently mentioned variables to wrap my text automatically in such a way as to not have long, hard to read lines? but otherwise behave normally? All wikitext, even widgets should remain valid.

  • Ideally I would not have to use special markup but If I must I will, eg a block markup.

Background

I use my TiddlyWiki on a standard wide screen most of the time, I also use the “Fluid Story/Fixed sidebar” setting for maximum use of the space. In many cases this is fine, however when I am typing simple text, “prose” I like to type full sentences and paragraphs and let them flow as needed, wrapping at the end of line without forcing end of line. A blank like to indicate a paragraph etc…

The only problem with such text, free to flow within the space available is in my extra wide tiddlers stretch out in long lines. This is harder to read, having “soft” new lines regularly really assists the reading process.

Try this on a wide wiki such as tiddlywiki.com

This is a sample long line. Although with more than one sentence it quickly grows long on my default wide tiddlers, The Quick brown fox ran after the lazy dog. You can see how much harder it can be to read this way.

A new paragraph

<div style.width="60%">
This is a sample long line. Although with more than one sentence it quickly grows long on my default wide tiddlers, The Quick brown fox ran after the lazy dog. You can see how much harder it can be to read this way. This sample has a `<div style.width="60%">` which makes it much more readable.

Another new paragraph, which unfortunately ignores the blank line.
</div>

In this case on my screen, with the current zoom and style.width="60%" the contents of the div looks better but my intended paragraph breaks are not honoured.

Further 60% only makes sense in this circumstance, if I was looking at the same content on my mobile, in portrait, in smaller font, so I don’t want to hard code this. Nor do I want it to apply to the whole tiddler body, either as I may want tables and images to make use of the whole width.

Please reconsider the above question.

Your help greatly appreciated. I have being living with this “pain” for many years.

2

Add a blank line after the <div>:

<div style.width="60%">

This is a sample long line...
3

So true, but the question still stands.

4

You can create a global keyboard shortcut to toggle the $:/tags/Stylesheet tag for a CSS definition like this

title: centered-story-river
tags: $:/tags/Styleshee

.tc-tiddler-frame {
max-width: 90ch;
margin-left: auto;
margin-right: auto;
}
5

That is changing the whole tiddler frame, I just want the “selected” text or the current tiddler body to exhibit the desired behaviour.

However using 90ch in the width is great until zoomed in too much, it then overflows out side the tiddler frame rather than wrap.

There is always another CSS unit I don’t know :nerd_face:

This test seems to work well;

<div style.max-width="90ch">

This is a sample long line. Although with more than one sentence it quickly grows long on my default wide tiddlers, The Quick brown fox ran after the lazy dog. You can see how much harder it can be to read this way. This sample has a `<div style.width="60%">` which makes it much more readable.

Another new paragraph, which unfortunately ignores the blank line.
</div>

Now to find the best way to apply this or delineate such text.

6

I have long felt we need a inline delimiter, and a block delimiter that does nothing unless we apply a named class, rather than revert to the div element.

7

IMO Styles and Classes in WikiText can do this.

8

They breed in dark places. I’m certain of it.

9

Welcome to the world of responsive design! :upside_down_face: This is a technology/approach that uses HTML and CSS to define the form and style of a document so that it looks and functions well on interfaces of different sizes, or even different media (such as printed or audio described).

Two important components are media queries and some (relatively) modern HTML containers such as grid and flexbox. There are some really powerful things you can do with both of these with just a few CSS rules added in.

Most modern websites use this. If you visit a news/shopping/whatever website and play with the browser window size, you’ll see what appears to be very different content. It’s usually the same content, even the same form, styled in very different ways as the browser detects the new window size.

Compared to the flexibility of RWD, things like HTML tables, which were so widely used in the early days of the web, are generally used only sparingly today.

On a more TW-related note, I really wish (and I’m definitely not the only one) that the interface would be redesigned to be mobile-first! This would be a big help for daily tasks on different screen sizes. I also think it would make the platform much more attractive to potential new users.

11

Would a style rule like max-width: min(90vw, 90ch); do what you want?

12

Get your arse in gear. CSS is easy on width.

13

Yes it would. The OP is about responsive width.

“VW” units work very well.

TT

14

Thanks for posting this thread, Tony. It pushed me to finally make a utility I’ve been meaning to get done for a while: Text Columns. Maybe displaying the text in multiple columns would work instead of a single max-width column.

You should be able to specify a column-width that works for you on mobile as a single column, but that will split into mutliple columns at wider screen sizes instead of just stretching the entire width.

15

Thanks @Brian_Radspinner i have used columns before.

This use case is mostly just for readability whilst authoring text. Those very long sentences even paragraphs then wrap only a word or two, it can be hard to move ones eyes to the beginning of the next line. Colums cause something similar and reflow after insertions or deletions.

I want to reduce the % width on big screens but behave in the default uses, this includes with zoom in and out.

The ch unit seems to help but i am yet to fully test it. I may add it as a global text format with the resizer widget and a toggle switch.

16

This works nicely inside a dive tag <div style.max-width="95ch"> however my bid to apply it to all tiddler body text or even design a class I can add to the class field on a specific tiddler seem not to be working.

eg in a tiddler with a stylesheet tag

.tc-tiddler-body {
  max-width: 90ch;
}
17

I did some experiments with different tiddler body / P tag styling. But I can not remember anymore, where I did store it.

May be I’ll find it …

18

This is really cool! I have a somewhat silly request. You should package it up as a plugin (it just helps me track things better, personally) and also let us customise the defaults without having to override the main tiddlers. You can create plugins in the browser as well.

19

Hello @Brian_Radspinner

Text Columns is very neat, one question though.

Can the columns be aligned vertically, there seems to be a difference in columns 2 and three.