Formatting center alignment and TW philosophy

2,603 views
Skip to first unread message

Cloudburst Poetry

unread,
Nov 13, 2008, 7:40:45 AM11/13/08
to tiddl...@googlegroups.com
As a low-tech (i.e., ignorant) user, I love tiddlywiki. But I have my
beefs. TW is heading in a direction for geeks where one has to use CSS
or complicated html to do some simple stuff like center alignment for
text or graphics.

I've been reading the last hour on the email list and the web (and I've
been around TW a long time), and have yet to find a simple instruction
similar to the [>img tag to center something. I'm finding CSS and
high-falutin html.

Guys, where is it, if it exists? If it doesn't, get a grip: the world
doesn't revolve around CSS for most of us, and we need simple, simple
code to use with the TW AS IS. (Somebody is going to tell me to upload a
text editor or something.)

If I can't center align a piece of text or graphic with a simple code,
as well as other basic formatting, TW needs to rethink it's philosophy.
</rant>

[]s

Randal
--
CLOUDBURST POETRY -- FEEL THIS DROP:
They say the devil's in the details,
But Jesus fills the jot and tittle.
http://www.cloudburstpoetry.com by J. Randal Matheny

Reenen Laurie

unread,
Nov 13, 2008, 7:45:41 AM11/13/08
to Tiddl...@googlegroups.com
It *does* revolve around CSS... you just don't know it. :-)

However, I agree!  Simple formatting like
>>This text is right aligned>>
<<This text is left aligned<<
<<This text is justified>>
>>This text is centered<<

would be really cool.
--
o__
,_.>/ _
(_)_\(_)_______
...speed is good
_______________
I believe five out of four people have a problem with fractions.

Reenen Laurie

unread,
Nov 13, 2008, 7:46:45 AM11/13/08
to Tiddl...@googlegroups.com
But << is a macro >> as far as I know...

Maybe
<[ ]<
>[ ]>
<[ ]>
>[ ]<
?

FND

unread,
Nov 13, 2008, 8:36:24 AM11/13/08
to Tiddl...@googlegroups.com
> TW is heading in a direction for geeks where one has to use CSS
> or complicated html to do some simple stuff like center alignment for
> text or graphics.

FWIW, we've argued this point before, and my conclusion was that there
is indeed a certain complexity, but that's not necessarily a bad thing.*

So I was tempted to go on a rant about semantics and how you probably
shouldn't use centering anyway - but that's not constructive, and
possibly even misguided and wrong from a pragmatic perspective.

In this particular case, it does indeed seem like something simple is
excessively hard to achieve for regular users.

So how about we add some default styles to the built-in StyleSheet (I
believe Eric had suggested this a while ago), allowing you to use the
following:
{{center{
lorem ipsum dolor sit amet
}}}

Would that satisfy your needs?


-- F.


* http://groups.google.com/group/TiddlyWiki/msg/949ca33b98eabb2a

Eric Shulman

unread,
Nov 13, 2008, 8:41:28 AM11/13/08
to TiddlyWiki
> I've been reading the last hour on the email list and the web (and I've
> been around TW a long time), and have yet to find a simple instruction
> similar to the [>img tag to center something. I'm finding CSS and
> high-falutin html.
>
> Guys, where is it, if it exists? If it doesn't, get a grip: the world
> doesn't revolve around CSS for most of us, and we need simple, simple
> code to use with the TW AS IS. (Somebody is going to tell me to upload a
> text editor or something.)

One problem with adding more wiki-syntax for text formatting is that
we've essentially run out of unique character sequences that can be
*unambigously* recognized as formatting codes rather than actual
tiddler content.

Fortunately, TW provides a means to define ANY combination of styles
you want and then apply them by means of a simple "class wrapper"
syntax, which looks like this:
{{classname{...your text here...}}}

I've written a whole bunch of pre-defined class definitions for making
it *much* easier to apply extended formatting to your text...

First, import this tiddler:
http://www.TiddlyTools.com/#StyleSheetShortcuts
and add this line to a tiddler named "StyleSheet":
[[StyleSheetShortcuts]]

You can then use the classnames defined by StyleSheetShortcuts in your
content, like this:
{{center{This text is centered}}} (QED)
and you can also combine class names, like this:
{{floatleft big blue italic{...}}}

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

Reenen Laurie

unread,
Nov 13, 2008, 9:03:27 AM11/13/08
to Tiddl...@googlegroups.com
Cool, that is definately easy enough thanks!

Cloudburst Poetry

unread,
Nov 13, 2008, 9:16:23 AM11/13/08
to tiddl...@googlegroups.com
Reenan, I know TW revolves around CSS, but my focus in the email was
about editing. I've even tweaked an item or two in the stylesheet, but
don't know CSS and don't have time for it. I was learning some html, and
then they went and changed it all. :( And then I found WP and TW and ...
well, forget the behind-the-scenes technical stuff for me. I'm an end
user.

FND, stuff like this:

{{center{
lorem ipsum dolor sit amet
}}}

is STILL too complicated for an end user. I could do it, but I'd have to
look and see how many brackets and where they go every time I wanted to
use it. TW is still a wiki, isn't it? Then, to my mind, it has to have
wiki code for something as simple as center text and graphics.

Eric, see! Here we go with, let's throw a plugin to simplify, except it
doesn't simplify, it complicates for the end user. I had gone to your
site and tried to install your QuickEditPackage, and got all kinds of
error messages and it totally messed up the TW I was experimenting on.
So I did something wrong. I've uploaded some stuff into tiddlers before,
but I admit I get lost on your site. Do I have to import all those
tiddlers separately? I stuck the URL
http://www.tiddlytools.com/#QuickEditPackage into the import pathname
and got a huge list. So I obviously didn't figure that out right.

Bottom line, Reenan is on the right track, gotta have something really
simple for the code. Forget the CSS for the end-user, guys. Doesn't
work. Gotta be something like [*img ... don't tell me that character
sequence has been taken.

Thanks for all the kind replies. I appreciate your patience.

[]s

Randal
http://cloudburstpoetry.com/

schilke

unread,
Nov 13, 2008, 10:20:08 AM11/13/08
to Tiddl...@googlegroups.com
Randal,

> Reenan, I know TW revolves around CSS

nah, not really - rather it's a problem that it does *not*...

> well, forget the behind-the-scenes technical stuff for me. I'm an end
> user

You're absolutely right with your point of view and TW definitely is
not (and shouldn't be) just for geeks.

> TW is still a wiki, isn't it? Then, to my mind, it has to have
> wiki code for something as simple as center text and graphics.

a) yes, b) no. It is not really simple to center things in a web page
because that's not a basic intention of HTML (abbr for Hypertext
Markup Language).
Centering elements on a page is not text editing - strictly speaking
it's either design or at least DTP - TiddlyWiki is, as you mentioned
yourself, a wiki - not a design- or DTP application.
You might think that text processing applications are all capable of
centering text and/or images - yes they are, but: they won't run in a
single HTML file and they are not capable of running on different
operation systems - most of them couldn't be carried around on a thumb
drive. If you want a feature-rich application which is also easy to
handle you simply can't include that into a < 400k HTML page.

I assume someone suggested to include a wysiwyg ("what you see is what
you get") editor to have similar options like in a standard word
processing application (a toolbar for formatting and so on) - but
you'll have to use additional files then - so simplicity and
portability are gone at that point.

For the plugin installation process I have to admit that I am finding
it complicated sometimes, too. I believe that the developers do their
best to make especially that process easier. But I have to say that
this great community has always been helpful - so if you have problems
with the installation of a plugin you could always ask for support
here...

BTW a lot of things have been improved (= made much easier) since the
first releases - believe me ;)

Just my 0.02 EUR

--s.

Eric Shulman

unread,
Nov 13, 2008, 10:37:06 AM11/13/08
to TiddlyWiki, elsd...@gmail.com
> Eric, see! Here we go with, let's throw a plugin to simplify, except it

StyleSheetShortcuts is *not* a plugin... just some CSS definitions...
which you don't even need to understand in order to *use* them. The
only thing you need to know is the classnames that are defined there,
like:
left, right, center, justify, floatleft, floatright, big, small
Just pick the appropriate classname and use it in a 'class wrapper',
like this:
{{left{...}}}

> doesn't simplify, it complicates for the end user. I had gone to your
> site and tried to install your QuickEditPackage, and got all kinds of
> error messages and it totally messed up the TW I was experimenting on.
> So I did something wrong. I've uploaded some stuff into tiddlers before,
> but I admit I get lost on your site. Do I have to import all those
> tiddlers separately? I stuck the URLhttp://www.tiddlytools.com/#QuickEditPackageinto the import pathname
> and got a huge list. So I obviously didn't figure that out right.

QuickEditPackage does considerably more than provide simple formatting
assistance. It provides a wide range of 'QuickEdit' buttons that
perform all sorts of editing-related functions, such as 'find-and-
replace', 'read text from file', etc. As such, it consists of quite a
few tiddlers, and is unfortunately, not so easy to install. I've
tried to write up some instructions (see the QuickEditPackage tiddler
itself), but the installation steps can still be a bit confusing for
some folks. I'd love to automate the installation process, but that
is a non-trivial problem, primarily because every TiddlyWiki document
can be extensively customized, so there is not reliable way to
programmatically know *exactly* what changes should be applied to any
given document. Thus, installing this package remains (at least for
now) a hand-driven process.

> Bottom line, Reenan is on the right track, gotta have something really
> simple for the code. Forget the CSS for the end-user, guys. Doesn't
> work. Gotta be something like [*img ... don't tell me that character
> sequence has been taken.

TiddlyWiki is built on top of browser-based technolgies: HTML, CSS and
Javascript. These are the 'lingua franca' for *all* TiddlyWiki
documents, and are fundamental to how TiddlyWiki works.

TiddlyWiki relies on the brower's underlying functionality to actually
render the content. One inescapable implication of this is that if
something is not supported by HTML, it is not supported by TiddlyWiki
(at least not without adding some cleverly written CSS definitions or
Javascript-bearing plugin tiddler).

For example, the browser's handling for images has built-in support
for aligning to the left margin or right margin (allowing text to
'flow' around it):
<img src="..." align="left"> or <img src="..." align="right">
but does NOT provide an intrinsic way to make an image float in the
center. Of course, the HTML syntax could be enhanced to allow center
alignment, but that has two major issues:

First of all, way back 'in the day', when the W3C committees were
still defining the HTML standards, they quickly realized that, in
order to address numerous formatting deficiencies, the HTML syntax
would rapidly become overwhelmed with hundreds of new specially-
defined attributes for each specific kind of formatting option, and
would also result in a never-ending revision cycle for the HTML
standards in order to support an increasingly cumbersome syntax.
(note: this same issue exists when attempting to define new TW wiki-
syntax... the continuous addition of new special-purpose character
sequences would rapidly bloat the code and bring TW development to a
virtual standstill)

Second, any new HTML syntax they defined would have to be implemented
by the various browser manufacturers before it could be of any use,
and each new revision to the HTML standard would necessitate
additional updates to the browser in order to add a few more special-
use attributes.

Fortunately, they saw another way to extend the formatting abilities
of HTML and make it much easier to create and maintain consistent page
layouts, by inventing a new general-purpose syntax that could describe
the appearances of any HTML page element, and would permit flexible
customization and extensions in the future, without needed to
continually re-define the language standards. They called this new
syntax "Cascading Style Sheets" (CSS).

Of course, this new syntax also had to be implemented by the browser
manufacturers and, for quite a while, browser support for CSS was not
always available or was poorly-implemented... especially because the
CSS syntax standards were still evolving.

However, that was then... this is now. Today, CSS is robustly-
supported by *all* the major web browsers and is a fully-integrated
part of how you define the look-and-feel of your page content.

Still, as you noted, CSS is not currently part of your skill-set and
you are, apparently, adamantly opposed to learning even a few basic
bits syntax that allow you to achieve the results you are seeking.
Personally, I think that attitude is self-defeating and counter-
productive... you want to be able to achieve finely-controlled custom
formatting of your content, but don't want to learn how that is done.

Even so, it is not entirely unreasonable to want to have a simplified
way to apply these CSS-based formatting enhancements, so that the
amount of learning that is required to gain proficiency in their use
is minimized. That is why I created this tiddler:
http://www.TiddlyTools.com/#StyleSheetShortcuts

After you follow the two simple steps I previously described (import
the tiddler, then add it to your StyleSheet), you don't have to know
anything else about CSS, except the names of the classes that the
tiddler defines (which, as noted at the top of this message, are
mostly simple and obvious, like "left", "right", "big", "small",
"red", "blue", etc.

Thus, by importing this one single tiddler, it will allow you to make
use of the *necessary* CSS class names to achieve the formatting you
want, while minimizing the effort needed to learn just a few
classnames and one piece of wiki-syntax (the class wrapper, i.e.,
"{{classname{...}}}").

Although I'm sure this isn't the answer you want, it's the only one
that makes sense.

iain

unread,
Nov 14, 2008, 6:07:07 AM11/14/08
to TiddlyWiki
I can see where you are coming from Cloudburst Poetry, it is
frustrating that to use TW it seems that you need to know something
about HTML and CSS (and thanks very much to Eric I now know allot more
about CSS).

But isn't this where the various fully formatted TW's such as "No
Brainer Notes" and "Fiddly Wiki" come into play? I could use some of
these immediately without any knowledge of HTML or CSS.

Jon Light

unread,
May 20, 2021, 12:11:50 PM5/20/21
to TiddlyWiki
I know its an old post but......

My thought is to take advantage of the quote feature that is already there - it has provision for adding your own CSS class.

<<<
Here is my
text after I selected it and
pressed the highlight button ( large start double quote symbol )
<<<

Then add your own class 'CA' for centre aligned taking care to reset or nullify the aspects of the default quote that you do not want.

<<<.CA
<<< 

This is the thing I love about the provision for custom classes for the quotes feature - as long as you can make up some easy to remember short class names you can pretty much
invent any block level formatting and yet leave the regular functionality untouched - all for the cost of writing or cribbing the custom CSS once and then adding a dot and then adding 'dot' class.


I think I would have to disagree with complaints about CSS geekery - a word processor may have some extra features but is not generally as extendable or flexible as Tiddlywiki, the pay-back for a few trips to this forum is huge and as others have pointed out unless you use a word processor which provides enough buttons for every format option, at some stage you end up in some kind of style sheet or style declaration, almost everyone wants 'KISS' until they have a unique formatting requirement and then suddenly find themself wanting more flexibility and rejecting built in defaults.

David Gifford

unread,
May 20, 2021, 12:20:51 PM5/20/21
to TiddlyWiki
It is also easily forgotten that @@.cssclass Your text@@ applies the .cssclass too.

Jon Light

unread,
May 20, 2021, 1:15:50 PM5/20/21
to TiddlyWiki
Thanks David, yes - that is probably easier for a short text.
Reply all
Reply to author
Forward
0 new messages