I have a variable that sets a percentage:
#var-a: 50%;
And another that is a fixed width:
#var-b: 100px;
I want to calculate #var-c as below:
#var-c: (#var-a * #var-b);
I expected 50px, but actually get 5000px. What am I doing wrong?
Less calculations use the numbers regardless of the units. If you know that #var-a will be in percentages, you could just do something like this:
#var-c: unit(#var-a / 100 * #var-b, px);
using unit() allows you to control the output unit.
You can also use guards in addition to do something else if #var-a isn't a percentage.
Related
I find that freetype2 doesn't handle subglyphs' placements correctly (or I'm perhaps using it wrong). For example, when I try to render the 'Ã', the A with the tilde on top of it, I get this:
http://i.imgur.com/3pkYfO3.png Ignore the little tails and red text everywhere; the point is that the tilde is intersecting with the A.
When I specify the FT_LOAD_NO_RECURSE flag, and then add the two subglyphs on my own (using the offsets from arg1 and arg2 from FT_Get_SubGlyph_Info), it's correct: http://i.imgur.com/TrjgHVs.png
It's a similar story with almost every other compound character.
Perhaps relevant: the exact calls I'm using are:
FT_Library library = { };
FT_Init_FreeType(&library);
...
FT_Face face = { };
FT_New_Face(library, "arial.ttf", 0, &face);
...
FT_Set_Char_Size(face, 10, 10, 72, 72);
...
FT_Load_Glyph(face, glyphIndex, FT_LOAD_NO_BITMAP);
So, first question: am I somehow using freetype2 wrong?
If it is indeed a bug in freetype2, and I have to proceed with FT_LOAD_NO_RECURSE, the problem I have is that FT_LOAD_NO_RECURSE implies FT_LOAD_NO_SCALE and FT_LOAD_IGNORE_TRANSFORM. The effect is that my resulting characters have very weird coordinates. For example, the slash character, '/', used to have these four points:
top: 28,46
right: 34,43
left: 4,1
bottom: 10,-2
but now that there's no scaling or transforming, I get these points:
top: 901,1474
right: 1087,1376
bottom: 328,-74
left: 142,24
The main question: How do I get back to the first set of coordinates? What do I add/multiply?
Many thanks!
Turns out this was the answer:
FT_Load_Glyph(face, glyphIndex, FT_LOAD_NO_BITMAP);
float scaleX = face->size->metrics.x_scale / 65536.0;
float scaleY = face->size->metrics.y_scale / 65536.0;
for each point:
point = vec2(round(point.point.x * scaleX), round(point.point.y * scaleY));
face->size->metrics has how much we're supposed to scale it to get from grid units to font units. Then, we gotta round at the end. This must be what happens when FT_LOAD_NO_SCALE isn't set.
The Less percentage function returns value in (%) - wow!
element {
width: percentage(700 / 1400);
}
will compile to:
element {
width: 50%;
}
What would be the best way or syntax to get the value in (vw) so the style will compile to:
(bare in mind that the division function needs to be used. (700 / 1400))
element {
width: 50vw;
}
The best way to achieve the expected output would be to multiply the value by 100vw. This would be the most meaningful and easily understandable method.
a{
width: 700/1400 * 100vw;
}
The below method of using unit() function works too but I wouldn't really recommend it.
One of the primary reasons why I wouldn't recommend it is because I am not sure if that is supposed to work as it does. The unit() function is supposed to take a number as its first parameter and add the units to it but a percentage value is not exactly a number and this may not work in future versions depending on how the Less core team view it.
I read the docs and it seems like the first parameter can be a number with or without a dimension but I still wouldn't recommend it because the earlier method is far more easier to understand than the usage of functions.
b{
width: unit(percentage(700/1400), vw);
}
This bit of Less does not compile.
h1 small {
font-size: 100/300 %;
}
...but I would like to be able to write something like it and get...
h1 small {
font-size: 0.33333333%;
}
Is that possible?
Try the following:
(100/300)*1%
Less only accepts values and not strings so you cant just add a string after a number but you can multiply with a percentage to archieve the same.
I'm using the new calc function in CSS to get the width for an object, as in:
width: calc(100% - 40px);
Unfortunately, since this is in a LESS file, LESS is "helpfully" pre-converting this to 60% during compile time.
I want less to ignore math when it's in a calc function since I need the browser to do this calculation, not less.
Is there anyway I can make LESS ignore this calculation so I can pass it straight to the browser?
Use it through an escaped string:
width: ~"calc(100% - 40px)";
Which outputs purely as CSS:
width: calc(100% - 40px);
Instead of precalculating width: calc(60%) (as you are experiencing).
NOTE: LESS 1.4+ does not need this escaped string if the strict-math mode is set, as all "math" then requires its own parenthesis to trigger. So LESS 1.4+ in that mode could be used as you originally had it, and if you wanted it to do the math, it would need extra parentheses and a unit() function like so: width: calc((100% - unit(40px)));.
In XAML, you can define a size property (such a length or width) in "*" units, in which * represents a part of the remaining space.
So, if I have a parent element that is 1000px wide, and it has 2 children, which are both defined as being 1* wide, they will be 500px each. If one is defined as 3*, and the other as 1*, then one will be 750px, the other 250px.
If there is a third element, and the widths of the 3 are defined as "100px", "" "2" respectively, then the widths of the 3 will be 100px, 300px, 600px.
Is there a CSS equivalent of this, or should I just simulate it using calc()?
Flexible box layout model does that with an OK support matrix (no IE)
It does exactly what you're after, e.g. for your scenario 3:
<div class="box">
<div>un</div><div>deux</div><div>trois</div>
</div>
.box {
width: 1000px;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ width:100px; }
.box > div:nth-child(2){ box-flex: 1; }
.box > div:nth-child(3){ box-flex: 2; }
Fiddle'd from html5rocks example
Although ratios aren't supported in CSS, percentages are. This means you can't really specify "the rest of the width", but you can normally get what you want.
For example, your first example of 1000px with 1* could be achieved by assigning `width: 50%'. Your second example would be 75% and 25%.
Your third example is a bit more complicated, mixing fixed px values and percentage values won't work. What you can do is use some clever margins to get the overall result.
I have created a JS Fiddle to illustrate the third example.