Tinderbox Forum

About Preview settings


I have changed the settings for Paragraph Spacing and Text font in Document Settings, but the changes do not seem to be reflected in Preview.

What should I do if I want Preview to have the same settings as Document Settings?

These have no effect in preview. Those settings relate to =to the text of notes, i.e. the contents of $Text as seen in the text are of the Text pane. The text pane’s Preview sub-tab is used for seeing HTML formatted text (which may be created directly, via export codes or in some cases Markdown).

So if you are trying to style text in the text preview, you need to apply an export template and use CSS to style the exported data.

My current knowledge does not allow me to try this method.
Does detailed information about preview settings exist somewhere?

Hi @Victor I totally get it. all this can be very intimidating, especially when you are not familiar with RTF, markdown, HTML and various methods for rendering and previewing content.

Give me a day and I create a video that explains all this.


@Victor, hi Victor. Please take a look at this video. Hopefully, it will help you understand what’s going on behind the scenes and why the $Text window does not function in Preview as you might expect. The fundamental reason is that the two functions serve different purposes. Anyway, please let me know what you think.

What I would like to achieve with Preview is the following.

  • Make the font size the same as the text
  • Make the width between lines the same as the text
  • Make the text color the same as the text
  • Center the text
  • Make links open

After watching the video, I opened “TBX L - Previewing Your Notes in Tinderbox” and tried to change the CSS note font size values, but the changes I made were not reflected in the preview. What am I doing wrong?

Stepping back, why are you using preview? The original design concept was to show how, yet-to-be-exported exports would render in HTML.

Are you previewing with a view to HTML export or text export. If not, you don’t need to use preview and instead style your text in the text window.

The question is relevant because unless we know why you are using preview (i.e. your export method) it is difficult to give the right advice. Indeed, you may not need preview at all.

The reason I’m trying to use “Preview” instead of “Text” is images.

Tinderbox seems to have a problem with pasting images into notes, so I want to use img tags to link to external images and preview notes with images.

However, I found that the text settings are not reflected in the preview and I am having trouble finding a solution.

The point the @mwra raises is an important one. Your intentions and matter in the choices you make with your inputs and how you use this potent tool.

If you are looking to use Tinderbox to collect and curate text notes and have no intentions to export these notes to use in another capacity, then the text view may be sufficient. You can view single RTF formatted notes or preview an unformatted note and its children.

However, if you’re intention is to go beyond text, as in @Victor’s case, want to include inline images, text formatting, and other transformations in Preview and possibly through export, then utilizing Tinderbox’s powerful templating tools is the way to go.

@Victor, pulling in images so that you can view them in Preview is a wonderful strategy, especially if you have several images in your document since if you paste the images into the text, Tinderbox converts these images to BMPs. The document file size can get quite large. Luckily, there is a simple way to manage this.

As I demonstrate in the above-referenced training, you can use HTML tags in the $Text attribute, aka the text field, of your notes. You can use the HTML with attributes to do some amazing things. Below are some resources for you.

Here are some resources for you.
Sample TBX file that shows how to do the inline formatting and how to insert an image with HTML and markdown notation.

TBX L - Working with Images in TBX.zip (3.3 MB)

REMEMBER: you’ll want to change the path for the images to match where you place them on your hard drive. Also, don’t forget the lesson to use “straight-qoteses” and not curly quotes. Unless you turn the $Smartquotes off then Tinderbox will automatically transform your straight-quotes to curly-quotes, which will break the html (as noted in the training video).

Note: As @TomD notes “Understanding is a deliberate choice.” If you’re not familiar with HTML tags there will be some learning to be done. Here is a wonderful resource to learn about HTML styling https://www.w3schools.com/. Here is a markdown cheatsheet: https://www.google.com/search?client=firefox-b-1-d&q=common+markdown+cheat+sheet.

This helps. So you’re not trying to export but use an internal export-like preview.

It doesn’t have a problem. It is ore that it was never originally designed for this use, so image handling may be sub optimal.

This involves HTML, the fine detail of which is not controlled by Tinderbox.

So, the way to understand the challenge is you need to create an HTML page that looks like your Tinderbox note.

The first important part here is (HTML) export is not trying to make a WYSIWYG export, in the way a default MS Word aims to show you the ‘printed’ version of the text you write.

HTML export will pick up a few general things like bold/underline/italic, but beyond that you will need to define things like line spacing via CSS in an HTML template. Tinderbox will export basics like bold/underline/italic to HTML, but if you want fine whitespace control and things like coloured or highlighted text you will need to define that in your HTML pages CSS.

If not used to CSS, the best thing is Google for a CSS tutorial, as CSS is a general standard rather than a Tinderbox process. There are lots. Otherwise simply cutting and pasting CSS code is not a good approach for the fine layout detail you want. The HTML identifies the addressable parts of the page and the CSS is essentially your layout code, which uses a cascading inheritance model very similar to the way Tinderbox inherits.

With no export template available/assigned, Tinderbox does a best guess what this text might mean.

The point of the second link I added is shown here, if I add an HTML export template and apply it to the note:

You may be thinking why isn’t the RTF-only styling exported. Well, it never has been. The extra RTF stylings are there for those who want to work in RTF and don’t export.

That’s how it is. Just don’t shoot the messanger!


I might add, that this issue of an ‘internal’ preview will likely get better in the next version but, I can’t talk about unpublished stuff here in any more detail.

Yes, I suspect that that will be the case, however, for one to fully reap the power of Tinderbox, learning the basics of HTML or markdown notation is a great idea. The foundation tagging structure for either is pretty straightforward.

As you get familiar with the solution and leverage the forum for learning your knowledge should grow quickly.

I am amazed at the growth I’ve been able to achieve with a little bit of effort and a lot of kindness of strangers (many of whom I can now call friends): @eastgate, @mwra, @TomD, @bmgphd, @beck, @Bernard-0, @rtalexander, @PaulWalters, @pmaheshwari…(this list grows daily).


^^ Yes. I’ve long forgotten the source of similar knowledge I acquired form others (it was a long time back) but I totally agree the above. We have to steel ourselves to learn the unfamiliar but the kindness of strangers is out there. We just have to ask.

It doubtless shows, but I’ve never had a days formal training in any of this stuff! The knowledge grows overtime. Both by use, and by the act of explaining it to others. The latter normally making me realise that I don’t understand things half as well as I thought I did. :slight_smile:

I often fall back on the adage, “if you really want to learn something, teach it.” To your point, the process of teaching helps you find your gaps. No matter how much you prep for these gaps students will help you find the ones you missed or show you how what you thought was totally obvious is anything but because you did not understand their context.

1 Like

Thank you for your detailed explanation.
I am very busy right now and would like to learn when I have time.


Thank you for your detailed explanation.