To Whom It May Concern: it was just a silly z-index problem.
div.tc-editor-toolbar {
position: sticky;
top: 0px;
z-index:1;
}
now I can use embedded font-face in the editor (thanks to CodeMirror) AND
have a sticky toolbar. (and I'm perfectly happy!)
: )
Il giorno venerdì 3 dicembre 2021 alle 08:50:38 UTC+1 Maurizio Torchio ha
scritto:
> Hi Charlie, using a local font file, i.e
>
> @font-face {
> font-family: 'CormorantGaramond';
> font-style: normal;
> font-weight: 400;
> src: url(./tiddly/CormorantGaramond-Regular.ttf);
> }
>
> does not work (it works anywhere in the wiki, but not in the EditTemplate).
> anyhow, even if it worked, I prefer to have a single file (that's why i
> use this method to embed my font-face:
> http://kookma.webfonts.tiddlyspot.com/)
>
> summing up: *CodeMirror plugin solves the problem *(and of course adds
> other nice functionalities too) *BUT the EditorToolbar does not stick
> anymore* (to the top of the screen when scrolling). ie.
>
> div.tc-editor-toolbar {
> position: sticky;
> top: 0;
> }
>
> does not work anymore.
> (having a sticky toolbar is quite useful for me in mobile mode). (i tried
> to change to visible the overflow in CodeMirror to no avail).
>
> thank you very much anyhow!
> maurizio
>
> Il giorno giovedì 2 dicembre 2021 alle 17:06:52 UTC+1 [email protected]
> ha scritto:
>
>> If of any use to anybody, here's how I've setup the editor to use a
>> www.w3schools font face. (I'm figuring TiddlyWiki could use a font face
>> file sitting in the same file folder as the TiddlyWiki.)
>>
>> [image: Screenshot 2021-12-02 12.03.52 PM.png]
>>
>> On Thursday, December 2, 2021 at 4:08:39 AM UTC-4 [email protected]
>> wrote:
>>
>>> thank you Charlie and Jeremy! yes: mine is a font-face.
>>> the problem is: I love fonts! I use different fonts for different wiki,
>>> they embody the "soul" of the wiki (and I'd like to have the same font
>>> whether desktop or mobile, viewing or editing). that's why until now i used
>>> the edit widget for editing. but this means: no toolbar, and it can be
>>> annoying, especially on mobile.
>>> anyhow: thanks again for this priceless tool!
>>> m.
>>>
>>> Il giorno mercoledì 1 dicembre 2021 alle 18:23:39 UTC+1
>>> [email protected] ha scritto:
>>>
>>>> Thanks for the info, Jeremy. 2-tier client server guy over here, so
>>>> the innards of web browsers is foreign territory for this kid.
>>>>
>>>> So whatever browser Maurizio is using, that approach I'm suggesting
>>>> should work with some font-family available by default in whatever browser
>>>> Maurizio is using, right?
>>>>
>>>> On Wednesday, December 1, 2021 at 1:15:16 PM UTC-4 [email protected]
>>>> wrote:
>>>>
>>>>> I think it's working for CJ because the "Brush Script MT" font is
>>>>> available by default in that browser, without needing to be defined by a
>>>>> font-face tag. That technique only works for built-in fonts because
>>>>> there's no way to inject the CSS font-face declaration into the iframe.
>>>>>
>>>>> Best wishes
>>>>>
>>>>> Jeremy
>>>>>
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> On Wednesday, December 1, 2021 at 5:03:36 PM UTC [email protected]
>>>>> wrote:
>>>>>
>>>>>> Just to confirm, I went to tiddlywiki.com, edited (i.e. clicked the
>>>>>> "edit" button) that core tiddler, *(1)* added the style lines above
>>>>>> the edit widget, and *(2)* altered the class for the edit widget,
>>>>>> adding bubba as the third class.
>>>>>>
>>>>>> Works A-1 for me.
>>>>>>
>>>>>> Maybe Brush Script MT cursive doesn't work with your web browser?
>>>>>> (Another screenshot for the proof in the pudding, with an obnoxious font
>>>>>> size, below.)
>>>>>>
>>>>>> It is the font in the editor that you want adjusted, right?
>>>>>>
>>>>>> Total aside: "bubba" because it is easy for me to find and remember.
>>>>>> I'm a huge fan of the movie Forrest Gump, and really liked "Bubba" in
>>>>>> that
>>>>>> movie.
>>>>>>
>>>>>> [image: Screenshot 2021-12-01 12.58.38 PM.png]
>>>>>>
>>>>>> On Wednesday, December 1, 2021 at 12:45:03 PM UTC-4 Charlie Veniot
>>>>>> wrote:
>>>>>>
>>>>>>> I forgot to mention, you have to add that "bubba" class to the edit
>>>>>>> text widget.
>>>>>>>
>>>>>>> As per the screenshot, the editor is showing that funky font.
>>>>>>>
>>>>>>> However, it did strangely take half-a-minute or so for that font to
>>>>>>> take effect.
>>>>>>>
>>>>>>> On Wednesday, December 1, 2021 at 11:45:47 AM UTC-4
>>>>>>> [email protected] wrote:
>>>>>>>
>>>>>>>> thank you cj.v, but it didn't worked for me.
>>>>>>>> it assign the class bubba to the iframe (just as
>>>>>>>> $:/themes/tiddlywiki/vanilla/settings/editorfontfamily does) but...
>>>>>>>> nothing
>>>>>>>> changes.
>>>>>>>> i suspect it has to do with what Jeremy wrote:
>>>>>>>>
>>>>>>>> "The reason that custom fonts doesn’t work with the editor toolbar
>>>>>>>> is because of the way that it creates the textarea element within an
>>>>>>>> embedded iframe (this is done so that the selection in the textarea
>>>>>>>> isn’t
>>>>>>>> lost when the user clicks on a toolbar button and the textarea loses
>>>>>>>> focus).
>>>>>>>>
>>>>>>>> The iframe doesn’t inherit any of the styles in the main document,
>>>>>>>> so the code actually creates a hidden textarea and then reads back the
>>>>>>>> styles, and then applies them to the textarea in the iframe. That
>>>>>>>> means
>>>>>>>> that any formatting applied to the textarea will be faithfully
>>>>>>>> reproduced
>>>>>>>> within the iframe. However, it only works for CSS properties applied
>>>>>>>> directly to the textarea; it doesn’t transfer fonts, animations or
>>>>>>>> other
>>>>>>>> resources that can be defined in CSS.
>>>>>>>>
>>>>>>>> (The code is here:
>>>>>>>> https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/editor/engines/framed.js
>>>>>>>> )
>>>>>>>>
>>>>>>>> We could update things so that special stylesheets identified by a
>>>>>>>> new system tag such as $:/tags/Stylesheet/FramedEditor would be
>>>>>>>> automatically inserted within the iframe."
>>>>>>>>
>>>>>>>> Il giorno mercoledì 1 dicembre 2021 alle 14:57:19 UTC+1
>>>>>>>> [email protected] ha scritto:
>>>>>>>>
>>>>>>>>> G'day,
>>>>>>>>>
>>>>>>>>> If you are not averse to changing core TiddlyWiki templates, you
>>>>>>>>> could add a style at the top of the content in
>>>>>>>>> $:/core/ui/EditTemplate/body/editor.
>>>>>>>>>
>>>>>>>>> See my screenshot below, in which I set the font to Brush Script
>>>>>>>>> MT cursive.
>>>>>>>>>
>>>>>>>>> It would be good for more experienced TiddlyWiki users to chime in
>>>>>>>>> on any downsides to this approach.
>>>>>>>>>
>>>>>>>>> *(BTW: please ignore the goofy-looking "!!! EditTemplate body" ...
>>>>>>>>> that's me entering little breadcrumbs to figure out which core
>>>>>>>>> tiddler is
>>>>>>>>> which.)*
>>>>>>>>>
>>>>>>>>> [image: Screenshot 2021-12-01 9.52.23 AM.png]
>>>>>>>>>
>>>>>>>>> On Wednesday, December 1, 2021 at 6:19:45 AM UTC-4
>>>>>>>>> [email protected] wrote:
>>>>>>>>>
>>>>>>>>>> Hi everybody, any progress on this? (I really don't like see a
>>>>>>>>>> different fontfamily when editing)
>>>>>>>>>> thank you so much for all the great work!
>>>>>>>>>>
>>>>>>>>>> maurizio
>>>>>>>>>>
>>>>>>>>>> Il giorno martedì 30 gennaio 2018 alle 21:09:06 UTC+1 Ton Gerner
>>>>>>>>>> ha scritto:
>>>>>>>>>>
>>>>>>>>>>> Hi Alfonso,
>>>>>>>>>>>
>>>>>>>>>>> If I remember correctly the following comes from Jeremy's
>>>>>>>>>>> TalkyTalky <https://tiddlywiki.com/talkytalky/> which uses the
>>>>>>>>>>> Google font Lato:
>>>>>>>>>>>
>>>>>>>>>>> It contains the follwing stylesheet (a tiddler tagged with
>>>>>>>>>>> $:/tags/Stylesheet):
>>>>>>>>>>>
>>>>>>>>>>> \define register-font(family,title,style,weight)
>>>>>>>>>>> @font-face {
>>>>>>>>>>> font-family: "$family$";
>>>>>>>>>>> font-style: $style$;
>>>>>>>>>>> font-weight: $weight$;
>>>>>>>>>>> src: url(<<datauri "$title$">>) format("woff");
>>>>>>>>>>> }
>>>>>>>>>>> \end
>>>>>>>>>>> \rules only filteredtranscludeinline transcludeinline macrodef
>>>>>>>>>>> macrocallinline
>>>>>>>>>>>
>>>>>>>>>>> /*
>>>>>>>>>>> ** Fonts
>>>>>>>>>>> */
>>>>>>>>>>>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-black-webfont.woff"
>>>>>>>>>>> "normal" "900">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-blackitalic-webfont.woff"
>>>>>>>>>>> "italic" "900">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-bold-webfont.woff"
>>>>>>>>>>> "normal" "700">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-bolditalic-webfont.woff"
>>>>>>>>>>> "italic" "700">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-hairline-webfont.woff"
>>>>>>>>>>> "normal" "100">>
>>>>>>>>>>> <<register-font "Lato"
>>>>>>>>>>> "$:/_fonts/lato-hairlineitalic-webfont.woff" "italic" "100">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-italic-webfont.woff"
>>>>>>>>>>> "italic" "400">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-light-webfont.woff"
>>>>>>>>>>> "normal" "300">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-lightitalic-webfont.woff"
>>>>>>>>>>> "italic" "300">>
>>>>>>>>>>> <<register-font "Lato" "$:/_fonts/lato-regular-webfont.woff"
>>>>>>>>>>> "normal" "400">>
>>>>>>>>>>>
>>>>>>>>>>> Hope that helps.
>>>>>>>>>>>
>>>>>>>>>>> Cheers,
>>>>>>>>>>>
>>>>>>>>>>> Ton
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/7da4c871-afc2-4f5d-be32-c2030fcb93e0n%40googlegroups.com.
