viewport, screen size and tiddler size

178 views
Skip to first unread message

Mohammad

unread,
Aug 7, 2019, 5:37:33 AM8/7/19
to TiddlyWiki
Is there a TW macro, parameter, ... to read the
screen size (viewport size) and also tiddler size?

by size I mean width and height!

This is useful to create responsive layout using pure TW and CSS

--Mohammad

PMario

unread,
Aug 7, 2019, 6:33:36 AM8/7/19
to TiddlyWiki

Mohammad

unread,
Aug 7, 2019, 7:00:57 AM8/7/19
to TiddlyWiki
Hi Mario,
 These are about units. Is there any TW macro, parameter to return the current viewport width and height?

BurningTreeC

unread,
Aug 7, 2019, 7:12:57 AM8/7/19
to TiddlyWiki
Hi Mohammad,

the Dynaview plugin could be something for you. It can be configured to store the viewport dimensions dynamically

Mohammad

unread,
Aug 7, 2019, 7:57:56 AM8/7/19
to TiddlyWiki
Hellp BTC,
 Thank you! I had a look and it has access to them!

Cheers
Mohammad

PMario

unread,
Aug 7, 2019, 7:59:05 AM8/7/19
to TiddlyWiki
On Wednesday, August 7, 2019 at 11:37:33 AM UTC+2, Mohammad wrote:
....
This is useful to create responsive layout using pure TW and CSS

If you want to create a responsive layout, you don't need to know any pixel sizes, because they don't matter.

-m

Mohammad

unread,
Aug 7, 2019, 9:49:50 AM8/7/19
to TiddlyWiki
That is true, but I need to know how much Tiddler width I have?
Using a responsive CSS I can check the viewport to see how big is the screen!
Maybe I should write a script to find the tiddler size and then decide on element size!

--Mohammad

Mat

unread,
Aug 7, 2019, 3:57:48 PM8/7/19
to TiddlyWiki
Mohammad, I'm actually fiddling with things that would also need this.

As Mario points out, there are the vh and vw unit

Tiddler width is set in $:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth - but with "fluid river, static sidebar" I guess you must calculate it with maybe:

calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}});

<:-)

Mohammad

unread,
Aug 7, 2019, 4:11:59 PM8/7/19
to TiddlyWiki
Thank you Mat,
 I got the point!

Cheers
Mohammad

Mat

unread,
Aug 7, 2019, 8:02:55 PM8/7/19
to TiddlyWiki
Mohammad I found this to work. 

Macro content:

<$list filter="[{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}prefix[fluid-fixed]]">
  calc(100vw - {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}} - 160px)
</$list>
<$list filter="[{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}prefix[fixed-fluid]]">
  calc({{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}} - 110px)
</$list>

It is called in a stylesheet (type: tiddlywiki) like so:

width:<<width>>;

The magic numbers are just approximations; the river gutter and tiddler gutters all 42px but then there are 0-1-2 viewport scrollbars where it seems only one of them affects width... and I'm not sure scrollbars have a fixed width, at least no between browsers so I just made approximations that look decent. Besides, the gutters are hard coded magic numbers so what the hey. At least for my application.

...however one would need other numbers for small screens where the gutters are gone.

<:-)

Mohammad

unread,
Aug 8, 2019, 1:48:02 AM8/8/19
to TiddlyWiki
Many Thanks Mat,
 It works like a charm!

Cheers

--Mohammad

Mohammad

unread,
Aug 8, 2019, 1:54:10 AM8/8/19
to TiddlyWiki
Added to TW-Scripts

Chuck R.

unread,
Dec 20, 2019, 9:24:54 AM12/20/19
to TiddlyWiki
Others might need a slightly different way to do this. Just to add my 2 cents I found some variables in https://tiddlywiki.com/#InfoMechanism. One was
 $:info/browser/screen/width

. This is for the current production version of TW which I think is 5.1.21.

HTH.

Eric Shulman

unread,
Dec 20, 2019, 9:41:55 AM12/20/19
to TiddlyWiki
On Friday, December 20, 2019 at 6:24:54 AM UTC-8, Chuck R. wrote:
Others might need a slightly different way to do this. Just to add my 2 cents I found some variables in https://tiddlywiki.com/#InfoMechanism. One was
 $:info/browser/screen/width

Note that this value (and also the $:info/browser/screen/height) are the number of *pixels* in your display,
and do not vary based on the browser window size.  Unless unless the browser window is currently maximized,
these values will typically be greater than the actual browser window size.

I recommend using 100vw and 100vh when computing a desired size,
so that it will always be relative to the browser window size.

-e


Magnus

unread,
Dec 21, 2019, 5:05:02 PM12/21/19
to TiddlyWiki
Forgive a silly question but what are the difference in vw/vh and using %?

Eric Shulman

unread,
Dec 21, 2019, 5:19:53 PM12/21/19
to TiddlyWiki
On Saturday, December 21, 2019 at 2:05:02 PM UTC-8, Magnus wrote:
Forgive a silly question but what are the difference in vw/vh and using %?

vw and vh are based on the current browser "viewport" (window) dimensions,
while % is based on the current containing block-level DOM element (DIV, span, table cell, etc) dimensions


-e

Reply all
Reply to author
Forward
0 new messages