HTML In a Tiddler, And CSS Rendering

23 views
Skip to first unread message

Digital Doctor

unread,
Feb 25, 2008, 1:44:51 PM2/25/08
to TiddlyWiki
Greetings:

For the first time, I'm looking to render some basic HTML (mostly
words) in a tiddler. I have two challenges:

1) I'm finding that TW does NOT render in the same fashion as say
Dreamweaver.

2) I used tables in my layout, for a quick and easy arrangement; but I
know there is serious frowning upon tables. I would appreciate the
helping hand of a CSS master, who could translate the following:

<html>
<body>
<table width="436" height="425" border="0" align="center"
cellpadding="0" cellspacing="0" bgcolor="EEEEEE">
<tr>
<td><table width="416" height="412" border="0" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><div align="center"><strong><span
class="style1">&quot;Hope is that thing <br />
inside us <br />
that insists, <br />
despite all evidence
<br />
to the contrary, <br />
that something better <br />
awaits us<br />
if we have the courage <br />
to reach for it, <br />
and to work for it, <br />
and to fight for it.&quot; </span><br />
<br />
<span class="style2">Senator Barack Obama (Iowa Caucus
Night) </span></strong></div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

Thanks.

RC

Daniel Baird

unread,
Feb 25, 2008, 3:29:59 PM2/25/08
to Tiddl...@googlegroups.com
On Tue, Feb 26, 2008 at 4:44 AM, Digital Doctor <rafi...@gmail.com> wrote:
>
> Greetings:
>
> For the first time, I'm looking to render some basic HTML (mostly
> words) in a tiddler. I have two challenges:
>
> 1) I'm finding that TW does NOT render in the same fashion as say
> Dreamweaver.

TW just gives your browser the HTML. If it looks different from what
you expect, it's because of CSS formatting. Work out what you want
different, and add CSS rules to StyleSheet to make it look how you
want.

Also note that Dreamweaver might use IE to render its preview, so you
might see rendering differences between that and Firefox. Welcome to
web development :)


>
> 2) I used tables in my layout, for a quick and easy arrangement; but I
> know there is serious frowning upon tables. I would appreciate the
> helping hand of a CSS master, who could translate the following:

is that example just some text in a grey box? Spend 10 minutes
reading a CSS tutorial. There's a nice CSS reference here:
http://reference.sitepoint.com/css

Cheers
;Daniel

--
Daniel Baird
i neeber olok at ym kyebord wen i tpey

Rafiki Cai

unread,
Feb 25, 2008, 7:31:36 PM2/25/08
to Tiddl...@googlegroups.com
OK, I'm taking the advice; and working through a
CSS tutorial at the W3School

One of my first challenges is in controlling the
background property of the 'portal' element.

.portal {
    body background-color:#EEEEEE;
    width: 436px; /* corresponds to width of 7 panels */
    overflow: hidden; /* contain floats */
    padding: 0 1px 1px 0; /* compensate for panels' negative margins */
}

My attempt is highlighted in yellow.  Suggestions.

RC

Daniel Baird

unread,
Feb 25, 2008, 9:59:46 PM2/25/08
to Tiddl...@googlegroups.com
On Tue, Feb 26, 2008 at 10:31 AM, Rafiki Cai <rafi...@gmail.com> wrote:
> One of my first challenges is in controlling the
> background property of the 'portal' element.
>
> .portal {
> body background-color:#EEEEEE;
> width: 436px; /* corresponds to width of 7 panels */
> overflow: hidden; /* contain floats */
> padding: 0 1px 1px 0; /* compensate for panels' negative margins */
> }

leave out the "body".. that line should just be:

background-color: #eee;

I've also shown the CSS shortcut way of specifying colours -- if you
give just three hex digits, each one is "doubled" to give the colour.
So #eee = #eeeeee, and #36d = #3366dd.

Rafiki Cai

unread,
Feb 25, 2008, 10:19:23 PM2/25/08
to Tiddl...@googlegroups.com
DB:

I had already tried that approach (without the hexidec shortcut);
and it had no effect.  I tried your way (exactly), and it still had no
effect.

Mind you, that early on I was able to insert a background style,
and had the bg of the entire TW change.  The portal section has been
otherwise.

RC
--
"The ONENESS of The Allness is the key that we seek.  When will we all catch on?"

Phil Whitehouse

unread,
Feb 26, 2008, 11:48:53 AM2/26/08
to TiddlyWiki
Hi there,

It looks as though the class "portal" which was declared in the style
sheet needed to be invoked in the tiddler. Try this:

<html>
<div class="portal">
</div>
</html>

Cheers,
Phil

On Feb 26, 3:19 am, "Rafiki Cai" <rafiki...@gmail.com> wrote:
> DB:
>
> I had already tried that approach (without the hexidec shortcut);
> and it had no effect. I tried your way (exactly), and it still had no
> effect.
>
> Mind you, that early on I was able to insert a background style,
> and had the bg of the entire TW change. The portal section has been
> otherwise.
>
> RC
>
>
>
> On Mon, Feb 25, 2008 at 9:59 PM, Daniel Baird <danielba...@gmail.com> wrote:

Digital Doctor

unread,
Feb 26, 2008, 12:11:42 PM2/26/08
to TiddlyWiki
Phil:

Thanks for the helping hand.
Indeed that was the missing
element; simple as it was.

------

I note still, that the content
is rendered inside a tiddler
differently than it is within IE
or Firefox. In the browser
alone, there are no borders
to the tables.

Inside the tiddler, the table
borders show as black.

Anybody have insight on this.

------

Optimally, I'd like to render
the content to fill the display
area (color-dark blue and
Arial Black), WITHOUT the
use of tables.

I'll make that my CSS learning
assignment; but am grateful
to any CSS wizards who want
to knock it out in 15-30 secs.

RC

Daniel Baird

unread,
Feb 26, 2008, 5:53:27 PM2/26/08
to Tiddl...@googlegroups.com
On Wed, Feb 27, 2008 at 3:11 AM, Digital Doctor <rafi...@gmail.com> wrote:
> [...]

> I note still, that the content
> is rendered inside a tiddler
> differently than it is within IE
> or Firefox. In the browser
> alone, there are no borders
> to the tables.
>
> Inside the tiddler, the table
> borders show as black.

TiddlyWiki has already defined styles for tables to give them borders
etc (check out your Other > Shadowed tab, and have a look through the
various StyleSheet... tiddlers to see the CSS rules TW is already
using).

You need to override those style rules to turn borders for tables off.

Also note that if you get to a point where you think you have
everything right, but some style or other is just not applying, it's
probably a specificity problem. Google for "css specificity" for some
nice descriptions. Generally adding an ID to the selector will solve
the problem.

>
> Optimally, I'd like to render
> the content to fill the display
> area (color-dark blue and
> Arial Black), WITHOUT the
> use of tables.

Generally a div will grow as wide as the thing it's inside of. Post a
URL when you've gotten as far as you can.

Also remember some people won't have the Arial Black font.

Rafiki Cai

unread,
Feb 26, 2008, 6:25:32 PM2/26/08
to Tiddl...@googlegroups.com
Maybe I'm just whimping, but this
is like an Alice in Wonderland 'down
the hole' experience.  At each turn,
another door opens.  Now there are
style sheets tucked away, Other>
Shadowed Tabs.

I did a search yesterday, for HTML to
CSS converters.  To do something
this simple: some text inside an area,
with a color background should be
WAY easier.

Its almost like you need a WYSWIYG
editor driven by all your style sheets:
like a Dreamweaver CSS editor.

Geesh.

-------------

So let me take a bit at a time.

How can prevent the tables
from running across the entire
display area.  That sounds like
something I can grasp.

The TW is loaded at barack.digitaldr.org

Thanks, in advance.

RC

Daniel Baird

unread,
Feb 26, 2008, 6:59:19 PM2/26/08
to Tiddl...@googlegroups.com
It looks like you're setting the width too often. Just set it once,
and use divs not tables.

Divs always go to the width of the thing they're in. Not like tables
that might be narrower.

If you get rid of the table completely you're looking pretty good:

<html>
<div class="portal">


<div align="center"><strong><span
class="style1">&quot;Hope is that thing <br />
inside us <br />
that insists, <br />
despite all evidence
<br />
to the contrary, <br />
that something better <br />
awaits us<br />
if we have the courage <br />
to reach for it, <br />
and to work for it, <br />
and to fight for it.&quot; </span><br />
<br />
<span class="style2">Senator Barack Obama (Iowa Caucus
Night) </span></strong></div>

</div>
</html>

Then you just have to add some top and bottom padding to your portal div.

If you want to keep the borders, just add a border property to the css
of your portal div.


Cheers
;Daniel

Digital Doctor

unread,
Feb 26, 2008, 8:22:57 PM2/26/08
to TiddlyWiki
OK Daniel, your CSS tutee has made a stride
for the day. http://barack.digitaldr.org

I've learned how to control:
a) font size
b) space between lines
c) color of font

I've also learned how to handle multiple
multiple properties of a selector (i.e., font).

---------

Its the most basic of stuff, but at least its
a step.

---------

Challenges ahead:

1) How to separate text out, so as to
give it distinguishing properties. (For example,
|the reference to Obama could be rendered
in black.)

2) How to handle layers, so that 50% opaque image
of Obama might be in the background; to give
some depth and texture to the tiddler.

-----------

Thanks for your patient helping hand.
I'll continue to study the W3C CSS tutorials; and
make my way to the next step.

------------

On another note: I've installed PRISM and rendered
the TW through PRISM. Interesting effect.

I wish that the prism run-time could be embed right
into the TW itself.

RC

Daniel Baird

unread,
Feb 26, 2008, 8:58:28 PM2/26/08
to Tiddl...@googlegroups.com
On Wed, Feb 27, 2008 at 11:22 AM, Digital Doctor <rafi...@gmail.com> wrote:
> [...]
> Challenges ahead:
>
> 1) How to separate text out, so as to
> give it distinguishing properties. (For example,
> |the reference to Obama could be rendered
> in black.)

Pick out a _block_ of text by wrapping it in a div, give the div a
class, and write a new CSS rule for it to change the text colour.

If you want to pick out some words in a paragraph, wrap them in a
span, <span class="spandemo">like this</span>. Unlike a div, a span
doesn't block out the text it surrounds, so you can do stuff to a few
words in then middle of a paragraph.


>
> 2) How to handle layers, so that 50% opaque image
> of Obama might be in the background; to give
> some depth and texture to the tiddler.

Give your div a background of the image:
background-image: url('images/fadedbarak.gif');
background-position: bottom right;
background-repeat: no-repeat;

That will give you a single image in the bottom left corner, behind
the text, which is I think the effect you want. You'll want to
prepare the image in a graphics editor beforehand to make it look
faded out.

Rafiki Cai

unread,
Feb 26, 2008, 9:12:54 PM2/26/08
to Tiddl...@googlegroups.com
You're a mightly good chap, ole' fellow.

You give Townsville a great name.

----

I'll holla when I've made the next stride,
which shouldn't take as long as the first.

RC



Eric Shulman

unread,
Feb 26, 2008, 10:22:18 PM2/26/08
to TiddlyWiki
On Feb 26, 3:59 pm, "Daniel Baird" <danielba...@gmail.com> wrote:
> <html>
...snip...
></html>

Although TiddlyWiki is built using HTML, CSS and Javascript, there are
lots of *other* resources out there to help beginners who are trying
to learn how to write basic HTML and CSS. *This* group's discussions
really should, whenever possible, be focused HOW TO USE TIDDLYWIKI...
which is intended, after all, to be *easier to write* than 'old-
fashioned' HTML syntax.

So... here's the "TiddlyWiki Way" to write things using TW's "custom
class wrapper" syntax:

This is a DIV with a specific class:
{{classname{
...content...
}}}
and this is a SPAN:
{{classname{...content...}}}
(the important difference is that the DIV has a newline immediately
following the opening "{{classname{" syntax, while a SPAN has content
on the same line as the opening syntax)

You can combine several classes for the same DIV or SPAN simply by
listing them, space-separated in a single wrapper:
{{class1 class2 class3{
...content...
}}}

Thus, in your [[StyleSheet]], define the following classes:
-----------------------
.portal {
background-color:#eee;
background-image:url('images/barack.jpg');
padding:1em;
border:1px solid;
}
.center { text-align:center; }
.bold { font-weight:bold; }
.style1 { ... }
.style2 { ... }

then, in your tiddler content:
-----------------------
{{portal center bold{
{{style1{
"Hope is that thing
inside us
that insists
despite all evidence
to the contrary,
that something better
awaits us
if we have the courage
to reach for it,
and to work for it,
and to fight for it."
}}}
{{style2{Senator Barack Obama (Iowa Caucus Night)}}}
}}}

That's it!! See how much simpler it is to write using TiddlyWiki
syntax!

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

----------------------
P.S.

There is a very old story that I learned as a child:

A man approaches Akiba and mockingly asks: "Rabbi, please explain the
meaning of the Torah while I stand here on one leg!"...

Akiba, annoyed by the impertinence of the request, responds: "The
Torah has lots of complex meaning that takes years of study and
dedication to learn! You can't expect me to explain it all to you in
just a few minutes!"

Later, the man approaches Hillel and asks the same question. To which
Rabbi Hillel calmly responds: "Do unto others as you would have them
do unto you... the rest is commentary!"

To paraphrase in terms of TiddlyWiki, "Writing HTML and CSS is complex
and can require years of study and dedication. Instead, use
TiddlyWiki syntax... the rest is provided by the core!"

Rafiki Cai

unread,
Feb 26, 2008, 10:37:28 PM2/26/08
to Tiddl...@googlegroups.com
Eric:

With ALL due respect, this exchange between
Daniel and I has been strictly TW centered.

Also, this is NOT a one phone line operation.
If people are not interested in the thread, they
simply can not click on the email, or that
thread on in the group online.

What's the big deal??????????

-------------

Thanks for your sharing on the CSS, that you
did offer forth.

RC

Eric Shulman

unread,
Feb 26, 2008, 11:07:54 PM2/26/08
to TiddlyWiki
> With ALL due respect, this exchange between
> Daniel and I has been strictly TW centered.

hrmph! Not hardly! Although you are using TiddlyWiki as your
authoring environment, the discussion has been quite clearly related
to **general HTML and CSS syntax**, and could be applied to virtually
ANY web page. Thus: NOT "strictly TW centered".

> Also, this is NOT a one phone line operation.
> If people are not interested in the thread, they
> simply can not click on the email, or that
> thread on in the group online.
> What's the big deal??????????

It's NOT a big deal, but people come to this group looking for
information on using TiddlyWiki. While it is true that TiddlyWiki
builds on top of HTML and CSS, there are *thousands* of other
resources for learning HTML and CSS, but there are only a handful of
places to learn and ask questions about TiddlyWiki-specific usage.
Keeping THIS group's discussions focused on TiddlyWiki-specific issues
*is* appropriate and reasonable.

My posting in this thread was simply an attempt to provide a
TiddlyWiki-based solution to your query in order to re-focus the
current discussion in a direction that would be of greater benefit to
other TiddlyWiki users.

-e

Rafiki Cai

unread,
Feb 26, 2008, 11:19:20 PM2/26/08
to Tiddl...@googlegroups.com
There's a significant point being missed here:
NO one has to be in this thread, that doesn't
find some level of interest/value in this thread.
That is important.

No thread, in any group, seeks out every
subscriber and spams them with a thread that
they don't want.

Anybody reading these threads are obviously
doing so because they have some interest.

---------

While HTML and CSS has general application,
so does much of what dovetails out of TW
discussions (i.e., javascript, tagging, etc.).

Fact of matter is that every single thing that
I've been garnering from this discussion, HAS
been applied to TW; and I've been forthcoming
with sharing online and offline files to illustrate
that.

A couple of people have understood what I
was I trying to do, and have generously offered
their input.  Those of us so engaged were thoroughly
enjoying the exchange and interaction.

-----------

Your seeking to throw cold water on the flow,
in policeman style, is puzzling to say the least.
Especially since it breaks no 'rules' of decency;
or the spirit of this group.

This is a free environment for exchange, camaraderie
and growth.  I fervently believe that all three of those
were being fulfilled, by adults who were excercising
their freedom to do so.

Perhaps the TW activity I have at hand is absolutely
trivial to you, but that's not the standard of this group
now is it.  Are you reading through each and every
thread, judging whether the thread is TW focused enough?

RC

Eric Shulman

unread,
Feb 27, 2008, 12:23:10 AM2/27/08
to TiddlyWiki
> No thread, in any group, seeks out every
> subscriber and spams them with a thread that
> they don't want.

Sorry, but this is simply not correct. MANY of the 3000+ people who
subscribe to this Google Group receive ALL messages by email. Even
the "olympics" spam from China and the "sex video" spam from India!
Every thread, every message, shows up in their inbox.

> Your seeking to throw cold water on the flow,
> in policeman style, is puzzling to say the least.
> Especially since it breaks no 'rules' of decency;
> or the spirit of this group.
> This is a free environment for exchange, camaraderie
> and growth. I fervently believe that all three of those
> were being fulfilled, by adults who were excercising
> their freedom to do so.
> Perhaps the TW activity I have at hand is absolutely
> trivial to you, but that's not the standard of this group
> now is it. Are you reading through each and every
> thread, judging whether the thread is TW focused enough?

You have apparently taken offense at my response, even though there
was no such offense intended.... and, no authoritative "policeman"
style was present in my message. To whit:

> *This* group's discussions really should, whenever possible,

I did not say "MUST", or "REQUIRED" or "ONLY"... I simply offered MY
perspective that responding with TiddlyWiki-based syntax would be:

A) easier
B) more relevant to OTHERS

... and yes, as a *manager* of this group, it IS my responsibility to
keep this group focused on TiddlyWiki... and, you should note that I
have *never* blocked or removed ANY messages on this group (except for
one strange posting that referred to "ovens" and "final solution" as
an attempt at humor (yuck!!!) and, of course, the aforementioned
spammers, whom I immediately ban from further posting!).

If the discussion were to turn to politics, bass fishing, kite flying,
or other obviously off-topic subjects, that would be clearly
inappropriate to the purpose of this group. Note that I am absolutely
NOT saying that generic HTML and CSS questions are completely off-
topic... I am ONLY saying that TiddlyWiki-specific discussions are
MORE "on-topic"...

Of course, you are free to post whatever messages you want. I am
simply trying to encourage everyone (yourself included) to keep the
emphasis on TiddlyWiki-specific information, out of consideration for
the other 3000 people who are participants in this group.

so... calm down... relax... Lighten up!

respectfully,

Rafiki Cai

unread,
Feb 27, 2008, 12:37:14 AM2/27/08
to Tiddl...@googlegroups.com
First off, I will calm down, lighten up and relax.

Your point about every email is well taken.  I was
not 'connecting the dots'; because I do get those
silly Olympic emails; even though I'm not in a
particular thread.

That being said, I guess we'll have to just agree
to disagree about whether the thread was TW-centric
enough.

TW itself is a conglomerate of pre-existing web
resources, so its nigh impossible to engage TW
and not veer into those composites of which its
built.

------

I did take a bit of offense to your position, since
my sole line of exchange was ALL about TW results.
That's cool, we can disagree, and save a little space
in the 3,000 subscribers Inboxes.

--------

Again, thanks for the info that you did share on the
topic.  And thanks DB and PW, for your input as
well.

Its ALL Good.

RC

Daniel Baird

unread,
Feb 27, 2008, 1:12:33 AM2/27/08
to Tiddl...@googlegroups.com
On Wed, Feb 27, 2008 at 1:22 PM, Eric Shulman <elsd...@gmail.com> wrote:
> [...]

> So... here's the "TiddlyWiki Way" to write things using TW's "custom
> class wrapper" syntax:
> [...]

> That's it!! See how much simpler it is to write using TiddlyWiki
> syntax!
>

Eric, your post has presciently preempted my pedagogical plan! I
almost did the look-how-wiki-syntax-is-better bit in my last post, but
then I decided to leave it til the next one, so Rafiki got to solidify
his understanding of divs and spans before having to work out
{{why{this}}} is different
{{to{
this
}}}.

Rafiki, Eric's rewrite is pretty much where you want to end up.
(I'd've called style1 something like "citereference" though).

Eric Shulman

unread,
Feb 27, 2008, 2:05:24 AM2/27/08
to TiddlyWiki
> Eric, your post has presciently preempted my pedagogical plan! I

but I didn't anticipate an apparently alliterative approach! :-)

-e
Reply all
Reply to author
Forward
0 new messages