Hi,

I have a CSS for my website:

https://www.dalekelly.org/mystyle.css

https://www.dalekelly.org/

One of the things it does is size images based on browser window size

I would like to do something similar for PDF files and inner-HTML pages

Basically want a good look for those on Tablets and Smart Phones

My CSS already does the main structure well

Any thoughts?

--
Mystery? -> https://www.dalekelly.org/

In message <suuegb$gvs$1@dont-email.me> Dale <dale@dalekelly.org> wrote:
> Hi,

> I have a CSS for my website:

> https://www.dalekelly.org/mystyle.css

> https://www.dalekelly.org/

> One of the things it does is size images based on browser window size

> I would like to do something similar for PDF files and inner-HTML pages

> Basically want a good look for those on Tablets and Smart Phones

> My CSS already does the main structure well

> Any thoughts?

Read up on "responsive design" though for PDFS you will pretty much have
to have different files at different sizes, but you really should not be
using PDFs as part of your website. Images are easier to resize on the
fly if you optimize them for screens in the first place. I'm not sure
what you mean by "inner-HTML pages" but all your pages should be using
the same style sheets with minimal overrides on any given page.

Doing it by hand is rarely worthwhile, and a package like Bootstap makes
this all work quite well and easily. Your CSS is not, for example, using
the same breakpoints that have become pretty much standard to deal with
various screen sizes.

--
>> a Freudian slip is when you say one thing but you're really
>> thinking about a mother.
> no, a Freudian slip is sexy underwear your mother wears

On 2/20/2022 6:43 PM, Lewis wrote:
> In message <suuegb$gvs$1@dont-email.me> Dale <dale@dalekelly.org> wrote:
>> Hi,
>
>> I have a CSS for my website:
>
>> https://www.dalekelly.org/mystyle.css" rel="nofollow" target="_blank">https://www.dalekelly.org/mystyle.css
>
>> https://www.dalekelly.org/
>
>> One of the things it does is size images based on browser window size
>
>> I would like to do something similar for PDF files and inner-HTML pages
>
>> Basically want a good look for those on Tablets and Smart Phones
>
>> My CSS already does the main structure well
>
>> Any thoughts?
>
> Read up on "responsive design" though for PDFS you will pretty much have
> to have different files at different sizes, but you really should not be
> using PDFs as part of your website. Images are easier to resize on the
> fly if you optimize them for screens in the first place. I'm not sure
> what you mean by "inner-HTML pages" but all your pages should be using
> the same style sheets with minimal overrides on any given page.
>

yep, I thought of putting my CSS on inner HTML pages soon after I posted

I consider these pages "inner" because they are groups linked from an
"outer" group

might need a secondary CSS

I have three particular PDFs I would have to make images out of, two
have more than one page, do you know an easy conversion?

> Doing it by hand is rarely worthwhile, and a package like Bootstap makes
> this all work quite well and easily. Your CSS is not, for example, using
> the same breakpoints that have become pretty much standard to deal with
> various screen sizes.
>
>

I like coding

I adjusted the breakpoints based on my screens

I had a look at Bootstrap a couple years ago

https://getbootstrap.com/

I don't like cookies or scripts etc., some might not like entering a
site that uses them

I think Bootstrap was more difficult than doing it yourself, and if I am
right it cost something

--
Mystery? -> https://www.dalekelly.org/

In message <suuqbi$ljv$1@dont-email.me> Dale <dale@dalekelly.org> wrote:
> I think Bootstrap was more difficult than doing it yourself, and if I am
> right it cost something

Bootstrap does not cost anything, and the script portion is not really
scripting in the sense of running code on the user's machine, it is
jquery that allows modifying your own page to do things like expose and
hide elements when needed. Unless something has changed in recent
Bootstrap, the scripts are not required for basic functionality.

There are other tools like Bootstrap, but I forget the names of them. All
of them have the advantage of creating pages that look modern, which
means they look like what users expect.

But using them is certainly not required, and if the pages are for you,
then it doesn't matter at all. But if other people are using them, you
should still look at things like breakpoints, white space, appropriate
contrast between colors for visually impaired users, and coding elements
that make accessibility easier.

Microsoft uses 640 and 1080 as their breakpoints, yielding three
different 'page' sizes. These sizes seem to be in line with most devices
and most expectations.

One quick example of the benefits of a tool like Bootstrap is in menus.
It is first of all, quite simple to create a menu in Bootstrap that both
looks and behaves in a way that will be familiar to any user, but that
also collapses away to a button on a small scree where there is no room
for it. This is not only the best behavior, but the expected behavior.
And it is *really* annoying to hand code it, especially if you want the
same menu code to work across a variety of menu sizes based on the
content.

--
This above all, to thine own self be true And it must follow, as the
night the day, Thou canst not then be false to any man.

Dale:

> Hi,
>
> I have a CSS for my website:
>
> https://www.dalekelly.org/mystyle.css" rel="nofollow" target="_blank">https://www.dalekelly.org/mystyle.css
>
> https://www.dalekelly.org/
>
> One of the things it does is size images based on browser window size

Where? I don't see any page there which sizes images based on browser
window size.

For example the animation on <https://www.dalekelly.org/index.html> is
always the same size:

<img src="https://www.dalekelly.org/images/working-with-chemicals.gif"
alt="Valid HTML 4.01 Strict" width="198" height="142">

Style with:

img {
max-width: 100%;
height: auto;
}

So - it will not be *bigger* than 100%, but also not scale to a smaller
size when the viewport of the page changes.

Maybe there is misunderstanding: if you link to images directly, then
CSS has exactly *nothing* to do with the way how the image is displayed.

For example - on <https://www.dalekelly.org/images.html> there are links
like <https://www.dalekelly.org/images/pedestrian_mall.jpg>. This will
be displayed by the browser without using any of your CSS at all. So the
sizing is *not* done with your CSS but the browser does this completely
on its own - usually images are automatically sized to fit inside the
browser view but can be zoomed manually if needed.

> I would like to do something similar for PDF files and inner-HTML pages

PDF files can not be "sized". PDF is PDF and not HTML. You can only link
to a PDF file. It depends completely on the browser what it will do with
it. Most desktop browsers have built in PDF viewers nowadays while on
smartphones and tables usually external viewer will be used.

> Basically want a good look for those on Tablets and Smart Phones

You can't do anything about this. PDF is not HTML and you can not change
how PDF is displayed or scaled when opened on the client. You may
integrate PDF.js on your site and try to embed this in an iframe elemtn
- but this is usually a bad idea since most clients already have PDF
viewers which work much better than thins.

--
Arno Welzel
https://arnowelzel.de

In message <j7h86jFfrolU1@mid.individual.net> Arno Welzel <usenet@arnowelzel.de> wrote:
> alt="Valid HTML 4.01 Strict"

Oh dear, I hadn't looked at the page in question. HTML4 <heavy sigh>
HTML 4.01 was nifty back in 1999 when it came out. The world has moved
on since then.

<https://html.spec.whatwg.org/multipage/>

> So - it will not be *bigger* than 100%, but also not scale to a smaller
> size when the viewport of the page changes.

Granted, it is already smaller than any reasonable display. Maybe not on
a watch... but certainly smaller than any phone.

--
"Are you pondering what I'm pondering?"
"I think so, Doctor. But are these really the legs of a show girl?"

Dale:

[...]
> I had a look at Bootstrap a couple years ago
>
> https://getbootstrap.com/
>
> I don't like cookies or scripts etc., some might not like entering a
> site that uses them
>
> I think Bootstrap was more difficult than doing it yourself, and if I am
> right it cost something

Bootstrap is for free.

Bootstrap does *not* need JavaScript and also no cookies. You *can* use
JavaScript for certain features like drop down menus, popup dialogs
forms etc. - but this is *not* required.

You can just put the Bootstrap CSS on your server and use it. Bootstrap
makes many things much easier - for example to get a two column layout
with 25% width for the left column and 75% for the other:

<div class="row">
<div class="col-3">
</div>
<div class="col-6">
</div>
</div>

Or putting blocks next to each other with automatic column width:

<div class="row">
<div class="col-auto">
</div>
<div class="col-auto">
</div>
</div>

It may also help to learn how to use CSS variables and/or tools like
LESS/SASS.

--
Arno Welzel
https://arnowelzel.de

On 2022-02-21 01:36, Dale wrote:
> On 2/20/2022 6:43 PM, Lewis wrote:
>> In message <suuegb$gvs$1@dont-email.me> Dale <dale@dalekelly.org> wrote:
>>> Hi,
>>
>>> I have a CSS for my website:
>>
>>> https://www.dalekelly.org/mystyle.css" rel="nofollow" target="_blank">https://www.dalekelly.org/mystyle.css
>>
>>> https://www.dalekelly.org/
>
> I had a look at Bootstrap a couple years ago
>
> https://getbootstrap.com/
>
> I don't like cookies or scripts etc., some might not like entering a site that
> uses them
>
> I think Bootstrap was more difficult than doing it yourself, and if I am right
> it cost something

My entire website, minus the few bigger images and PDF's probably takes up less
space than Bootstrap...

Then again, people never seem to learn: <http://www.ncdm.com/bloat/bloat.htm>

Robert
--
Robert AH Prins
robert(a)prino(d)org
The hitchhiking grandfather @ https://prino.neocities.org/
Some useful(?) REXX @ https://prino.neocities.org/zOS/zOS-Tools.html

In message <sv5rc0$6d2$1@dont-email.me> Robert Prins <robert@prino.org> wrote:
> On 2022-02-21 01:36, Dale wrote:
>> On 2/20/2022 6:43 PM, Lewis wrote:
>>> In message <suuegb$gvs$1@dont-email.me> Dale <dale@dalekelly.org> wrote:
>>>> Hi,
>>>
>>>> I have a CSS for my website:
>>>
>>>> https://www.dalekelly.org/mystyle.css" rel="nofollow" target="_blank">https://www.dalekelly.org/mystyle.css
>>>
>>>> https://www.dalekelly.org/
>>
>> I had a look at Bootstrap a couple years ago
>>
>> https://getbootstrap.com/
>>
>> I don't like cookies or scripts etc., some might not like entering a site that
>> uses them
>>
>> I think Bootstrap was more difficult than doing it yourself, and if I am right
>> it cost something

> My entire website, minus the few bigger images and PDF's probably takes up less
> space than Bootstrap...

Bootstrap is just a CSS file.

> Then again, people never seem to learn: <http://www.ncdm.com/bloat/bloat.htm>

In 1999 computers and the Internet were very very different. Most people
were still on dialup and very few people had access ot anything
approaching the speed of a T1 line. Now, most everyone has easy access to
the equivalent of *at least* 100 T1 lines and computers with literally
thousands of times the memory. Worrying about a 100K text file in 2022
is absurd.

But you be you.

--
'I'm a raven, aren't I?' it said. 'One of the few birds who speak.
The first thing people say is, oh, you're a raven, go on, say the
N word... If I had a penny for every time that's happened, I'd-'

Robert Prins:

> On 2022-02-21 01:36, Dale wrote:
>> On 2/20/2022 6:43 PM, Lewis wrote:
>>> In message <suuegb$gvs$1@dont-email.me> Dale <dale@dalekelly.org> wrote:
>>>> Hi,
>>>
>>>> I have a CSS for my website:
>>>
>>>> https://www.dalekelly.org/mystyle.css" rel="nofollow" target="_blank">https://www.dalekelly.org/mystyle.css
>>>
>>>> https://www.dalekelly.org/
>>
>> I had a look at Bootstrap a couple years ago
>>
>> https://getbootstrap.com/
>>
>> I don't like cookies or scripts etc., some might not like entering a site that
>> uses them
>>
>> I think Bootstrap was more difficult than doing it yourself, and if I am right
>> it cost something
>
> My entire website, minus the few bigger images and PDF's probably takes up less
> space than Bootstrap...

Are you sure? bootstrap.min.css is the only thing required to get
started and uses about 160 KB.

> Then again, people never seem to learn: <http://www.ncdm.com/bloat/bloat.htm>

The discussion is from 1999 and does *not* apply to Bootstrap at all.
See above: the basic CSS file needed for Bootstrap is about 160 KB. We
don't live in 1999 any longer - nowadays 160 KB of data can be
considered negligible. Even mobile devices won't have any problem with
that and if the server is configured properly this will be cached by the
browser anyway and only transferred once per version and client.

And from that discussion, quite: "The idea of banging a 100KB splash
bitmap in an application is still, however, sickening"

Even back then most PCs had at more than 16 MB of RAM and the average
HDD capacity was more than 500 MB (the first harddisc with 1 GB was
available in 1995 and my first Pentium based PC in 1995 was already
equipped with 850 MB HDD and 16 MB RAM and soon got upgraded to 32 MB
RAM). So what is the point of complaining about using 100KB for a splash
image?

Yes, technically this is not needed - so what? In most cases a UI is not
needed to get things done but still people prefer using software which
not only works but also looks nice and is easy to use.

In case of Bootstrap: when you create a universal set of CSS rules to be
able to create a responsive layout based on simple building blocks you
will soon also end up with a CSS file which is more than 50 KB large.

--
Arno Welzel
https://arnowelzel.de

Lewis:

> In message <sv5rc0$6d2$1@dont-email.me> Robert Prins <robert@prino.org> wrote:
[...]
>> Then again, people never seem to learn: <http://www.ncdm.com/bloat/bloat.htm>
>
> In 1999 computers and the Internet were very very different. Most people
> were still on dialup and very few people had access ot anything
> approaching the speed of a T1 line. Now, most everyone has easy access to
> the equivalent of *at least* 100 T1 lines and computers with literally
> thousands of times the memory. Worrying about a 100K text file in 2022
> is absurd.

In 1999 I had a connection with 768 kBit/s downstream (DSL just got
available in my region) and IIRC a PC with 128 MB RAM and at least 1 GB
hard disc. But even before in the late 1990ies it was already a Modem
with 56 KBit/s or ISDN with 64 KBit/s - downloading 1 MB of data took
around 3-4 minutes, so not a big deal either.

--
Arno Welzel
https://arnowelzel.de

In message <j7ou57F4q9U2@mid.individual.net> Arno Welzel <usenet@arnowelzel.de> wrote:
> Lewis:

>> In message <sv5rc0$6d2$1@dont-email.me> Robert Prins <robert@prino.org> wrote:
> [...]
>>> Then again, people never seem to learn: <http://www.ncdm.com/bloat/bloat.htm>
>>
>> In 1999 computers and the Internet were very very different. Most people
>> were still on dialup and very few people had access ot anything
>> approaching the speed of a T1 line. Now, most everyone has easy access to
>> the equivalent of *at least* 100 T1 lines and computers with literally
>> thousands of times the memory. Worrying about a 100K text file in 2022
>> is absurd.

> In 1999 I had a connection with 768 kBit/s downstream

That's nice. So did I. Very Very few people had that. A tiny minuscule
percentage. A rounding error.

> available in my region) and IIRC a PC with 128 MB RAM and at least 1 GB
> hard disc. But even before in the late 1990ies it was already a Modem
> with 56 KBit/s or ISDN with 64 KBit/s - downloading 1 MB of data took
> around 3-4 minutes, so not a big deal either.

Yes, but 56Kb and 200Mb are vastly different speeds, and 200Mb is
200,000Kb, and most everyone has access to at least 200Mb down (and many
people have access to 1Gb down).

My current machine has 32 GB of RAM, or about 32,000 MB of RAM, and
128MB of Ram in 1999 was exceedingly rare. Most machines then still had
15 or 32 MB of RAM, professional Desktops would ship with 64MB.

The point is, 100K might have been something to worry about a little in
1999, but it is meaningless now.

--
THE DEATH OF A WARRIOR OR THE OLD MAN OR THE LITTLE CHILD, THIS I
UNDERSTAND, AND I TAKE AWAY THE PAIN AND END THE SUFFERING. I DO
NOT UNDERSTAND THIS DEATH-OF-THE-MIND. --The Light Fantastic

Lewis:

> In message <j7ou57F4q9U2@mid.individual.net> Arno Welzel <usenet@arnowelzel.de> wrote:
>> Lewis:
>
>>> In message <sv5rc0$6d2$1@dont-email.me> Robert Prins <robert@prino.org> wrote:
>> [...]
>>>> Then again, people never seem to learn: <http://www.ncdm.com/bloat/bloat.htm>
>>>
>>> In 1999 computers and the Internet were very very different. Most people
>>> were still on dialup and very few people had access ot anything
>>> approaching the speed of a T1 line. Now, most everyone has easy access to
>>> the equivalent of *at least* 100 T1 lines and computers with literally
>>> thousands of times the memory. Worrying about a 100K text file in 2022
>>> is absurd.
>
>> In 1999 I had a connection with 768 kBit/s downstream
>
> That's nice. So did I. Very Very few people had that. A tiny minuscule
> percentage. A rounding error.
>
>> available in my region) and IIRC a PC with 128 MB RAM and at least 1 GB
>> hard disc. But even before in the late 1990ies it was already a Modem
>> with 56 KBit/s or ISDN with 64 KBit/s - downloading 1 MB of data took
>> around 3-4 minutes, so not a big deal either.
>
> Yes, but 56Kb and 200Mb are vastly different speeds, and 200Mb is
> 200,000Kb, and most everyone has access to at least 200Mb down (and many
> people have access to 1Gb down).

I talk about the internet connection speeds around 1999 - and this was
already at least 7-8 KB/s or 1 MB in 3-4 Minutes. 100 KB extra data
neede about 15-20 seconds additional download time. Not really a big
deal when a download already took several minutes.

I remember that early web browsers also needed already more than 1 MB of
data and no one really complained about the "waste" of memory for that
use case.

> My current machine has 32 GB of RAM, or about 32,000 MB of RAM, and
> 128MB of Ram in 1999 was exceedingly rare. Most machines then still had
> 15 or 32 MB of RAM, professional Desktops would ship with 64MB.

As I mentioned: my first Pentium based PC already had 16 MB and this was
not extremely expensive. I could afford extending this to 32 MB only 1
year later. In 1999 the price per MB for RAM was about 0,60 EUR. So
getting 128 MB was just around 77 EUR.

--
Arno Welzel
https://arnowelzel.de

Dale crossposted across 3 newsgroups without Followup-To:

You should not do that.

> I have a CSS for my website:
>
> https://www.dalekelly.org/mystyle.css" rel="nofollow" target="_blank">https://www.dalekelly.org/mystyle.css
>
> https://www.dalekelly.org/
>
> One of the things it does is size images based on browser window size

Do not do that. Use the viewport size as basis instead.

> I would like to do something similar for PDF files

The display of PDF documents in a Web browser, and whether it is possible at
all, depends on the capabilities of the Web browser. All you can do a Web
author is to size an iframe in which the document might be displayed (if the
Web browser supports that by plugin or built-in viewer), which I recommend
against on mobiles.

> and inner-HTML pages

What do you think would be “inner-HTML pages”?
--
PointedEars
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2
Please do not cc me. /Bitte keine Kopien per E-Mail.