[tw5] Re: [TW5] How to embed a font (using @font-face and data-url)

2023-02-27 Thread Jeremy Ruston
Hi Lin OneTwo,

It isn't necessary to do the base64 encoding manually. Have a look at the 
font embedded in the "Startlight" theme that is accessed via the 
`<>` macro:

https://github.com/Jermolene/TiddlyWiki5/blob/master/themes/tiddlywiki/starlight/styles.tid

Best wishes

Jeremy

On Monday, February 27, 2023 at 4:00:21 PM UTC Lin Onetwo wrote:

> I encode it manually instead:
>
> 1. download the font file, for example, `FiraCode-VF.woff2`
> 2. `base64 
> '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2' -o 
> '/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2.base64.txt'`
>
> as said in 
> https://stackoverflow.com/questions/26867893/converting-and-rendering-web-fonts-to-base64-keep-original-look
> 3. put base64 string in the `
> src: url('data:@file/octet-stream;base64,yourbase64');
>as said in 
> https://stackoverflow.com/questions/35120217/base64-encoded-opentype-font-face-using-data-uri
>
> An example: 
> https://github.com/tiddly-gittly/itonnote-theme/commit/ff75e1ae913d7443d89e7838b10ced8ef4c7e461
> 在2017年10月2日星期一 UTC+8 06:32:39 写道:
>
>> Hi all
>>
>> Like Mario and Josiah I prefer the SVG way. I tried to make the graphics 
>> accessible and translatable too. 
>>
>> So here’s a little plugin to add HarveyBalls to your wikis: 
>> http://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FHarveyBalls 
>>
>> Make a backup, drag it over, try it and let me know how it goes. Answers 
>> might take some time.
>>
>> Have a good moonshine night!
>> Thomas
>>
>>
>> Am Sonntag, 1. Oktober 2017 11:04:23 UTC+2 schrieb PMario:
>>
>>>
>>> Why don't you implement them as SVGs. It will be much less trouble.  And 
>>> the SVGs should be simple.
>>>
>>> -m
>>>
>>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/675043ef-988d-47a9-ac8b-7533d050c923n%40googlegroups.com.


[tw5] Re: [TW5] How to embed a font (using @font-face and data-url)

2023-02-27 Thread Lin Onetwo
I encode it manually instead:

1. download the font file, for example, `FiraCode-VF.woff2`
2. `base64 
'/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2' -o 
'/Users/linonetwo/Downloads/Fira_Code_v6.2/woff2/FiraCode-VF.woff2.base64.txt'` 
  
as said in 
https://stackoverflow.com/questions/26867893/converting-and-rendering-web-fonts-to-base64-keep-original-look
3. put base64 string in the `
src: url('data:@file/octet-stream;base64,yourbase64');
   as said in 
https://stackoverflow.com/questions/35120217/base64-encoded-opentype-font-face-using-data-uri

An example: 
https://github.com/tiddly-gittly/itonnote-theme/commit/ff75e1ae913d7443d89e7838b10ced8ef4c7e461
在2017年10月2日星期一 UTC+8 06:32:39 写道:

> Hi all
>
> Like Mario and Josiah I prefer the SVG way. I tried to make the graphics 
> accessible and translatable too. 
>
> So here’s a little plugin to add HarveyBalls to your wikis: 
> http://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2FHarveyBalls 
>
> Make a backup, drag it over, try it and let me know how it goes. Answers 
> might take some time.
>
> Have a good moonshine night!
> Thomas
>
>
> Am Sonntag, 1. Oktober 2017 11:04:23 UTC+2 schrieb PMario:
>
>>
>> Why don't you implement them as SVGs. It will be much less trouble.  And 
>> the SVGs should be simple.
>>
>> -m
>>
>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/067180b0-1e3d-4b84-9bae-0132a763ecbcn%40googlegroups.com.


[tw5] Re: copy button in each code block

2023-02-27 Thread yasai ya
Sorry, it wasn't fixed at all, but finally I fixed the problem.

param=<<__tx__>>
↓
param={{{ [<__tx__>trim[]] }}}



Full code
---

\define code(tx)


table.mycodeblock {
  border:   none;
  margin:   7px 0 11px;
}
table.mycodeblock pre {
  margin:   0;
}
table.mycodeblock td {
  border:   none;
  padding:  0;
  position: relative;
}
table.mycodeblock button {
  position: absolute;
  left: -30px;
  top:  2px;
}
table.mycodeblock button svg.tc-image-button {
  height:   2em;
  width:2em;
  fill: none;
}
table.mycodeblock:hover button svg.tc-image-button {
  fill: <>;
  animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
  animation-name: breathe,blink;
}
table.mycodeblock button:hover svg.tc-image-button {
  fill: <>;
}
@keyframes blink {
  from { opacity: 1; }
  to   { opacity: .35; }
}
@keyframes breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.5); }
}




```$tx$
```

<$button class="tc-btn-invisible" message="tm-copy-to-clipboard" 
param={{{ [<__tx__>trim[]] }}} 
tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
\end
2023年2月24日金曜日 13:47:50 UTC+9 yasai ya:

> Thank you!
> Your post was very helpful.
>
> But it looked like the CSS wouldn't apply without the macro tiddler was 
> visible.
>
> So I modified it like this.
>
> ```
> \define code(tx)
>
> 
> table.mycodeblock {
>   border:   none;
>   margin:   7px 0 11px;
> }
> table.mycodeblock pre {
>   margin:   0;
> }
> table.mycodeblock td {
>   border:   none;
>   padding:  0;
>   position: relative;
> }
> table.mycodeblock button {
>   position: absolute;
>   left: -30px;
>   top:  2px;
> }
> table.mycodeblock button svg.tc-image-button {
>   height:   2em;
>   width:2em;
>   fill: none;
> }
> table.mycodeblock:hover button svg.tc-image-button {
>   fill: <>;
>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>   animation-name: breathe,blink;
> }
> table.mycodeblock button:hover svg.tc-image-button {
>   fill: <>;
> }
> @keyframes blink {
>   from { opacity: 1; }
>   to   { opacity: .35; }
> }
> @keyframes breathe {
>   from { transform: scale(1); }
>   to   { transform: scale(1.5); }
> }
> 
> 
>
> ```$tx$
> ```
> <$button class="tc-btn-invisible" message="tm-copy-to-clipboard" 
> param=<<__tx__>> 
> tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}
> \end
> ```
>
> I'm newbie to HTML, so if there are any problems with this approach, I'd 
> appreciate it if you could let me know.
> 2018年5月4日金曜日 3:39:32 UTC+9 Rustem:
>
>> I managed to do it with just macros and CSS. One thing I could not avoid 
>> is copying line breaks before and after the code. Hope there will be a 
>> plugin someday that will overcome that, as well as do away with the table 
>> wrapper. Here is a self-contained demo tiddler.
>>
>> \define code(tx)
>> 
>>
>> ```$tx$
>> ```
>> <$button class="tc-btn-invisible" 
>> message="tm-copy-to-clipboard" param=<<__tx__>> tooltip={{$:/language/
>> Buttons/CopyToClipboard/Hint}}>{{$:/core/images/copy-clipboard}}> >
>> \end
>>
>> 
>> table.mycodeblock {
>>   border:   none;
>>   margin:   7px 0 11px;
>> }
>> table.mycodeblock pre {
>>   margin:   0;
>> }
>> table.mycodeblock td {
>>   border:   none;
>>   padding:  0;
>>   position: relative;
>> }
>> table.mycodeblock button {
>>   position: absolute;
>>   left: -30px;
>>   top:  2px;
>> }
>> table.mycodeblock button svg.tc-image-button {
>>   height:   2em;
>>   width:2em;
>>   fill: none;
>> }
>> table.mycodeblock:hover button svg.tc-image-button {
>>   fill: <>;
>>   animation: 0.35s cubic-bezier(.35, 0, .35, 1) 2 alternate;
>>   animation-name: breathe,blink;
>> }
>> table.mycodeblock button:hover svg.tc-image-button {
>>   fill: <>;
>> }
>>
>> @keyframes blink {
>>   from { opacity: 1; }
>>   to   { opacity: .35; }
>> }
>> @keyframes breathe {
>>   from { transform: scale(1); }
>>   to   { transform: scale(1.5); }
>> }
>>
>> 
>>
>>
>> in your tiddlers just write :
>>
>> <> code here
>> more code
>> """>>
>>
>>
>>
>> On Saturday, April 28, 2018 at 5:17:04 PM UTC-7, Rustem wrote:
>>>
>>> That works, thanks. Would be great though, to have the button appear 
>>> inside the block, on hover.
>>>
>>> On Saturday, April 28, 2018 at 2:31:13 AM UTC-7, BurningTreeC wrote:

 hi @Rustem 

 you could just create a macro in a tiddler say $:/_macros tagged with 
 $:/tags/Macro with the content:

 \define code(text)
 <>
 ```
 $text$
 ```
 \end

 in your tiddlers just write:

 <>>>
 code here

 more code

 """>>

>>>

-- 
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