Re: [css-d] Font-sizes & EM

[oleg...@gmail.com]

No, not correct no - doubling or tripling, or whatever.

When you set, for example, html * { font-size: 2vw' }, you are setting base
font size for the page(s), 1vw is 1% of the screen's viewport's width. So,
if, for example, your viewport width is 1704 pixels, then 1vw will equal
17px, and 2vw will equal 34px. Then, when you set a font for any element,
let's say  to 2em, the actual font size will be 2vw (base font size you
set) x 2em (the font size you set for  element), which will result to 68
pixels.

On Sun, Mar 19, 2017 at 3:30 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
> Rainer Berthold 
>> Sunday, March 19, 2017 2:39 PMvia Postbox > utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> Sorry, can’t follow. Tom’s post may help.
>>
>> Best, Rainer
>>
>>
>> Am 19.03.2017 um 16:03 schrieb Crest Christopher <
>> crestchristop...@gmail.com>:
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> Crest Christopher 
>> Sunday, March 19, 2017 11:03 AMvia Postbox > utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> Rainer Berthold 
>> Sunday, March 19, 2017 2:12 AMvia Postbox > utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> Maybe this is an interesting read:
>> https://www.smashingmagazine.com/2016/05/fluid-typography/
>>
>> Best, Rainer
>>
>>
>> Am 19.03.2017 um 04:45 schrieb Crest Christopher <
>> crestchristop...@gmail.com>:
>>
>> I'm use to using fixed heights for fonts, pixel being the main one. If I
>> want to have a font adjust based on screen size, percentages is the best
>> route to follow, correct ?
>>
>> Why use EM if it's equal to pixels anyhow ?
>>
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> Crest Christopher 
>> Saturday, March 18, 2017 11:45 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> I'm use to using fixed heights for fonts, pixel being the main one. If I
>> want to have a font adjust based on screen size, percentages is the best
>> route to follow, correct ?
>>
>> Why use EM if it's equal to pixels anyhow ?
>>
>>
>>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Box Sizing

[oleg...@gmail.com]

This is actually not a question - because for as question, somebody have to
think, for yours in particular you just have to open a CSS3 documentation
or open any good link with extensive amount of pictures - just check css
tricks site, just for example.
Answering your "question" would be a little bit insulting for any person
who spent a few minutes checking the docs.

Seriously, ask something worth answering.

On Mon, Mar 20, 2017 at 1:17 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> There is a question. The second statement as you perceive is more of a
> clarification.
>
> Philip Taylor 
>> Monday, March 20, 2017 10:26 AMvia Postbox > utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> Your habit of phrasing questions as statements does not (IMHO) encourage
>> others to try to answer them. If you were to phrase questions as questions
>> (/qua/ questions), I believe that you might expect more, and more
>> informative, replies.
>>
>> Philip Taylor
>> Crest Christopher 
>> Sunday, March 19, 2017 11:24 PMvia Postbox > utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> I have a question regarding box sizing.
>>
>> Box Sizing: Content Box
>> Doesn't include the height values, only the width values, unlike border
>> box ?
>>
>> Box Sizing: Border Box
>> Includes the border and padding values into the height and width values,
>> allowing you to set the total width of an alement though the width property.
>>
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[oleg...@gmail.com]

Funny...

No, they would not be equal in 99.99% of the cases :)

On Thu, Mar 23, 2017 at 7:14 AM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> Speaking of which, can someone once again clarify, for example; 2.2em
> would equal 4.4vw ?
>
> Tom Livingston 
>> Thursday, March 23, 2017 8:48 AMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> Sorry, that's just the typical way I hear of these types of things.
>> Newsletters or this list mainly.
>>
>>
>>
>>
>>
>> Philip Taylor 
>> Thursday, March 23, 2017 8:23 AMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> Thank you Tom. I suppose what I had in mind was a W3C-hosted list, but if
>> there is no such thing then pointers to derivative lists such as these
>> would be a good fallback.
>> Philip Taylor
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> Tom Livingston 
>> Thursday, March 23, 2017 7:30 AMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> I subscribe to newsletters such as Frontend Focus, Alistapart (digest),
>> Versioning (less focused, but good), Responsive Design Weekly, CSS-tricks
>> and a couple others I can't think of right now. If I dig them up I will
>> reply again.
>>
>>
>>
>> On Thu, Mar 23, 2017 at 6:35 AM Philip Taylor 
>> wrote:
>>
>> It is only in the last few days that I have learned of the existence of vh
>> and vw units. I can already see just what an advance they represent, and I
>> am very sorry that I did not learn of their existence earlier. To which
>> list should I subscribe if I wish to be regularly and reliably informed of
>> changes to the CSS specification(s) ?
>> --
>> 
>> Philip Taylor
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>> Philip Taylor 
>> Thursday, March 23, 2017 6:34 AMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> It is only in the last few days that I have learned of the existence of
>> vh and vw units. I can already see just what an advance they represent, and
>> I am very sorry that I did not learn of their existence earlier. To which
>> list should I subscribe if I wish to be regularly and reliably informed of
>> changes to the CSS specification(s) ?
>>
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[oleg...@gmail.com]

You don't need to - thousands of people do their designs without using VW
and VH - so, you should be able to do that too. Good luck!

On Wed, Mar 29, 2017 at 4:23 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> If we assume the viewport is 2000px wide with calc(2.3+2.1) then;
> 2000px (viewport) * 2.3 /100 * 10 = 460px, correct ?
>
> I still don't understand;
>
>calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px
>
> ​
>
>
>
>
>
> Philippe Wittenbergh 
>> Wednesday, March 29, 2017 1:25 AMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>>
>> Ok, I assume, given that paragraph above (a quote from somewhere on the
>> internets?, source?), I assume you are trying to understand what the
>> following means:
>>
>> .myclass { font-size: calc( 2.2em + 2.2vw); }
>>
>> 1. calc() means: calculate the sum of the following two values.
>> 2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 =
>> 35.2px.
>> 3. 2.2vw - here is where it gets interesting: `vw` stands for viewport
>> width, 1vw = 1% of the viewport width.
>> Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 =
>> 2.2 * 10 = 22px
>>
>> Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px
>>
>> 3b. Now resize the window, let’s assume the viewport / window is 500px
>> wide; 2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will be
>> 35.2px + 11px = 46.2px.
>>
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
>>
>>
>>
>>
>>
>> Crest Christopher 
>> Tuesday, March 28, 2017 11:24 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> Your stomach is hurting from the antacids.
>> I'm only trying to understand.
>>
>> ​
>> Take my previous example and help me understand.
>>
>>
>>
>>
>>
>>
>> Karl DeSaulniers 
>> Tuesday, March 28, 2017 11:00 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> Ouch. My stomach hurts.
>>
>> @crest
>> Go post that question on Stack Overflow and see what they say.
>>
>> Best,
>> Karl
>>
>> Sent from losPhone
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> Philippe Wittenbergh 
>> Thursday, March 23, 2017 10:24 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>>
>> Mr Crest,
>>
>> As others have already said: `em` units and `vw` units have NOTHING, I
>> repeat, NOTHING, to do with each other.
>>
>> (also, if you don’t mind, please take the time to trim your replies to
>> this list)
>>
>>
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
>>
>>
>>
>>
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> Crest Christopher 
>> Thursday, March 23, 2017 10:02 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> When using vw/vh em are always going to be doubled ? What about pixels ?
>>
>> For example; 2em is equal to 4vw. Also
>>
>> If the default font size is 16 pixels and if |2vw| is 2% of the
>> viewport’s width ?
>>
>>
>>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] vw and vh units -- how does one learn of developments in the CSS spec. such as these ?

[oleg...@gmail.com]

Maybe because font size is 1em? Why else do you think? :)

On Fri, Mar 31, 2017 at 3:32 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> How do you get 96px from 8vw if the viewport width is 1200px ?
>
> Tom Livingston 
>> Friday, March 31, 2017 12:24 PMvia Postbox > utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>>
>> https://www.sitepoint.com/css-viewport-units-quick-start/
>>
>>
>>
>> Karl DeSaulniers 
>> Wednesday, March 29, 2017 8:18 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> @crest,
>> Instead, why don't you explain what you're trying to accomplish (in as
>> few words as possible)
>> and we can let you know if VW and VH is practical or if you should be
>> using a different way to accomplish said task.
>>
>> My thoughts are that you are trying to make your text size as the window
>> gets resized. Am I correct in this assumption?
>>
>> Best,
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>>
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> Crest Christopher 
>> Wednesday, March 29, 2017 8:20 AMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> ​
>> That is 1000 / 100, how did you get 2.2 from 1000/100 that is 10 ?
>>
>> Philippe Wittenbergh 
>> Wednesday, March 29, 2017 1:25 AMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>>
>> Ok, I assume, given that paragraph above (a quote from somewhere on the
>> internets?, source?), I assume you are trying to understand what the
>> following means:
>>
>> .myclass { font-size: calc( 2.2em + 2.2vw); }
>>
>> 1. calc() means: calculate the sum of the following two values.
>> 2. 2.2em - converted a pixel size, assuming 16px base font: 16 * 2.2 =
>> 35.2px.
>> 3. 2.2vw - here is where it gets interesting: `vw` stands for viewport
>> width, 1vw = 1% of the viewport width.
>> Let’s assume a 1000px wide viewport / window, then 2.2vw * 1000px/100 =
>> 2.2 * 10 = 22px
>>
>> Thus: calc( 2.2em + 2.2vw) = 35.2px + 22px = 57.2px
>>
>> 3b. Now resize the window, let’s assume the viewport / window is 500px
>> wide; 2.2 * 500/100 = 2.2 * 5 = 11px. In this case, the font-size will be
>> 35.2px + 11px = 46.2px.
>>
>> Philippe
>> --
>> Philippe Wittenbergh
>> http://l-c-n.com/
>>
>>
>>
>>
>>
>> Crest Christopher 
>> Tuesday, March 28, 2017 11:24 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_campaign=reach>
>> Your stomach is hurting from the antacids.
>> I'm only trying to understand.
>>
>> ​
>> Take my previous example and help me understand.
>>
>>
>>
>>
>>
>>
>>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/