Standard Minnit Chat CSS view units compatible

Hi guys!

Apologies if this has been suggested before. I quick forum search didn't bring up any relevant results.

I think Minnit Chat (regardless of paid or free options) should be using CSS view units so the chat fonts scale with the size of the chat when embedded.

Or perhaps a CSS calc() expression to combine both view units and Ems or % units.

E.g.

font-size: calc( 0.2em + ( ( 0.672vw + 0.672vh ) * 1.3 ) );

(This is taken from one of my own CSS declarations for an embedded iframe, so that it scales correctly on all screen and window sizes)

Certain cut down versions of webkit, for example the version that ships with Samsung Tizen browsers, do not fully support calc() expressions so an additional higher or root level simple Em, % or vw based expression can be use for those special cases as a fallback!

Obviously with a paid version this could be implemented as custom CSS, but I feel it should be standard even with the free version.

Thanks!

Keep up the great work!

Simon - Headroom LSS.
(Headroom Live Streaming Services)

Hey Simon,

Thanks for the suggestion. I added a demo of this using the fontscale URL parameter: https://minnit.chat/main?embed&fontscale -- messages use * 1.6 instead of 1.3 in your example, but the rest is as you said.

My main issue is that they can vary wildly with this setup. For instance, if I'm on the chat page directly (https://minnit.chat/main?fontscale) then it looks like this:

image

However, if I use chrome's devtools to simulate an iPhone 6's resolution (a common resolution of our users), then it gets very small:

image


If fonts are an issue, do you know if your website has the proper viewport meta tags?

Here is an example of a standard HTML page, without any viewport data:
https://minnit.chat/brk/chatdemo-noscale.html

Look at how it looks when you simulate iPhone 6:
image

However, if you add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag, then all of your font will immediately be fixed:
https://minnit.chat/brk/chatdemo-scale.html
image

Suddenly, you no longer need to worry about making large headers, and all of the fonts on your website, including your Minnit Chat, will scale properly.

Note, the chatdemo-scale.html is not using the fontscale parameter. This is in vanilla Minnit Chat. No extra CSS trickery needed -- the only difference between the two HTML files I created is the viewport tag, but it makes a huge difference.

All of this said, the best solution is for website owners to use the proper viewport tags, instead of just scaling font to simulate this experience. It makes for a better overall feel, without having comically large fonts for desktop users, and tinier fonts for mobile users. It also prevents users on some phones to have bigger fonts than users on other phones -- you're able to have a much more consistent experience.

Let me know if you have any more questions about this. I'll leave the fontscale URL parameter up for a bit, but I don't plan on it becoming a permanent feature.

Hi brk,

Fantastic work man! All very impressive!

But i will say that the difference in my own testing here (unrelated to minnit) between that *1.3 and *1.6 is huge! The *1.3 was a nice weighting between the view units and the ems! Hence the strange 0.2em at the start!

Really appreciate the post on this! I think this is why the Minnit Chat stands head and shoulders above the rest!

Re: initial-scale that's pretty strange behaviour. From what I understood about initial-scale it shouldn't alter the relationship between elements on the same page (or should it?). It also does not seem to be part of any spec, more of an apple 'hack' for small screen iPhones initially...

In my test pages here, I haven't used initial-scale, and didn't need to. After a lot of thought, I created (possibly the worlds first) truly responsive-liquid CSS approach that renders equally well on both normal and mobile browers. It keeps ratios, it works in both portrait and landscape, and is usuable even on the smallest screens. I've used a couple of iframes and tested using the same calc based view unit approach, in the CSS of the iframes, and it seems to work equally well! However a page like the minnit chat, that doesn't use view unit dimensions, does not scale well on all screen sizes embedded within a site like that!

All of the responsive media query CSS sites I have seen, work completely AGAINST the philosophy of the Web. In that they are essentially HARD CODING sites to 2 or 3 'break points'.

I can't help but feel that an amazing concept (media queries/responsive design) is being abused and taking us away from everything we have achieved with web compatibility in the last decade. Who wants to go back to the era of "This site is best viewed in Internet Explorer at 800x600 blah blah" and that is essentially what people are doing by using break points. Terrible use of CSS!

A few web designers have now experimented with different units and ratios in this calc based approach to mix both view units and ems/% with some degree of success!

It is well worth considering for the future!

Meanwhile I will test the fontscale parameter and the initial-scale effects on my responsive-liquid approach!

Thanks for all the help!

Hi brk,

OK I've reread your post and have had a few more thoughts!

my CSS font-size declaration:

font-size: calc( 0.2em + ( ( 0.672vw + 0.672vh ) * 1.3 ) );

...I use on both the main website/page and any iframes.

Thinking about Minnit Chat and on the desktop for just a second, how is it used? In an iframe? Clients use various iframe sizes? Full screen?

I would say probably rarely full screen and if so in a popup (so not full screen so much as full browser width in that case) so probably kept to a small window so the user can do other things on their desktop.

In an iframe it's probably mostly used in a largish iframe and rarely a small column size box. Here in my test site it's used in a 'medium' size I would say :-) Something in between a column and full width of a fixed width website design.

So if you have Minnit Chat there in front of you and at the size you would normally use it, after adding that font-size declaration, you would probably have to now alter slightly a few other font sizes across the Chat window until they are the sizes they were before (so it looks like your current default css).

I haven't looked at the Minnit Chat css but that makes me think perhaps there are mixed em and px units or something as I would have expected those 2 sizes of text to have scaled equally.

If you quickly reset a couple of font sizes so it looks right, then you will be able to see the effect of the whole chat scaling including font size, as you scale the browser window (or alter the size of the iframe if you are testing with it embedded).

At this point I would be testing on a computer only, and without any initial scale tag. After adding the initial scale tag, on a desktop browser it should look identical (from what I have read about initial scale).

So effectively it should not vary wildly any more. Your main issue!

In my test page here, If I size the window to full screen then it does not look comically large! I am on a 13" laptop screen as I write this, and I would never have my browser windows full screen. About 80% of the width at most.

Thinking about users of far larger screens on the desktop, whilst they might make a browser window full screen, I don't think they expect the readable part of the webpage itself to be full screen, so testing a Minnit Chat full screen on a huge screen probably would look comically large yes, but I'm sure not web designer embedding Minnit Chat or user would intentially try to use the Chat in such an extreme size!

Now a whole separate issue is the viewport initial scale tag. If all mobile browsers that support it, support it in the same way as there doesn't appear to be an official spec, and if it's necessary in the Minnit Chat code.

If you have time, please reset the 2 text sizes and test a bit to see how it scales with various browser/frame sizes! It might be interesting to see. Another issue is the heights of the various boxes also not being scaled in view units or percentages, and they could perhaps be if the font scales!

Thanks!

HI brk,

A couple more points for you. I have looked at the CSS and inspected the Minnit Chat and your fontsize parameter example.

What I have noticed is this:

My

font-size: calc( 0.2em + ( ( 0.672vw + 0.672vh ) * 1.3 ) );

declaration would normally be at the root level. Like I said I declare a simple font-size: 1em; at the root level for compatibility with older browsers and cut down versions of webkit, and use that calc declaration one level higher than the root level. E.g. the BODY.

I don't use rems anywhere however, only ems. You are using rems and it seems px font sizes and the CSS is very complicated and inherits a lot. Also you appear to have used my font-size declaration at a very high level with the !important flag. I never ever need to use !important in my CSS. if the styles are being inherited correctly it is redundant!

in your case you would need to use my font-size calc declaration on the HTML root element in the CSS!

I can see that the comments from the users are scaling correctly but the names are not. The names appear to be using absolute units (px) or the high level you have used it at with !important is not having the effect intended!

The reason I don't use the initial scale tag anywhere is because my CSS is fully responsive and changes depending on page orientation again making the 'hack fix' of inital-scale completely redundant!

When I use my test site on mobiles, and you click inside the chat frame to type, the mobile keyboard appears, and that has the effect of making the viewport much shorter vertically. this triggers the responsive CSS to alter the layout/orientation while typing in the chat. this is a fantastic effect to see and makes my test page the Minnit chat work very well on mobile browsers again even without any initial-scale hacks required!

Your CSS in the Minnit Chat default styles do not seem to inherit correctly font-sizes. There seems to be a problem with overlapping styles and rems, ems px and !important all seem to conflict slightly instead of simply inheriting the styles cleanly from their parent elements!

It is an unfair test if you do not use my calc font-size declaration at the root level and if you are using px absolute css units that don't inherit and hence scale properly at higher levels!

Hope that helps,

Many thanks again for the hardwork!

Hey Simon,

Thanks for the feedback. I'll get another update on this up in a few days with all of your feedback.

Jesse

Many thanks Jesse/brk!

We are moving more and more clients to Minnit Chat now! It really is great!

Well done with the system!

Simon