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.
Related
The div looks like this:
<div #container [ngStyle]=...>
The container is a flexbox row if that matters that contains elements; I need to know if a new element I'm adding to the row is going to fit without causing a wrap.
Thus, my code will sum up the total sizes of each element in the container and compare it with the size of the #container.
The code is like this:
#ViewChild('container') pillContainer: ElementRef;
let maxWidth = this.pillContainer.nativeElement.????
This is where the problem is. I don't think it is offsetWidth because the numbers I was getting back were more like possibly a margin-left. There is no 'width' element though if I look in:
this.pillContainer.nativeElement.attributes. xxxx
I do find and element called (with double quotes) "width", but I didn't see a way of getting the value of that attribute.
Any ideas?
Thanks in advance,
Yogi
According to documentation I stumbled across, I was in fact wrong: offsetWidth does in fact return the width of the element including borders, BUT it does not include the margins.
It seems getBoundingClientRect() may be more useful as it shows the effects of any transform that was applied.
I think this is sufficient for my problem.
Yogi
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 learning how to use HTML5 new elements and I stumbled upon a frustrating issue with all graphic functions such as fillRect() and drawImage().
I was setting the widgth and height with
style="width: 75px;height: 10px;"
instead of
width="200" height="100"
The result being that the graphics would not be the proper scale ever.
My question is, why does it make a difference? There is something I obviously do not understand about it all.
Thank you
I know that at least in JSF (specifically primefaces) the difference is that if you put height in the style- it will not be used to properly calculate and render the component (the more complex ones) sometimes. If you put it as attribute then it will work.
If HTML5 takes the similar approach it would mean that attribute height and width are the actual height and width of the component and the style is just the way to display it. Sometimes however, both approaches are going to end with the same result.
Also in primefaces when you specify height and width as attribute- you can not use percentages. This could be the key- an additional measure of enforcing specific width and heights rathen than percentages.
It was an extremely frustrating issue trying to figure out why canvas
doesn't render its shapes correctly despite doing everything right.
The fix was to set "canvas.height" and "canvas.width" correctly. Just setting "canvas.style.height" and "canvas.style.width" doesn't
rectify internal rendering of the canvas.
Almost every time, your
canvas.height = canvas.style.height
AND
canvas.width = canvas.style.width
I read somewhere that the HTML engine refers "canvas.width" and "canvas.height" while doing the calculations for painting shapes and text inside the canvas.
Whereas, "canvas.style.height" and "canvas.style.width" only determine how the browser displays that canvas alongside other HTML DOM elements. Thanks to bjedrzejewski and Munsta0 for asking this question.
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 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