Is the Text following a span a child or a sibling?

[Jan]

Hello!
I want to realize an editor for screenwriting within TW and during that
process have come to a formatting/CSS question.
The dialogue-text after the role shall be indent. Now my question is
is the Text following a span a child or a sibling?

.role{text-transform: uppercase;}
.role > p{margin-left: 150px; font-style: italic;}

It shall be used within this construction

{{rolename}} Dialoguetext text......
Text Text

Where rolename is a transclude span with the class role...


Thanks for help
Jan

[Mat]

Hi Jan

Forgive me if I'm wrong, but it seems to me that you're mixing things up in a beginners kind of way? At least I can't quite make sense of it. May I propose that you instead describe exactly what you wish the end result to look like?

<:-)

[Jan Johannpeter]

Hi Mat,
Perhaps you are right.
I want to create a class which makes the name of the person speaking in capital letters in the left. And i would like the dialogue-text following this name to appear indent.
I thought I could use the adjacent sibling selector to make it indent without further formatting in the text.

As a further difficulty, the span containing the role class will be transcluded into the tiddler... I do. Not know whether this changes anything...

Thanks for helping
Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f36c2b4b-a4f3-4901-992b-7f658493b7ea%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[whatever]

Hey!
Try this:

in your stylesheet, add the following, but adapt both numbers appropriately (they should be identical, but you can experiment with different numbers, if you like):
.dialog {padding-left: 130px; text-indent: -130px;}
.text {margin-left: 150px; font-style: italic;}


Then in your tiddler, you can put the following:
{{dialog{{{role{Your Role Name}}}{{text{ dialog text
                                        more dialog text
                                        more dialog text}}}}}}

The "dialog" class determines the style for both the role and the text, in this case the indentation, and the "role" class only determines the style for the role name. The "text" class determines the style for the text. And to answer your question from the topic title, a node following a node is its sibling, regardless if it is within tags, and a node within a node is its child, but unless you actually plan to have a paragraph break after the role name, you need to change that rule to the "text" class.

hth,
w

PS: I'm not sure if TW5 also uses {{className{text}}} notation, like TWC, but the principle is the same.

[Mat]

Jan, I made this demo for you.

Never mind the "surrounding tidbits", they're part of my TW template for fast dev. You only have to look at the three concerned tids.

<:-)

On Sunday, April 9, 2017 at 9:51:29 AM UTC+2, Jan wrote:

[Jan Johannpeter]

Great, thanks a lot
I am roaming now but I'll be albe to test it this night.
Yours Jan

[Jan]

Hi Whatever,
thanks a lot for your help.  I do not know whether styling in transclusions still works that way. I thought now it is {{tiddler||templateTiddler}}.
Anyway this is a little too complicated. Because this is about editing scripts the text has to be readable in editmode.

Greetings Jan

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/56f6ecdc-a213-4532-ab70-c2a92ddc3be9%40googlegroups.com.

[Jan]

Hi Mat,
I looked at your demo and the Layout is exactly what I want for dialogues, very good to see it realized in TW...and good to see how relaxed this looks in the EditMode.

To fullfill the needs of a screenwritingprogramm we would need more classes: action (parenthetical) and shot.
For example action again should appear without indent.
For the readbility in editimode, it would be great if the class for action was invoked with a transclusion
like

{{action}}Description of the action....

The transclusion should contain a span class which invokes a specific style for the next element.
For the convinience for the users, it would be good if no tag to close the style was necessary.
...at that point that we come back to those strange selectors an pseudo-classes. https://www.w3.org/TR/CSS2/selector.html#adjacent-selectors.
I still do not see how to get this working in TW.

Yours Jan

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c4d47033-82d2-4240-875b-504121b866e3%40googlegroups.com.

[@TiddlyTweeter]

Ciao Jan

If you don't know of it--I suggest you have a look at the Fountain project which uses a Markdown type system (but its own rulesets devised specifically for screenplays) that can then be output to other formats. It was devised by a screenwriter. I strongly suspect that the approach they take might be adaptable to TW, at least parts of it.

https://fountain.io/faq

Best wishes
Josiah

[@TiddlyTweeter]

Ciao Jan

Further to my last ...

In a discussion on Twitter @Jermolene mentioned this too of possible relevance to screenplays:  https://github.com/azcoppen/screenplay-parser.

I'm pretty convinced TW can do screenplays well. But I think its best if they done in a way that an editor basically only sees plain monospaced text, because that is all they are.

Best wishes
Josiah

[Jan Johannpeter]

Hi Josiah,
Fountain is a very good Idea... BJ already proposed it some time ago - and he also furnishes a possible solution: http://bjtools.tiddlyspot.com/#%24%3A%2Fplugins%2Fbj%2Ftypestemplate unfortunatly i could not find out out how to implement it.
Can anyone get it to work in TW5?

-Jan

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/08d6edf3-4ce5-4f3f-9035-4f1ff9d5a0c1%40googlegroups.com.