Help converting a couple of tiddlers from TWC to TW5

[Andy Arnold]

Good Morning,

I've spent 40+ years writing code and converting files & databases.  This problem should be easy, but it has me stumped.

I have a TWC tiddler (StyleSheetCustom) that defines some new css style names.  The new css defines fore/background color combinations as single words.  It also combines several font family terms into a single term (loco26). Here's a few lines...
.backYellow{color: #000; background:yellow;}
.backGainsboro{color: #000; background: #DCDCDC;}
.backYellow30{color: #8B3A3A; background: yellow; font-size:30px;}

and I have another tiddler (Motive Power Paint) that uses the new css...
* {{backYellow30{    {{loco26{ C}}}{{loco18{APON }}}{{loco26{V}}}{{loco18{ALLEY}}}{{loco26{ R}}}{{loco18{AILROAD }}} }}}

The idea is to show 'CAPON VALLEY RAILROAD' in a common type face and a common fore/background color pair with the C V R in a larger font-size than the rest of the phrase.

I only want to do this for a few tiddlers; so I'm not looking for a theme-level solution. 

Can someone please send me to some links, etc. that have example solutions? 

Thanks

--Andy

[Eric Shulman]

Your stylesheet definitions are OK as-is.  Just paste them into a new tiddler in your TW5 document, and add the tag "$:/tags/Stylesheet" so that the core will recognize it as CSS definitions.

However, the syntax for *using* the CSS classnames in inline content has changed from TWC to TW5.

The TWC classwrapper syntax is:

   {{classname{...content...}}} 

The TW5 classwrapper syntax is:

   @@.classname content@@

   (note: the dot (.) before the classname and the space separating the classname from the content are important!)

For your particular use-case, it's just a tiny bit trickier because you are *nesting* the classes, and in "inline" mode, the @@ syntax doesn't nest.

However, you can easily work around this by using HTML for the outer wrapper, like this:

<span class="backYellow30">

@@.loco26 &nbsp;C@@@@.loco18 APON@@

@@.loco26 V@@@@.loco18 ALLEY@@
@@.loco26 R@@@@.loco18 AILROAD&nbsp;@@

</span>

Note also that, for this particular use case, you can use the "::first-letter" pseudo-element in your CSS definitions to achieve the same results (first letter of each word in a larger font)

.loco2618

   { font-size:18pt; }

.loco2618::first-letter

   { display:inline-block;font-size:26pt; }

Then, you can use it like this:

<span class="backYellow30">

@@.loco2618 &nbsp;CAPON@@

@@.loco2618 VALLEY@@

@@.loco2618 RAILROAD&nbsp;@@

</span>

enjoy,

-e

Eric Shulman

ELS Design Studios

TiddlyTools - "Small Tools for Big Ideas!"

InsideTiddlyWiki: The Missing Manuals

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[PMario]

HI Andy,

On Sunday, May 17, 2015 at 4:27:20 PM UTC+2, Andy Arnold wrote:

Good Morning,

I've spent 40+ years writing code and converting files & databases.  This problem should be easy, but it has me stumped.

Nice to see, that an old stager likes TW ;)
 

The idea is to show 'CAPON VALLEY RAILROAD' in a common type face and a common fore/background color pair with the C V R in a larger font-size than the rest of the phrase.

In TW I'd use the following mechanism, which imo is much easier to read.

Define a CSS stylesheet tiddler eg: myStyleSheet   tag it $:/tags/Stylesheet

.zz em {
  display:inline-block;
  font-style: normal;
}

.zz em:first-letter{
  color: red;
  font-size: 130%;
}

Your text

@@.zz
* //CAPON// VALLEY //RAILROAD//
** CAPON //VALLEY// RAILROAD
@@

or

*.zz //CAPON// VALLEY //RAILROAD//

As you see. I'm "missusing" the italics format here. ... you could also use eg: strikethrough, where the CSS would look like this

.zz strike{
  display:inline-block;
  text-decoration:none;
}

.zz strike:first-letter{
  color: red;
  font-size: 130%;
}

and the text:

@@.zz
* ~~CAPON~~ VALLEY ~~RAILROAD~~
@@



With this CSS you get a similar result to Erics suggestion

.xx{
  display:inline-block;
  font-style: normal;
}

.xx:first-letter {
  color: red;
  font-size: 130%;
}

@@.xx Some@@@@.xx text@@ ... but I think it's hard to read


have fun!
mario

[Andy Arnold]

Thanks for the help. 

Eric's first idea (@@.loco26 &nbsp;C@@@@.loco18 APON@@) worked right off. 

I worked on the ::first-letter solution for a couple of hours and couldn't get it to work.  I'll come back to that because I think it's a more elegant solution.

--Andy