<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p>Hi there, <br>
</p>
<p><br>
</p>
<p>No there isn't a storage place so yes I think it's good to have a
folder in this repo <br>
</p>
<p><a class="moz-txt-link-freetext" href="https://gitlab.com/flossmanuals/fm_booktype">https://gitlab.com/flossmanuals/fm_booktype</a><br>
</p>
<p><br>
</p>
<p>Martin you have access via the admin login to make those changes
here</p>
<p><a class="moz-txt-link-freetext" href="http://write.flossmanuals.net/_control/settings/appearance/">http://write.flossmanuals.net/_control/settings/appearance/</a><br>
</p>
<p><br>
</p>
<p>Matt, these are global settings and there's no fine tuning
available for books. <br>
</p>
<p><br>
</p>
<p>I do think this is a positive discussion as while the web ->
print ethos was what FM was founded on and really drove the
development and take up of the FM via Book Sprints where a printed
book was the pot of gold at the end of the rainbow, realistically
now most I would say over 90% people will read FM docs via the
web, and via searches. <br>
</p>
<p><br>
</p>
<p>nice one</p>
<p>Mick<br>
</p>
<br>
<div class="moz-cite-prefix">On 13/02/18 06:41, Martin Kean wrote:<br>
</div>
<blockquote type="cite"
cite="mid:SY3PR01MB085808BE3BB1A5D481A0340ED1F60@SY3PR01MB0858.ausprd01.prod.outlook.com">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" style="display:none;"><!-- P {margin-top:0;margin-bottom:0;} --></style>
<div id="divtagdefaultwrapper"
style="font-size:12pt;color:#000000;font-family:Calibri,Helvetica,sans-serif;"
dir="ltr">
Mick is there a place on the server to store global
CSS stylesheets?
<div>If so, then could we have a GitLab repo, and link to (in
the meantime) the stylesheets from Objavi </div>
<div>using <span>@import
url("full-width-images-global-styles.css"); </span><span
style="font-size: 12pt;">for example?</span></div>
<div><span style="font-size: 12pt;"><br>
</span></div>
<div><span style="font-size: 12pt;">Matt, <span>''gracefully" is
not an actual CSS word, I've just used it here as a class
name.</span></span></div>
<div><span style="font-size: 12pt;"><span><br>
</span></span></div>
<div><span style="font-size: 12pt;"><span>Working example here: <a
href="https://martinkean.com/img-test.html"
class="OWAAutoLink" id="LPlnk251783"
previewremoved="true" moz-do-not-send="true">https://martinkean.com/img-test.html</a></span></span></div>
<div><span style="font-size: 12pt;"><span><br>
</span></span></div>
<div>; Martin</div>
</div>
<hr style="display:inline-block;width:98%" tabindex="-1">
<div id="divRplyFwdMsg" dir="ltr"><font style="font-size:11pt"
color="#000000" face="Calibri, sans-serif"><b>From:</b>
Discuss <a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a> on
behalf of M R <a class="moz-txt-link-rfc2396E" href="mailto:matrobnew@hotmail.com"><matrobnew@hotmail.com></a><br>
<b>Sent:</b> Tuesday, 13 February 2018 6:20:07 p.m.<br>
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss] issues with Kdenlive manual
images</font>
<div> </div>
</div>
<style type="text/css" style="display:none">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
<div dir="ltr">
<div id="x_divtagdefaultwrapper" dir="ltr"
style="font-size:12pt; color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top:0; margin-bottom:0">well, it looks
gorgeous -- I was thinking I could do that in js, but CSS
has clearly come a long way.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">I guess the question
is how much freedom we have to manipulate the CSS at FM,
either globally or (especially) case-by-case. Would your
solution work as a global?</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">I love, in any case,
that ''gracefully" is an actual word in CSS now...</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">matt</p>
<br>
<br>
<div style="color:rgb(0,0,0)">
<hr tabindex="-1" style="display:inline-block; width:98%">
<div id="x_divRplyFwdMsg" dir="ltr"><font
style="font-size:11pt" color="#000000" face="Calibri,
sans-serif"><b>From:</b> Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a> on behalf
of Martin Kean <a class="moz-txt-link-rfc2396E" href="mailto:Martin.Kean@op.ac.nz"><Martin.Kean@op.ac.nz></a><br>
<b>Sent:</b> Monday, February 12, 2018 9:22 PM<br>
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss] issues with Kdenlive
manual images</font>
<div> </div>
</div>
<div dir="ltr">
<div id="x_x_divtagdefaultwrapper" dir="ltr"
style="font-size:12pt; color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top:0; margin-bottom:0">Hi Matt,</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">Yup, so,</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">"<span>if I
felt I truly needed something like a 1400 px
screenshot, I could specify, say, 130% viewport
width,"</span></p>
<p style="margin-top:0; margin-bottom:0"><span><br>
</span></p>
<p style="margin-top:0; margin-bottom:0">Here, in the
example below, the image gracefully scales to the
viewport width, but when the width narrows to less
than 460px, the minimum width becomes twice the width
of the viewport (200vw)</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<div>CSS:</div>
<div> </div>
<div> img {</div>
<div> display: block;</div>
<div> }</div>
<div> </div>
<div> .fullest-width {</div>
<div> box-sizing: border-box;</div>
<div> margin: 0;</div>
<div> width: 100vw;</div>
<div> height: auto;</div>
<div> }</div>
<div> </div>
<div> .<span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android Emoji",EmojiSymbols;
font-size:16px">gracefully</span> {</div>
<div> -webkit-transition: all 0.3s ease-out;</div>
<div> transition: all 0.3s ease-out;</div>
<div>}</div>
<div> </div>
<div> @media screen and (max-width: 460px) {</div>
<div> .fullest-width {</div>
<div> min-width: 200vw;</div>
<div> overflow: visible;</div>
<div> }</div>
<div> }</div>
<div><br>
</div>
<div> </div>
<div>HTML:</div>
<div><br>
</div>
<div> <div> </div>
<div> <img class="fullest-width gracefully"
src="images/1-681.jpg" /></div>
<div> </div></div>
<div> </div>
<div>Does that work?</div>
<div>Cheers, Martin</div>
</div>
<hr tabindex="-1" style="display:inline-block; width:98%">
<div id="x_x_divRplyFwdMsg" dir="ltr"><font
style="font-size:11pt" color="#000000" face="Calibri,
sans-serif"><b>From:</b> Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a> on
behalf of M R <a class="moz-txt-link-rfc2396E" href="mailto:matrobnew@hotmail.com"><matrobnew@hotmail.com></a><br>
<b>Sent:</b> Tuesday, 13 February 2018 4:16:14 p.m.<br>
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss] issues with Kdenlive
manual images</font>
<div> </div>
</div>
<style type="text/css" style="display:none">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
<div dir="ltr">
<div id="x_x_x_divtagdefaultwrapper" dir="ltr"
style="font-size:12pt; color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top:0; margin-bottom:0">Martin:</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">So, to be
clear, taking your idea of case-by-case: if I felt I
truly needed something like a 1400 px screenshot, I
could specify, say, 130% viewport width, rather than
the standard 80%, and then people with smaller
screens would just get a scrollbar? But...if you
are working with viewport w and h %, is that a
maximum for IF your browser can't accept the full
image in it's original size? Or does it instead
establish a fixed %, regardless of window size?
Because I'd hate to enforce a massive
screenshot image, and a scrollbar, for people who
already have large enough windows to accommodate the
full image size (which I remain convinced would be
the majority).</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">I'm thinking
we may need something like <100% viewport width,
specified globally in CSS, in conjunction with some
kind of de facto px limit for screenshots. Though I
may just not be understanding your proposal. </p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">Matt</p>
<br>
<br>
<div style="color:rgb(0,0,0)">
<hr tabindex="-1" style="display:inline-block;
width:98%">
<div id="x_x_x_divRplyFwdMsg" dir="ltr"><font
style="font-size:11pt" color="#000000"
face="Calibri, sans-serif"><b>From:</b> Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a>
on behalf of Martin Kean
<a class="moz-txt-link-rfc2396E" href="mailto:Martin.Kean@op.ac.nz"><Martin.Kean@op.ac.nz></a><br>
<b>Sent:</b> Monday, February 12, 2018 7:58 PM<br>
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss] issues with
Kdenlive manual images</font>
<div> </div>
</div>
<div dir="ltr">
<div id="x_x_x_x_divtagdefaultwrapper" dir="ltr"
style="font-size:12pt; color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<div>Hi Matt,</div>
<div><br>
</div>
<div>"... it seems like going with viewport
width (and height) % would address our
issues--but then again, perhaps not
completely. If I put in a 1300 px wide
screenshot and our CSS, revised along the
lines Martin suggests, rendered that as (say)
80% of someone's 800-pixel width screen, then
the image would all fit in their screen, but
the details would be tiny, probably too tiny
to be useful. So we might still need some
absolute limit on screenshot pixel width."</div>
<div><br>
</div>
<div>What about treating images on a
case-by-case basis, this would mean
descriptive CSS class names when inserting
images, so for example:</div>
<div><br>
</div>
<div><img class="screenshot-size"></div>
<div><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android
Emoji",EmojiSymbols; font-size:16px"><img
class="for-small-screens"></span><br>
</div>
<div><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android
Emoji",EmojiSymbols; font-size:16px"><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android
Emoji",EmojiSymbols; font-size:16px"><img
class="</span><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android
Emoji",EmojiSymbols; font-size:16px">full-width</span><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android
Emoji",EmojiSymbols; font-size:16px">"></span><br>
</span></div>
<div><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android
Emoji",EmojiSymbols; font-size:16px"><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe UI
Symbol","Android
Emoji",EmojiSymbols; font-size:16px"><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe
UI Symbol","Android
Emoji",EmojiSymbols;
font-size:16px"><img class="</span><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe
UI Symbol","Android
Emoji",EmojiSymbols;
font-size:16px">80-percent-width</span><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe
UI Symbol","Android
Emoji",EmojiSymbols;
font-size:16px">"></span></span></span></div>
<div><br>
</div>
<div>"Everyone I've read agrees that screenshots
should be PNG and not JPEG."</div>
<div><br>
</div>
<div>I recommend JPEG for photo-like images,
whereas PNG is best for images that contain
text that needs to be readable (PNG preserves
shape edges to a degree)</div>
<div><br>
</div>
<div>Cheers, Martin</div>
</div>
<hr tabindex="-1" style="display:inline-block;
width:98%">
<div id="x_x_x_x_divRplyFwdMsg" dir="ltr"><font
style="font-size:11pt" color="#000000"
face="Calibri, sans-serif"><b>From:</b>
Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a>
on behalf of M R <a class="moz-txt-link-rfc2396E" href="mailto:matrobnew@hotmail.com"><matrobnew@hotmail.com></a><br>
<b>Sent:</b> Tuesday, 13 February 2018 3:47:28
p.m.<br>
<b>To:</b> <a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss] issues with
Kdenlive manual images</font>
<div> </div>
</div>
<style type="text/css" style="display:none">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
<div dir="ltr">
<div id="x_x_x_x_x_divtagdefaultwrapper"
dir="ltr" style="font-size:12pt;
color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top:0; margin-bottom:0">Martin:</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">That
sounds really interesting: I didn't know you
could specify by viewport h and w % in CSS
(though that's standard in lots of app
authoring I've done, for e.g. Windows or
Android apps). But then I know next to
nothing about modern CSS; I basically got
out of client-side web development as such
in the early '00s.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">Mick,
what do you think? To *some* degree it
seems like going with viewport width (and
height) % would address our issues--but then
again, perhaps not completely. If I put in
a 1300 px wide screenshot and our CSS,
revised along the lines Martin suggests,
rendered that as (say) 80% of someone's
800-pixel width screen, then the image would
all fit in their screen, but the details
would be tiny, probably too tiny to be
useful. So we might still need some
absolute limit on screenshot pixel width.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">The
thing is, there is a whole galactic-sized
industry of technical writing out there,
still cranking out documentation with
screenshots (despite my best efforts to move
them toward video <span>😊</span>); so you'd
think there would be best-practice
guidelines well established around this very
question. You would think. But in the
google searching I've just done, while I've
unearthed some very sensible articles/posts
from individuals talking about what makes
for better and worse screenshots, I get no
sense at all of a widely-accepted standard
width or resolution. If those standards
are out there, they're embedded in full
tech-writing courses and not seemingly
accessible to googling.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">Everyone
I've read agrees that screenshots should be
PNG and not JPEG. Most people agree that
PRNTSCRN is too blunt-force, at least
without cropping, not least because it will
inevitably capture personal screen details
that are idiosyncratic and distracting, and
irrelevant. Any tech-writing professional
is presumably using some specialized screen
capture software that allows for selection
of a customized area or a specified app or
window (the one I use even tries to pick out
specific panes/windows within the software
UI I'm demo-ing, which is great when it
works). But none of this speaks to how
large (and in what resolution) the captured
area actually should be.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">The
common-sense answer is: "large enough to
show what you need to show, ie what is
actually relevant to your demonstration."
Mick, that was basically your original
answer, and it's truly sound common sense;
but then I would go right back to my
original response to it. Maybe where that
leaves us is the idea that, if the software
you're trying to demonstrate really does
require you to see, simultaneously, multiple
panes of a UI stretching across, say, 1000+
pixels or more, then perhaps we're beyond
the limits of the static text-and-screenshot
genre of documentation anyway. So maybe we
just kick the image-width limit up slightly,
to 1000 (though that was a purely arbitrary
number); or maybe we change the CSS to a %
of viewport, but still establish a defacto
max width of 1000 for FM screenshots. Or
maybe the de facto standard should remain
800 px. Truly it beats me.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">I'm
going to stay below 800 px for the duration
of the Shotcut manual, anyway -- even
though I'd be truly surprised if many
Shotcut users actually confined themselves
to that little real estate in using the
tool. Btw, here's some survey data on
display sizes and their historical trend,
from a pretty established source:</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0"><a
href="https://www.w3schools.com/browsers/browsers_display.asp"
class="x_x_x_x_x_OWAAutoLink"
id="LPlnk548185" moz-do-not-send="true">https://www.w3schools.com/browsers/browsers_display.asp</a></p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">OTOH,
the typical FM manual consumer might be a
lot more old-school than the median of these
trends.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">Best,</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">Matt<br>
<br>
</p>
<div style="color:rgb(0,0,0)">
<hr tabindex="-1"
style="display:inline-block; width:98%">
<div id="x_x_x_x_x_divRplyFwdMsg" dir="ltr"><font
style="font-size:11pt" color="#000000"
face="Calibri, sans-serif"><b>From:</b>
Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a>
on behalf of Martin Kean
<a class="moz-txt-link-rfc2396E" href="mailto:Martin.Kean@op.ac.nz"><Martin.Kean@op.ac.nz></a><br>
<b>Sent:</b> Monday, February 12, 2018
5:37 PM<br>
<b>To:</b>
<a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss] issues
with Kdenlive manual images</font>
<div> </div>
</div>
<div dir="ltr">
<div id="x_x_x_x_x_x_divtagdefaultwrapper"
dir="ltr" style="font-size:12pt;
color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top:0; margin-bottom:0">Hi
there,</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">I'm
a little late to the conversation, but
wondering if pixels are the best for
<img> width within device
screens or for the printed page.</p>
<p style="margin-top:0; margin-bottom:0">I
often use vw and vh, viewport width
and viewport height:</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0"><a
href="https://css-tricks.com/fun-viewport-units/"
class="x_x_x_x_x_x_OWAAutoLink"
id="LPlnk318715"
moz-do-not-send="true">https://css-tricks.com/fun-viewport-units/</a></p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">and
here ...</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0"><a
href="https://css-tricks.com/full-width-containers-limited-width-parents/"
class="x_x_x_x_x_x_OWAAutoLink"
id="LPlnk450115"
moz-do-not-send="true">https://css-tricks.com/full-width-containers-limited-width-parents/</a></p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">... but
of course the point we want to get to
is not having to resort to media
queries, or specific stylesheets for
print and screen outputs.</p>
<p style="margin-top:0; margin-bottom:0">I'm
really getting into CSS Grid:</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0"><a
href="https://css-tricks.com/snippets/css/complete-guide-grid/"
class="x_x_x_x_x_x_OWAAutoLink"
id="LPlnk382058"
moz-do-not-send="true">https://css-tricks.com/snippets/css/complete-guide-grid/</a></p>
<p style="margin-top:0; margin-bottom:0"><a
href="http://jensimmons.com/post/feb-27-2017/learn-css-grid"
class="x_x_x_x_x_x_OWAAutoLink"
id="LPlnk972795"
moz-do-not-send="true">http://jensimmons.com/post/feb-27-2017/learn-css-grid</a></p>
<br>
<p style="margin-top:0; margin-bottom:0">...
but this would be too long a stride
out at this point, so I suggest
viewport widths:</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<div>img {</div>
<div> border-style: none;</div>
<div> border: 0;</div>
<div> box-sizing: border-box;</div>
<div> min-width: 80vw; /* 80%
of the screen or page width, or
whatever % you prefer */</div>
<div> max-width: 95vw;<span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe
UI Symbol","Android
Emoji",EmojiSymbols;
font-size:16px"> /* again,</span><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe
UI Symbol","Android
Emoji",EmojiSymbols;
font-size:16px"> whatever % you
prefer </span><span
style="font-family:Calibri,Helvetica,sans-serif,Helvetica,EmojiFont,"Apple
Color Emoji","Segoe UI
Emoji",NotoColorEmoji,"Segoe
UI Symbol","Android
Emoji",EmojiSymbols;
font-size:16px">*/</span></div>
<div> height: auto; </div>
<div>}</div>
<div><br>
</div>
<p style="margin-top:0; margin-bottom:0">I'd
like to work with anyone on this so
please keep me in the loop.</p>
<p style="margin-top:0; margin-bottom:0"><br>
</p>
<p style="margin-top:0; margin-bottom:0">Thanks,
Martin</p>
</div>
<hr tabindex="-1"
style="display:inline-block; width:98%">
<div id="x_x_x_x_x_x_divRplyFwdMsg"
dir="ltr"><font style="font-size:11pt"
color="#000000" face="Calibri,
sans-serif"><b>From:</b> Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a>
on behalf of M R
<a class="moz-txt-link-rfc2396E" href="mailto:matrobnew@hotmail.com"><matrobnew@hotmail.com></a><br>
<b>Sent:</b> Tuesday, 13 February 2018
10:29:46 a.m.<br>
<b>To:</b>
<a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss]
issues with Kdenlive manual images</font>
<div> </div>
</div>
<style type="text/css" style="display:none">
<!--
p
{margin-top:0;
margin-bottom:0}
-->
</style>
<div dir="ltr">
<div
id="x_x_x_x_x_x_x_divtagdefaultwrapper"
dir="ltr" style="font-size:12pt;
color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top:0;
margin-bottom:0">Hi Mick:</p>
<p style="margin-top:0;
margin-bottom:0"><br>
</p>
<p style="margin-top:0;
margin-bottom:0">Well, for my part,
I thank you for being so gracious in
responding to my often-polemical
screeds. That's kind of how I
process what I learn -- and working
on the Floss manuals has been a huge
learning experience for me -- but
some of it should probably just be
saved for my cat. She's used to it.</p>
<p style="margin-top:0;
margin-bottom:0"><br>
</p>
<p style="margin-top:0;
margin-bottom:0">The image-width
constraint has been a challenge, but
a productive one, as I start working
through the how-to chapters of the
Shotcut manual. I'm managing so
far. I'm sure there are all kinds
of feature benefits in moving to
Booktype 2.x, but I'm sure it's a
hassle too.</p>
<p style="margin-top:0;
margin-bottom:0"><br>
</p>
<p style="margin-top:0;
margin-bottom:0">As far as changing
the global css override for image
width in our current Booktype: seems
like a lot of factors to consider
there. One, how do modern browsers
process the css implemented there --
I don't know nearly as much about
that as some people in this
community. Most modern websites are
designed to scale gracefully down to
very small screen sizes, without
scrolling -- especially in the era
of tablet and mobile browsing. But
that's typically about how different
page elements flow around each
other, rather than how a specific
large image is handled. Still, I
know that all my browsers (IE,
Chrome, Firefox) will automatically
scale down a large image to fit my
window, in nearly all cases, unlesss
I force them to show me the image
full-size. </p>
<p style="margin-top:0;
margin-bottom:0"><br>
</p>
<p style="margin-top:0;
margin-bottom:0">I don't think we're
anywhere close, with Booktype 1.6,
to being able to produce html
content that's in any sense
mobile-ready; so really this is a
question of how many people are
actually accessing the Floss manuals
on desktops and laptops with windows
set to less than a 800 px or 700 px
resolution. Maybe we could do a
survey? And similarly, how many
people are using the print-friendly
format (since that would probably
remain the real constraint).</p>
<p style="margin-top:0;
margin-bottom:0"><br>
</p>
<p style="margin-top:0;
margin-bottom:0">best,</p>
<p style="margin-top:0;
margin-bottom:0"><br>
</p>
<p style="margin-top:0;
margin-bottom:0">Matt</p>
<br>
<br>
<div style="color:rgb(0,0,0)">
<hr tabindex="-1"
style="display:inline-block;
width:98%">
<div
id="x_x_x_x_x_x_x_divRplyFwdMsg"
dir="ltr"><font
style="font-size:11pt"
color="#000000" face="Calibri,
sans-serif"><b>From:</b> Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a> on behalf of Mick
Chesterman
<a class="moz-txt-link-rfc2396E" href="mailto:M.Chesterman@mmu.ac.uk"><M.Chesterman@mmu.ac.uk></a><br>
<b>Sent:</b> Monday, February
12, 2018 3:16 AM<br>
<b>To:</b>
<a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM Discuss]
issues with Kdenlive manual
images</font>
<div> </div>
</div>
<div dir="ltr"
style="font-size:12pt;
color:#000000;
background-color:#FFFFFF;
font-family:Calibri,Arial,Helvetica,sans-serif">
<p>Hi Matt,</p>
<p><br>
</p>
<p>Thanks for these thoughtful
responses. I can see your point
about the advantage of video
tutorials for these kinds of
complex situations where there
are a lot of moving parts.
</p>
<p>And you make a good case for
looking at different situations
and using doc tools based on the
most appropriate response.
<br>
</p>
<p><br>
</p>
<p>As far as the screen limit, at
the moment, the css override is
the following;</p>
<p>img {<br>
border-style:none;<br>
max-width:800px;<br>
height: auto; <br>
}</p>
<p><br>
</p>
<p>I would be very up for changing
that to increase if we can work
out a way of the image size
scaling down if people's windows
are smaller.</p>
<p><br>
</p>
<p>This has been helpful for me to
start up conversations to get
moved to booktype 2 as well.
<br>
</p>
<p><br>
</p>
<p>Thanks</p>
<p>Mick<br>
</p>
<p><br>
</p>
<p><br>
</p>
<p> <br>
</p>
<p><br>
</p>
<div
id="x_x_x_x_x_x_x_x_Signature">
<div style="font-family:Tahoma;
font-size:13px">
<p
class="x_x_x_x_x_x_x_x_MsoNormal"><span
style="font-size:10.0pt;
font-family:"Arial",sans-serif;
color:#323E4F"></span><font
style="font-size:11pt"
color="#000000"
face="Calibri, sans-serif"><b>From:</b>
Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a>
on behalf of M R
<a class="moz-txt-link-rfc2396E" href="mailto:matrobnew@hotmail.com"><matrobnew@hotmail.com></a></font><br>
</p>
</div>
</div>
<div dir="ltr"
style="color:rgb(33,33,33)">
<div
id="x_x_x_x_x_x_x_x_divRplyFwdMsg"
dir="ltr"><font
style="font-size:11pt"
color="#000000"
face="Calibri, sans-serif"><b>Sent:</b>
10 February 2018 21:07<br>
<b>To:</b>
<a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re: [FM
Discuss] issues with
Kdenlive manual images</font>
<div> </div>
</div>
<div>
<div
id="x_x_x_x_x_x_x_x_divtagdefaultwrapper"
dir="ltr"
style="font-size:12pt;
color:#000000;
font-family:Calibri,Helvetica,sans-serif">
<p style="margin-top:0;
margin-bottom:0">Mick:</p>
<p style="margin-top:0;
margin-bottom:0"><br>
</p>
<p style="margin-top:0;
margin-bottom:0">I just
sent a version of this
response with a doc
attachment, but the
listserve is balking at
the size of the attachment
as it has
multiple screenshots, so
here is just the text of
my response repeated.
Perhaps the
moderator-machine will let
my first version with the
attachment through in
time. Meanwhile:</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
I think you raise a valid
point, and codifying
screenshot guidelines
sounds like a good
idea; but I also think it
just depends utterly on
what kind of authoring or
editing tool (and what
kind of media) we're
talking about. Generally
speaking, the more complex
the media (or multimedia)
being edited or authored,
the more likely it is that
a UI surface will need to
have multiple
panes/panels/windows
showing different kinds of
information, but that
really need to be viewed
simultaneously (more or
less) to get a whole
picture of what you're
doing in a given
operation. And very
little software UI design
today, for such editors,
assumes that users will
confine themselves to
anything like an 800
px-wide screen resolution.</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
Let's consider some
concrete
examples. Audio is in
some ways the simplest
medium, and so with a tool
like Audacity, you're for
the most part just working
in tracks on a linear
timeline, so showing just
part of that timeline in a
screenshot will generally
suffice to put across your
operation. And a simple
text editor, of course,
can pretty much be sized
however you want it,
within reason. With
code-editors it depends on
how feature-rich the UI
is. Static image editors
and draw tools, same
thing: I think our
Inkscape manual does an
amazing job of working
with probably too-confined
real estate. Photoshop or
Gimp would also be a
challenge, though I can
imagine it. Something
like Powerpoint or
comparable slide-deck
tools is already pushing
the limits for
small-screen editing, even
of a 'static' product,
since slide-decks really
aren't static anyway.</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
For a video editor, that's
already much more complex
as you have a linear
timeline plus a video
display, plus typically
other panes with important
property information. So
far in the new Shotcut
manual I've just shown
just portions of each of
these, which is fine for a
walk-through of the
different panels but will
be a real constraint when
I get to the actual
'how-to' chapters. But
I'll do my best.</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
For a tool to author any
kind of
multimedia/interactive
eLearning material
(e.g. Articulate
Storyline, Adobe
Captivate), you can very
rarely get away with
seeing just 700-800 px of
real estate at once. Or
Flash (now reborn as
Animate), or really just
about any Adobe-model
multimedia authoring
product. For 3D modeling
and game-building tools,
not a chance. It's true
that you will still want
to draw your
reader's/viewer's
attention to different
parts of the UI, to
understand what they're
about, but to get a sense
of real-time operations
you need to see the
whole. In these cases
there is no such thing as
"the most relevant part of
the screen" -- it's all
relevant. This is
really why video software
tutorials almost always
show the full software UI,
taking up most or all of
the presenter's desktop,
and are typically now shot
in high-resolution and
meant to be viewed
wide-screen or full-screen
too. </p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
I've already indicated
other reasons why I think
a text-and-screenshot
document for a tool like
Blender or Unity is pretty
pointless. I'd extend
that to many of the other
tools I've mentioned
here. Shotcut is probably
pushing it, though at
least in video editing the
number of <i>moving</i>parts
is still
(somewhat) limited.
Still, if there were
simply more decent video
tutorials extant for
Shotcut, I wouldn't
consider it worthwhile to
write an FM manual for
it. And setting the
moving-parts argument
aside, if I were designing
a BookType-style platform
now, I'd never put in a
700 px hardcoded limit for
images, regardless of the
target medium, even
print. </p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
Attached (in the original,
currently-embargoed
version) is a doc with me
putting my $$ or effort
where my mouth is
regarding tutorials for a
tool like Unity3D. One
can still find book-length
text-and-screenshot
manuals for Unity too, but
to my mind they are
entirely pointless. For
Shotcut, though, the
effort still seems
worthwhile, at least at
this stage in the
process. Ask me again in
another few weeks.</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
Best,</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
<br>
</p>
<p
style="font-family:Calibri,Helvetica,sans-serif,serif,EmojiFont;
font-size:16px">
Matt</p>
<div><br>
</div>
<br>
<br>
<br>
<div
style="color:rgb(0,0,0)">
<hr tabindex="-1"
style="display:inline-block;
width:98%">
<div
id="x_x_x_x_x_x_x_x_divRplyFwdMsg"
dir="ltr"><font
style="font-size:11pt"
color="#000000"
face="Calibri,
sans-serif"><b>From:</b>
Discuss
<a class="moz-txt-link-rfc2396E" href="mailto:discuss-bounces@lists.flossmanuals.net"><discuss-bounces@lists.flossmanuals.net></a>
on behalf of
<a class="moz-txt-link-abbreviated" href="mailto:mick@flossmanuals.net">mick@flossmanuals.net</a>
<a class="moz-txt-link-rfc2396E" href="mailto:mick@flossmanuals.net"><mick@flossmanuals.net></a><br>
<b>Sent:</b> Saturday,
February 10, 2018 5:57
AM<br>
<b>To:</b>
<a class="moz-txt-link-abbreviated" href="mailto:discuss@lists.flossmanuals.net">discuss@lists.flossmanuals.net</a><br>
<b>Subject:</b> Re:
[FM Discuss] issues
with Kdenlive manual
images</font>
<div> </div>
</div>
<div
class="x_x_x_x_x_x_x_x_BodyFragment"><font
size="2"><span
style="font-size:11pt">
<div
class="x_x_x_x_x_x_x_x_PlainText"><br>
<br>
On 09/02/18 20:16,
M R wrote:<br>
> 00 px is a
pretty draconian
limit for modern
screenshots,
though, as<br>
> no one in
their right might
would use most of
these editing
tools at<br>
> that width.
I get that the
print version
needs some kind of
image<br>
> width limit.
One would think
that the
"Constrain
Proportions"<br>
> function
would at least,
you know,
constrain
proportions if the
image<br>
> exceeded that
limit, and simply
show a smaller
overall
screenshot. <br>
> But I can't
get that to work
in the editor: it
seems to always
take<br>
> the actual
height but
constain the
width. No doubt
why they fixed it<br>
> in 2.2...<br>
<br>
As Rosalind
pointed out, I
does seem to do
that for the
published<br>
version. But I
have seen squished
images in the
editor too.<br>
<br>
So maybe we can
work on a
guideline for
images width based
on what they<br>
look like when
they are outputted
to pdf. 800px for
me seems about
right<br>
as above that it
is hard to see
what you want
users to look at.<br>
<br>
For me although
the challenge of
drawing the
attention to the
most<br>
relevant part of
the screen.<br>
<br>
Thanks<br>
Mick<br>
_______________________________________________<br>
Discuss mailing
list<br>
<a class="moz-txt-link-abbreviated" href="mailto:Discuss@lists.flossmanuals.net">Discuss@lists.flossmanuals.net</a><br>
<a
href="http://lists.flossmanuals.net/listinfo.cgi/discuss-flossmanuals.net"
id="LPlnk428840"
moz-do-not-send="true">http://lists.flossmanuals.net/listinfo.cgi/discuss-flossmanuals.net</a>
- you can
unsubscribe here
<div
id="LPBorder_GT_15182966616010.08774375264512213"
style="margin-bottom:20px; overflow:auto; width:100%; text-indent:0px">
<table
id="LPContainer_15182966615970.5139390542661277"
style="width:90%; background-color:rgb(255,255,255); overflow:auto;
padding-top:20px;
padding-bottom:20px; margin-top:20px; border-top:1px dotted
rgb(200,200,200);
border-bottom:1px dotted rgb(200,200,200)" cellspacing="0">
<tbody>
<tr
style="border-spacing:0px"
valign="top">
<td
id="x_x_x_x_x_x_x_x_TextCell_15182966615980.1372464797864208"
colspan="2"
style="vertical-align:top;
padding:0px;
display:table-cell">
<div
id="LPTitle_15182966615980.5009115045003227"
style="top:0px; color:rgb(0,120,215); font-weight:400; font-size:21px;
font-family:wf_segoe-ui_light,"Segoe
UI
Light","Segoe
WP
Light","Segoe
UI","Segoe WP",Tahoma,Arial,sans-serif; line-height:21px">
<a
id="LPUrlAnchor_15182966615990.8408991922679212"
href="http://lists.flossmanuals.net/listinfo.cgi/discuss-flossmanuals.net"
target="_blank" style="text-decoration:none" moz-do-not-send="true">Discuss
Info Page -
lists.flossmanuals.net</a></div>
<div
id="LPMetadata_15182966615990.31631360409658393"
style="margin:10px 0px 16px; color:rgb(102,102,102); font-weight:400;
font-family:wf_segoe-ui_normal,"Segoe
UI","Segoe WP",Tahoma,Arial,sans-serif; font-size:14px;
line-height:14px">
lists.flossmanuals.net</div>
<div
id="LPDescription_15182966616000.9902189375666932"
style="display:block; color:rgb(102,102,102); font-weight:400;
font-family:wf_segoe-ui_normal,"Segoe
UI","Segoe WP",Tahoma,Arial,sans-serif; font-size:14px;
line-height:20px;
max-height:100px; overflow:hidden">
Discuss
anything about
floss manuals
- its aims,
what it does,
how it does
it, what it
could do, and
how it can be
better. To see
the collection
of prior
postings to
...</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
</div>
</span></font></div>
</div>
</div>
</div>
</div>
"Before acting on this email or
opening any attachments you should
read the Manchester Metropolitan
University email disclaimer
available on its website
<a class="moz-txt-link-freetext" href="http://www.mmu.ac.uk/emaildisclaimer">http://www.mmu.ac.uk/emaildisclaimer</a>
"
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Discuss mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Discuss@lists.flossmanuals.net">Discuss@lists.flossmanuals.net</a>
<a class="moz-txt-link-freetext" href="http://lists.flossmanuals.net/listinfo.cgi/discuss-flossmanuals.net">http://lists.flossmanuals.net/listinfo.cgi/discuss-flossmanuals.net</a> - you can unsubscribe here
</pre>
</blockquote>
<br>
</body>
</html>