[tw5] Font problems --- while editing, while displaying devanagari text

Google Group (Read Only)
#1

I feel that as I switch from a single column view to a two column view, the display font size reduces. I do not want that to happen. Any way to achieve that?

Secondly, the font that is used when I am editing a tiddler is definitely smaller than the one used for displaying the tiddler. How do I increase the font size when I am editing a tiddler?

Lastly, is there a way to specify the font to use when displaying and editing, say Devanagari text?

#2

I don’t know what “two column view” refers to on your first part, but for the second and third pieces I think you’re looking for the values in “Theme Tweaks”.

  1. Open the $:/ControlPanel (gear icon at top of sidebar by default)
  2. Amongst the top tabs pick the second one - Appearance
  3. Amongst the now second row of tabs, pick the last one - Theme Tweaks
    Below the layout options, you’ll see “Settings” where the font options (and fallbacks) are all editable. Below that is the “Sizes” area where it allows you to change various font sizes and line heights. If none of those get you exactly what you want, then it’s probably some CSS needed, though I’m not an expert in that area.
#3

I do not know about the two column view. But for editing I am using following at the moment.

Create a tiddler, give it a title and tag $:/tags/Stylesheet and the following content:

tc-tiddler-frame textarea.tc-edit-texteditor {font-size: 125%; background: #485052; color: #48E16A;}

This will certainly not be what you want, but you can insert your own color and size.

#4

Sorry to highjack the thread a bit - hoping we solved your problem Sandip!

@Birthe / strikke… - can I ask how you learned to navigate the class hierarchy? I’m trying very hard how to learn this and am really struggling. I recently started using the Inspect / F12 stuff, but It’s not pointing me to the right place. Is there a guide for this stuff somewhere? For example when I “inspect” the edit area while in edit view I get this (below screenshot) - how would I get that to your tc-tiddler-frame textarea.tc-edit-texteditor answer?

Capture.PNG

#5

@Stobot. I am sorry but I do not know. I just remembered that I had solved my problem in an old tiddlywiki from 2015, found it and looked i through to see where i was and how. Sorry.

The inspector is the only help I know of. It is gradually becoming a better help for at least some thing.

#6

Hello Stobot,

Thanks.

About the two column view, it was a plugin I was using called Stories. It lets me open the story in two columns. But I have disabled it for now.

I have already tried tweaking settings in theme tweaks. That has not helped. Those settings affect the display font. But not the font when I edit.

@strikke,

Thanks. I tried your solution. But that did not have any effect on the display. I tried changing the colors, etc. But nothing changed.

– 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 . To view this discussion on the web visit .

#7

I think strikke/@Birthe might have forgot a leading dot(period). So:

.tc-tiddler-frame textarea.tc-edit-texteditor {font-size: 125%; background: #485052; color: #48E16A;}

#8

Thank you @Stobot. You are of course right - I missed something in the copy paste.

1 Like
#9

Thanks Stobot.

What a difference a . makes!

It works as expected.

#10

Hi all,

Here’s an easy way to get the css path to an element :

Open the inspect element tool : ctrl+shift+c (firefox/chrome) , then select the element you want to inspect
You can also do a right-click>inspect

The element will be highlighted in the dev tool pannel that shows up. Make sure this is the correct element (sometimes it can be nested inside the element inspected), then right click on the highlighted element > copy > copy selector or copy css path. This will give a selector css for the element.

This doesnt always give you the selector you need, for example if you do that with chrome on the text area of a tiddler, in edit mode , you will get :

body > textarea

This is because the textarea is in an iframe, which is treated like a separate document by the browser. In this case, just select the iframe that contains the element and you’ ll get this :

body > div.tc-page-container-wrapper > div > div > div > section > div.tc-tiddler-frame.tc-tiddler-edit-frame.tc-tiddler-exists> span > span > div:nth-child(5) > div > iframe

This rule is very specific and can be generalized with a bit of clean up :

.tc-tiddler-edit-frame iframe

Now if you look closely at the html, you’ll see that the iframe actuall has several class(tc-edit-texteditor and tc-edit-texteditor-body), but for some reason chrome doesnt copy those. So if we correct this, we get :

.tc-tiddler-edit-frame .tc-edit-texteditor.tc-edit-texteditor-body {… your rules css here …}

See Page Inspector - Firefox Developer Tools | MDN and View and change CSS - Chrome Developers for more info on the dev tools, and CSS: Cascading Style Sheets | MDN to learn more about CSS

1 Like
#11

Thank you @TĂ©lumire for writing this up. I am sure it will help a lot of people.