How to make horizontal line only half of the tiddler width?

#1

Hi everyone :grinning:

I like to write my note in TW as if I’m writing on a book. I use refnotes plugin from our friend Mohammad. It works well but I’m curious how to make the footnote to have a horizontal line just half of the tiddler width so it will look like we are reading a page of a book. I’m afraid this is a silly question but I have search the forum and can not find one answer, not even close.

Alternatively, I just use ‘’- - -’’ to make a horizontal line but it covers all the tiddler width from left to right. It feels strange or unfamiliar to see the footnote below the full horizontal line.

Below is the screenshot that I want

Screen Shot 2023-08-30 at 08.04.11
Screen Shot 2023-08-30 at 08.04.111376×242 2.09 KB

If there is someone who can help on this question, I will appreciate very much. And perhaps it will be a great addition to the already great plugin refnote.

Best Regards
Fendy

#2

I is wise to mention someone eg @Mohammad if you wish to attract their attention, as I just did :nerd_face:

1 Like
#3

Try this macro:

\define hr-left() <hr style='margin-right:50%;'/>
#4

<hr> also takes classes (<hr class="hr-left">), so you could add @CodaCoder’s style to a stylesheet (so as to not have to invoke the whole macro in every tiddler wiith a footnote)

#5

I tend to use this form for a centred horizontal row

This uses tiddlywiki parameter form

<hr style.width="60%">

This uses a standard style

<hr style="width:60%;">

You could define and use a class definition for the above or add other style parameters, for different formats.

  • I often colour it gray because it’s too dark by default.
  • Always leave a blank line after a HR or any html tag, and many widgets before you write wikitext to force it into block mode so it is evaluated correctly.
#6

Hi :grinning:
thanks for the advice. Sorry late to reply due to office work.

I’m still learning to use TW and I have limited knowledge on coding. I haven’t touched about macro but I try to read about it somewhere else. So this is the step I did :

  1. I make a tiddler with the title hr-left. I put \end at the end of the macro you send above and save the tiddler
  2. I type <<hr-left>> in my other testing tiddler and nothing shows up
  3. If I only type <hr style='margin-right:50%;'/> it shows a good horizontal line like I need but it means I did not use any macro at all.

I would like your guidance how to implement the macro. And for adding the style into the stylesheet as suggested by @catter-fly, I would also seek guidance in this forum, since I don’t really know the stylesheet setting.

As for @TW_Tones suggestion, I will come to it if the macro suggestion above fails in my case.

Many thanks for the support from the community

#7

Hi,

I made the following change to all occurrences of ‘hr’ in tiddlywiki, it is an attempt to copy the kind of break lines found in old fashioned books, the fade in and out either end gives the illusion of a line getting thinner at both ends, you could also change the width by changing the CSS.

.tc-tiddler-body hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin-top:2.0rem; margin-bottom:2.0rem;}

I added the above CSS to a tiddler with title ‘Custom CSS’, it has a tag as follows…

$:/tags/Stylesheet

Tiddlywiki treats tiddlers (or rather their content) with this tag as CSS files, it will over-ride the defaults.

Doing it this way (custom CSS file) is clean if you want to change all occurrences of ‘hr’ no need to style them individually this way but perhaps you don’t want them all changing.

You can call the custom CSS file anything you like, it’s the tag $:/tags/Stylesheet that is the important thing.

Screenshot from 2023-08-30 08-42-19

3 Likes
#8

Hi :grinning:

Really appreciate your idea on old fashioned fading line break. I copy your code below

Then I make a new tiddler like your instruction, give it the tag $:/tags/Stylesheet. Then I make a new tiddler to test it out. It seems I’m lacking the way to “execute the CSS code”. This is the screenshot

Screen Shot 2023-08-30 at 15.42.03
Screen Shot 2023-08-30 at 15.42.031580×1234 143 KB

Screen Shot 2023-08-30 at 15.43.05
Screen Shot 2023-08-30 at 15.43.051610×908 22.6 KB

Many thanks before

#10

Hi,

Try making your line as you first specified by typing 3 dashes.

---

Also try viewing a tiddler when out of edit mode, perhaps the right panel preview is giving a false impression.

Finally if nothing else works use right click on a ‘hr’ when in normal view mode in order to access your browser’s developer tools, if you don’t already know try and find your way to “inspect” - a feature that allows you to look in detail at a single html element in the page - you should be able to get hold of the CSS (cascade) that is responsible for the appearance of that element. This gives you the information to accurately target that element in your CSS.

#11

Hi :grinning:

This is the result, when it’s still in draft we can see horizontal line. But after I finish the draft, the horizontal line is gone. Is it any relation to my Tiddlywiki has not been saved? Suddenly its difficult to save to tiddlyhost.

Screen Shot 2023-08-30 at 15.53.14
Screen Shot 2023-08-30 at 15.53.141594×834 20.2 KB

Screen Shot 2023-08-30 at 15.53.23
Screen Shot 2023-08-30 at 15.53.231612×360 44.6 KB

Screen Shot 2023-08-30 at 15.59.25

#12

Hi,

If you are still stuck try deleting the changes you made to your custom CSS and see if everything goes back to normal.

#13

It looks like maybe you didn’t tag that tiddler with $:/tags/Macro …? That’s what makes it available to be used outside of the tiddler where you defined it.

#14

Wow thank you very much, now the macro works :100:.

I’m still new in Tiddlywiki. I don’t expect we need to make macro kind of tagging to make it works. Now not only I learn how to adjust the horizontal line, I learn about macro too. :innocent:

Again thank you and thanks to tiddlywiki forum :pray:

4 Likes
#15

Hi :grinning:

I try to delete the custom CSS and it goes back to normal. It seems I need to learn more about CSS. I already try to inspect the page like you mentioned before but I don’t know where to go from that point. For now I feel sufficient with the macro but I do need to challenge myself to implement the “old-break-line” book style. May be in near future I will open another new topic on that.

Thank you for your support :+1:

#16

There’s no need to “delete” your custom CSS since any styles will only apply IF you use the style in a tiddler.

Maybe this will help…

Tag a tiddler titled… css-custom (or similar) with $:/tags/Stylesheet. Then save any custom styles you’d like to use, as a class (.name). For example…

/* Block elements */
.hr-200 {width: 200px; } 
.hr-R50 {margin-right: 50px; } 
.hr-L20 {margin-left: 20px; }
.hr-Border {border-top: 1px solid Cyan; }

.indent20 {padding-left:20px;} /* padding can't be applied to HR */

/* Color */
.col-ALERT {color:#F00;}
.col-Peru {color:Peru;}

/* Fonts */
.tiny75 {font-size: 75%; }
.GaraF {font-family: Garamond, serif;}

Then in any tiddler, use the <hr> element with any class(es):

a horizontal rule (HR - no style) — <hr>

HR - fixed width (custom CSS) — <hr class="hr-200">

  • Note, horizontal rules are always centred until margins (not padding) are specified.

HR - right indent (custom CSS) — <hr class="hr-R50">

HR - left indent (custom CSS) — <hr class="hr-L20">

HR - fixed width, indent (combined) — <hr class="hr-200 hr-L20 hr-R50">

It’s definitely worthwhile learning CSS and a few useful HTML elements. CSS Tutorial (w3schools . com)

1 Like