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.
Related
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
Does it add to the image if too small or crop if too big or just stretch the image to the desired size?
When you set interpolation=2, then you are using Bilinear interpolation, ti can be either used for upsampling or down sampling. In the case of upsampling you are doing something like
There are several types of upsampling and down-sampling, but bilinear one uses a combination of the neighbouring pixels to cimpute the new pixel.
Look to this links for more informations: link1; link2
Resize stretches the image to span the new size. It samples from the original image using the provided interpolation method.
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.
So I'm wondering if there is a way to convert a string with a given font face to a set of coordinates and have these coordinates accessible to align other elements to - specifically images, though any DOM element ideally.
Basically I want to be able to animate a set of elements and have them form the given string, but its the first step I need to get through at this point.
Thanks in advance!
I you display the string on the page in a given element, e.g., in a span or div, then you can get the coordinates of the upper, left corner of that element and you can get the width and height of that element. Assuming you have set your CSS attributes appropriately, this will give you something very close to the coordinates of the text, perhaps event exact.
If you don't want to display the string, you could set its opacity to 0.01.
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.