How to create a stylesheet for transcluded field contents (use case: journal-day-summary field displayed in Extendable Calendar)

#1

At present I manually put both content and styling in my journal-day-summary field. I assume this is bad practice.

* Climbed Mount Everest<br><br>* Finished War and Peace

This is a nightmare if I ever decide in the future that I don’t want asterisks, or if I want a single <br> instead of two. I would have to open every single journal entry ever written to change the styling.

How do I change the journal-day-summary field from being a single-line text box to being a multi-line text box? (I’m assuming this will help in the styling somehow.)

How do I take care of the styling outside the field? For instance if it is a multi-line text box like so:

Climbed Mount Everest
Finished War and Peace

How do I create a stylesheet that tells it to put an asterisk and a <br><br> between each item?

My use case:

The contents of the journal-day-summary field are being displayed in @buggyj 's Extendable Calendar - How to get bjtools Extendable Calendar to display the contents of a field

Not sure if I should have posted there, or here as a new topic.

#2

I don’t see any “bad practice” per se in the above example but I’m guessing you really want the bullets to be real/formatted bullets. I am not familiar with the plugin you refer to, which may come with certain limitations, but generally if you want bullets to format correctly (pretty bullet, indent, etc) you need an empty row above the first bullet.

As for applying styling, you can use the TW way to do it like so

@@.mystyleclass
* one
* two
@@

…and you define .mystyleclass in a stylesheet tiddler using standard CSS and by tagging the tiddler $:/tags/Stylesheet and the tiddler type to “text/css”

You probably need to hack the plugin you’re using.

#3

I think this is a question about creating multi-line content in fields.

#4

For part 2 of your question - or rather specifically "

How do I create a stylesheet that tells it to put an asterisk and a <br><br> between each item?

If you are able to tackle this in a custom CSS tiddler then you could start with the following as a basis for experimentation, instead of the br tag that you seek it will add a single new line and you can then pad that with space as you require. You would need to change the CSS to target the elements you are interested in, my example taken from my own custom CSS targets citations in blockquotes.

blockquote.noBorderBOX cite::after { 
display: block;
content:" ";
margin-bottom: 20px;
/* neccessary to force a new line after the cite */
}

The CSS before and after directives are a little controversial with respect to the original vision of CSS being purely styling and HTML taking care of content and so in the spirit of this they do not allow for HTML tags which is why in the above case the content of the block is a simply a single space, you would not be able to add
but the block element will force a new line before whatever comes next so you get a very similar result.

If you are familiar with your browsers developer tools then inspect an example of the element you want to force a line break on and so work out what you need to replace blockquote.noBorderBOX cite with.

As you can see I also added extra space by means of an optional margin-bottom: statement.

If you are debugging then temporarily replace the space in content field of the above CSS with a market that you can see in the rendered text - say a digit like 9 - easier to check all is well before you change it to a single space.

Does that help?

#5

You can use a FieldEditorFilter, usually split into two parts: One tiddler contains the markup, and a second one, tagged $:/tags/FieldEditorFilter, tests the field name to see which editor you want. For instance,

title: $:/_/my/config/EditTemplateFields/Templates/textarea

<$edit-text 
  tiddler=<<currentTiddler>>
  field=<<currentField>>
  tag="textarea"
  class="tc-edit-texteditor tc-edit-fieldeditor"
  placeholder="field value"
  tabindex={{$:/config/EditTabIndex}}
  cancelPopups="yes"
/>

title: $:/_/my/config/FieldEditorFilters/journal-day-summary
tags: $:/tags/FieldEditorFilter
list-before: $:/config/FieldEditorFilters/default

[match[journal-day-summary]then[$:/_/my/config/EditTemplateFields/Templates/textarea]]

One approach is to manipulate the text, then wikify the results. We could do this in a procedure/macro, and call that inline. I’d prefer to do it in a ViewTemplate, like this:

title: $:/_/my/view-templates/journal-day-summary
tags: $:/tags/ViewTemplate

\function newline() [charcode[10]]

<% if [<currentTiddler>has[journal-day-summary]] %>

!! Day Summary

<$wikify
  name="summary" 
  text={{{ [{!!journal-day-summary}split<newline>!match[]addprefix[* ]join<newline>] }}}  
  mode="block"
  output="html"
>
  <<summary>>
</$wikify>

<% endif %>

You can see this all in action by downloading the following and dragging the resulting file onto a wiki:

JournalField.json (1.9 KB)

It looks like this:

image
image830×469 20.6 KB

But I might suggest that you’re better off keeping the asterisks in place. That would allow us to simplify the template, and uses what is by far the most common textual visual indicator of a bullet point: asterisks simply look like bullets.

If you wanted to do that, then we can replace the whole <<wikify>> call with just {{!!journal-day-summary}}:

title: $:/_/my/view-templates/journal-day-summary
tags: $:/tags/ViewTemplate

<% if [<currentTiddler>has[journal-day-summary]] %>

!! Day Summary
{{!!journal-day-summary}}
<% endif %>
2 Likes