Is there a way, using pure CSS to fetch the numeric value without pulling back the unit too?
e.g. say I have a CSS variable defined as :root {--maxWidth: 100px;}. If I want to get the ratio of that value to my viewport's width I can't as calc(100vw / var(--maxWidth)) would fail as you can't divide a number with units by another number with units; even where they're the same unit.
I can get around this example case by omitting the units from my variable (e.g. :root {--maxWidth: 100;}), but I'm wondering how to do this in cases where you can't.
More specifically, I want to get the ratio / conversion value for 1vw to 1px so that I can write code which uses px values, then use transform: scale(var(--horizontalRatio), var(--verticalRatio)) to resize everything to fit perfectly in the viewport; but to do that I need a way to convert between pixels and viewport units.
There is a way to work around this; everywhere I set a size in pixels I could instead set the size to calc(100vw * X/var(--maxWidthInPx)) where X is the size in pixels of what I'm setting and --maxWdithInPx is a numeric only value giving the max width of the static px size. However, that means putting these little equations everywhere, rather than just having 1 place where things get scaled.
I've found several javascript solutions for this; but I need something that's CSS only.
In the near (or a far) future this will be possible using only CSS. The specification has changed to allow the division and multiplication of different types.
You can read the following:
At a * sub-expression, multiply the types of the left and right arguments. The sub-expression’s type is the returned result.
At a / sub-expression, let left type be the result of finding the types of its left argument, and right type be the result of finding the types of its right argument and then inverting it.
The sub-expression’s type is the result of multiplying the left type and right type.
As you can see, there are new rules that defines how types are multiplied and how the result is calculated so I am pretty sure what you want is possible but there is no implementation for this to test.
The current specification is more restrictive:
At *, check that at least one side is <number>. If both sides are <integer>, resolve to <integer>. Otherwise, resolve to the type of the other side.
At /, check that the right side is <number>. If the left side is <integer>, resolve to <number>. Otherwise, resolve to the type of the left side.
If an operator does not pass the above checks, the expression is invalid
Related
I've been reading several articles about SVG that make a clear distinction between using and not using units (this last case even has a name of its own), e.g.
<!-- the viewport will be 800px by 600px -->
<svg width="800" height="600">
<!-- SVG content drawn onto the SVG canvas -->
</svg>
In SVG, values can be set with or without a unit identifier. A
unitless value is said to be specified in user space using user units.
If a value is specified in user units, then the value is assumed to be
equivalent to the same number of “px” units. This means that the
viewport in the above example will be rendered as a 800px by 600px
viewport.
You can also specify values using units. The supported length unit
identifiers in SVG are: em, ex, px, pt, pc, cm, mm, in, and
percentages.
source
Is there any actual difference between omiting the unit and setting it to px?
Can I just set e.g. mm everywhere to avoid ambiguity, or I'll eventually be getting different results?
<svg width="800mm" height="600mm">
Disclaimer: what follows is pure guessing (I only learnt the basics of SVG last week) but I'm sharing it because I believe it could help others with my same doubts and I hope it doesn't contain serious errors.
The SVG canvas is basically a mental concept—a infinite plane where you use Cartesian coordinates to place stuff and move around. It isn't too different from stroking shapes in a sheet of graph paper where you've drawn a cross to identify an arbitrary point as coordinate origin, except that notebooks are not infinite. In the same way that tou draw a 3-square radius circle in the sheet and you don't care that those squares represent 12 mm, you draw shapes in your SVG canvas using unitless dimensions because it doesn't really matter what exact physical size they represent. The SVG spec uses the term "user units" to express this idea.
Using actual units only makes sense in two situations:
When our virtual user units need to interact with real world, e.g., the canvas is to be printed in a computer monitor.
When we want an element in our graph to be defined in such a way that it doesn't scale, neither up nor down, e.g. a stroke around a letter that needs to look identical no matter how we resize the logo it belongs to.
It's in this situation, more specifically #1, when the px equivalence comes in handy. When we need to render the graph or make calculations what involve actual units, unitless dimensions are interpreted as pixels. We can think of it as a default because we can render the canvas any size and, in any case, pixels are no longer physical pixels in these days of high-res displays and builtin zoom.
And, for all this, it's probably better to just omit units in your SVG code. Adding them in a general basis only makes code unnecessarily verbose.
I am currently working on a little website project of mine and I am having trouble spacing stuff out, something does not fit well and I use percentages instead of pixels to make it fit on everyone's screen, but I can't seem to find my answer on here, so that's why I'm asking it here. But now I have to use percentages, like here:
margin-left:4,8%
How do I make decimals work? Because this obviously doesn't.
Thanks for helping!
CSS 2, section 4.3.3 Percentages:
The format of a percentage value (denoted by <percentage> in this specification) is a <number> immediately followed by '%'.
4.3.1 Integers and real numbers:
A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits.
You are using a comma.
I am trying to extract images from a document saved as WordML. Some of the images are cropped from a single resource using attributes on the imagedata element eg:
<v:imagedata r:id="rId8" o:title="" cropbottom="32429f" cropright="44328f"/>
What are the units for the cropbottom and cropright attributes?
I have done some web searching and according to http://msdn.microsoft.com/en-us/library/bb229565%28v=vs.85%29.aspx the units should be percentages but don't seem to be.
In the example above the resulting image should come from the top left of the original and be a third of the width and half the height.
I'll answer my own question in the hope that it is useful to someone else.
According to ImageData Class - Office 2010
CropBottom ... specifies the how much to crop the image from the bottom
up as a fraction of picture size. Default is 0. This numeric value can
also be specified in 1/65536-ths if a trailing "f" is supplied. For
example, a value of "52429f" represents 52429/65536 or 0.8.
I've designed one web site from asp.net & in that i designed the html pages with the help of css. In that css all the measurement that i've taken are in pixel. I want to convert all from pixel to percentage?
Is there any conversion formula for this?
how to do this?
thanks.
To change the width of a block element to a percentage value, you'll have to know the width of its container in the same units.
var widthChildPercent = widthChildPixels / widthParentPixels;
Obviously, you'll likely want to format that to an integer value when you update the style, but that will be the general formula.
You Can use THIS to convert your pixel values to percentage
I use the following formula when converting for a flexible layout from a static layout:
result = 100 * target / context
where
target is what you want to change
context is (usually) the page width you want to work with.
For example, if you have a block element <section> that currently has a width of 330px and you are working in a wrapper of 1024px, you could use 330/1024*100 which gives you a result of 32.23% for your width. However, as a rule, for fonts you want to convert to em rather than percentages.
I've written a function which takes a <select> ID, and replaces all the options with new ones (using jQuery's html()). However, on IE the width of the dropdown remains the original one which has a size way bigger than what I need to display, because is based on the original <option>'s that had long strings captions.
Is there a way to force the <select> to recalculate it's width?
I am using IE 8.
I think the pragmatic solution would be to replace the whole <select> element. This way, the newly inserted one will have the correct width for its <option> elements (disregarding any other styling that may be applied).
The thing to bear in mind if replacing the whole select is that any references to the replaced element will need to cleaned up prior to removing it from the DOM (to avoid any potential memory leaks) and event handlers attached to the newly inserted element.
It's possible to set its width through css.
In your case I would approach it using this method:
If you are using em's or ex's as font size units, then since it is a value based on height, you can assume using a certain ratio that it is almost near the equivalent of a character's width. Based on that, you can actually calculate how wide your select element would be by:
1st: get the number of characters of the smallest string from the select options.
2nd: multiply that by the em value.
3rd: set this value as the select's width.
using jquery that would be achieved through:
var em = 1em; //assign here a value, that corresponds to your layout's font size
var shortest = 6500;
$('mySelect').each(function(i, selected){
temp = $(selected).text().length();
shortest = (temp < shortest) ? temp : shortest;
});
$('mySelect').css('width',(shortest*em + 1) + 'em'); //add 1em for the scrollbar