So I'm just trying to grasp this concept. In the image bellow you can see that the total width of the sub elements is 250px, and they are both surrounded by 10 px of padding..So to get the percentage we need to do target/context. The part I don't understand is that to get the percentage of the total width(250px) we calculate that based on the parent's total width(590px), but to calculate the percentage of the padding(10px), we do so based on the parent's inner width (570px).. So why is that? or more specifically why isn't the 250px percentage calculated off the 570px also, as it would seem the 570px div's padding has no barring on the space taken up by the 250px block. What am I missing here?
I found that diagram a bit confusing and it's hard to answer your question using it alone, I hope this example I've mocked up will help (usually easier to look at live code) - be sure to read the source and examine the size of the individual elements using Chrome Developer Tools (the Metrics section and simply hovering over the individual <div>s with the Elements tab open) or your browser's equivalent.
In the diagram, they've used percentages but have confused things by rounding them; never round percentages up/down when doing responsive design, just use the exact figure (or if you're drawing a diagram, show the target and context calculation), browsers (with some ancient exceptions) can always cope with multiple decimal places. (Ideally you'd use a CSS pre-processor like SASS which will do the maths for you).
Also, I've simplified things by just having two columns and floating them left/right, I think the third central 20px column in the drawing makes it harder to understand. Get it working with equal left/right padding for everything first then worry about the more complex stuff, only use a third div if you actually need something inside it.
You also need to be aware of the box-model - the sub elements width is 250px, but if have a 250px wide box and use CSS to add 10px padding either size, the display width will be 270px because it's the width (or height), plus any border, plus padding. This can get really confusing - what you actually want is something that's still 250px wide with 10px left/right padding within it - often it's easier to turn this behaviour off - as in my example - with box-sizing: border-box; (there's a Mozilla prefix needed).
You always use the parent (the element's container) for the context when setting flexible margins or padding. You may note that I've used 570 rather than 590 in the calculation for .rectangle because 570px is the effective width you have to work with for Column 1, the 20px is just padding on either side, I'm still looking at the parent element though, nothing else. The rectangles also have left/right margins to space things out; you could remove those or replace with, say, a right-only margin on the first rectangle if you wanted to have it flush with the column text.
Hope this helps…
Related
I've reedited this question a few times: I've made some good progress!
So, as I understand it, multiplot splits the whole canvas up into equal sized parts as needed. This is a little weird when your different plots have different dimensions, as in my case, but it works. The problem might come in when the graph are supposed to be very close together (e.g. each takes up most of its canvas), but one of them has labels. In that case, it seems the plot with labels must resize to be smaller so everything can fit. That's where I am now.
I see a few options.
make all the plots farther apart-- but I don't want to do that.
somehow make the label not part of the multiplot-- I would totally do this, but I don't know how. It's possible even just the axis tics themselves would be too big, but I can probably deal with that or compromise just that amount on the spacing.
So my question is, how can I put words in a gnuplot graph, completely separately from a plot?
(The picture is also giant, which is unfortunate, it was the only way I could make the formatting work)
Two things:
Multiplot has a convenience mode layout <rows>, <columns> that, as you say, splits the page into equal rectangles. But you do not have to use this convenience mode; you can assign each sub-plot to any arbitrary rectangle on the page, even one that overlaps or is interior to another rectangle. Here is an example from the online demo set that is close to what you show:
Demo of multiple plots with explicit alignment of borders
Placing text anywhere on the page: The set label command allows you to position the text using screen coordinates rather than plot coordinates. For example, to place a single large label centered at the top of a page that contains multiple plots:
set label 1 "This label is positioned independent of all plots"
set label 1 at screen 0.5, screen 0.95 center
set label 1 font "Times,20"
I have a set of pages that look like this:
I have the content in grids with * Heights and Widths so the grid correctly scales when the entire window resizes. I would like the text to resize with the grid. Basically I would like the user to resize from this:
To this:
(preserving white space)
One way to do this would be to wrap the TextBlock in a ViewBox with margins on the right and bottom (for Grid.Row="3") to account for white space. But because I have several pages with different lengths and line counts I would have to set the margin specifically for each page otherwise the text sizes would differ on each page. Is there a better way to do this??
I don't think there is a better way to do this. There are different ways. But, I think it isn't just a matter of opinion that they would not be better.
Ways I can think of.
Render your text offscreen, rendertargetbitmap that so you've got a picture. Change your textblocks on screen to images and stretch them.
Or
Work out the size your text wants to be. Then do some calculation comes up with a different fontsize which is "better". This is a lot easier to write a description of than do.
In my opinion.
A viewbox is easier to implement. Way less error prone than calculations. Will give at least as good results as rendering to a picture.
I just want to add one more solution to the ones suggested by Andy, which is more of a scientific approach and takes a bit of practice to master.
Suppose you have to find a function F, which maps one or more variables to a desired single value. In your case that would be a function F, which takes aspect ratio of the window as input and outputs an appropriate font size.
How can you find such a function?
Well... you don't need to do any math yourself!
First, you need some data to begin with:
1. Resize the window randomly
2. Calculate aspect ration (X)
3. Pick an appropriate font size that looks good enough (Y)
4. Repeat the measurement 7 to 10 times (sorry data scientists)
5. Enter the data in Excel - one column for X and another one for Y
6. Insert a scatter chart
7. Choose the best trendline for your data, but avoid the polynomial one
8. Display the trendline equation and use the expression in your code
Now I should mention the pros and cons of this regression technique.
Pros:
1. It can solve a wide range of tricky problems:
"I use this 3rd party control, but when the text is too long it overlaps the title bar. How to trim it so it doesn't go beyond the top border?. Deadline is coming!"
2. Even if it doesn't solve the problem perfectly, the results are often acceptable
3. It takes minutes to try out unlike spending a day refreshing your math skills
Cons:
1. The biggest problem is that to keep it simple, you often lower the number of
variables by assuming some of them to be constant. In this post I've assumed that
the font family won't change for example, neither the font weight.
2. If any of the assumptions does not hold the final result could be even worse
This technique is fragile, but powerful. Use it as your last weapon and never leave magic expression like
fontSize = (int)(0.76 + 1.2 * aspectRation) without documenting how it came to be.
I'm working on a view that's implementing a multi-column text layout using CoreText (using CTFramesetter).
CoreText usually fills each frame completely, so when I call CTFramesetterCreateFrame with three rects that make up my columns, I get a layout that's similar to the following image:
So the left column is filled completely, the middle column partially and the right column is empty. But instead, I'd like the text to distribute over the three columns so that they take up the least vertical space possible, like in this image:
How to achieve this with CoreText?
I don't mind going low-level here, even drawing each CTRun by hand is an option if necessary.
One idea I came up with would be to create a large frame with the width of a column and then figure out which CTLine to draw in which column. But this has a few limitations:
It would only work if all columns had the same width.
It does not work with clipping paths.
Unfortunately, I'll need to use clipping paths (as in kCTFrameClippingPathsAttributeName) so this idea is out. I could live the fixed column width limitation, though.
Another idea would be to reduce the height until the last frame overflows but that's a pretty brute-force way that surely wastes resources.
(BTW, due to compability requirements the use of TextKit classes like NSTextStorage isn't possible; the resulting view is intended to be used on Mac and iOS, but it needs to work on iOS < 7)
Since there doesn't seem to be a non-expensive way to solve this, here's how I've done it:
I did go with the "reduce the height until the last frame overflows" approach. To reduce the height, I simply have another clipping path (kCTFrameClippingPathsAttributeName) which is a rectangle that fills the bottom of the view to the required height.
The probably most expensive but simple way would have been to increase the rectangle height until finally the text doesn't fit inside the last frame any more.
Instead I've implemented a binary search for that. For my demo app, I usually find the correct height after 8-10 recursions which still is expensive but at least it's pixel-perfect and doesn't rely on any other information other than "did the last frame overflow".
I've been trying to learn responsive coding lately, and the books and tutorials i've gone through have been constantly shifting between using ems and percentages. So i was wondering, when is it appropriate to use ems, and when is it appropriate to use percentages?
Just to clarify other answers, ems do NOT cascade but percentages do. Think of it this way: ems are relative to the current element and percentages are relative to the container. So using a percentage to specify the width of a div inside a div will indeed make the inner one smaller (or larger) than the outer one, but using ems to specify the widths of the same nested divs will specifically make them the width you expect them to be. Generally, you should use ems to specify font typography and percentages to specify element sizes, if you are wanting responsive design.
This is really a preference. Some will tell you to set body{font-size: 62.5%;} (which is 10px if the browser's default is 16px) and then use ems from then on. So, if you want a font-size of 22px you would use 2.2em. However, most developers have their own opinions on this matter. Some use percentages always. Some use pixels always.
em is the measurement relative to the current font size, such as:
body{font-size: 16px;}
.someClass{font-size: 1em;} /* 16px */
.someOtherClass{font-size: 2em;} /* 32px */
.anotherClass{font-size: .5em;} /* 8px */
If no font-size value is set for any parent elements in the document, the browser's default (most likely 16px) font size == 1em.
Percentages work similarly in that they are relative to the parent container, as opposed to the parent container's font size.
body{width: 800px;}
.someClass{width: 100%;} /* 800px */
.someOtherClass{width: 200%;} /* 1600px */
.anotherClass{width: 50%;} /* 400px */
The issue to look out for in both scenarios is that they both cascade meaning that if you have two classes set with font-size: 2em and you nest them, you will have 4em on the inner element.
em and % both are good for responsive web design.
As everybody said em is generally used to define font sizes and % for element like <div> sizes.
But I found in my experience that using % for elements when you have fonts inside the element can make you element adjust according to the length of font inside it.
For example, if your statement inside the element is completing in 20px 100% is going to give it 20px and if it got completed in 10px, the 100% of div is gonna give it 10px.
So if you are giving some design to a div where you have some fonts/words inside, better use em for preciseness.
This is a question regarding a very simple construction - I have the following XAML:
<Viewbox Height="100" Stretch="Uniform">
<TextBlock FontFamily="Georgia">My Cool Text</TextBlock>
</Viewbox>
This is quite simple to understand. Yet when I start the program I get strange blurry text (there are no bitmap effects anywhere in my project).
(left side - the designer view in VS2010, right side - the running application)
Does anyone have ANY suggestions about why this is happening??
While Jefim has correctly answered his own question, I wanted to explain why you get this behaviour when using this particular set of features. Jefim suggests that this is a bug in WPF, but it's not. The problem arises as a result of asking for WPF to do something impossible. It has to pick a compromise when you've asked for this impossible thing, and the result is what you see above.
The explanation is a bit long for a comment, which is why I'm putting it in a separate answer.
This example uses two mutually contradictory features of WPF. Those features are:
The ability to render visuals consistently at any scale
The ability to render text in the same way GDI32 renders text
You can't use both features at once. GDI32 renders text in a way that cannot be scaled consistently: if a particular piece of text at a certain font size happens to be 200 pixels wide, if you multiply the font size by 3, and render the same text in the same font family at that new font size, in GDI32 it probably won't be 600 pixels - it'll be close, but it will typically not be quite right.
GDI32 messes with the shapes and widths of characters in order to enhance the clarity and sharpness of the text. Specifically, it bends letters out of shape so that their features align better with the pixels on your screen. And where necessary, it will adjust the width of individual characters to be an exact number of pixels wide. Since this letter bending is all based around actual pixels, it bends text in different ways at different font sizes.
While that gives you nice sharp looking text, it looks absolutely horrible if you try to change the scale gradually. If you try to animate the font size of some text rendered in this fashion, the thing will seem to shimmer and shudder, because the adjustments made in the name of clarity end up being slightly different at each font size. Even if you're not animating, it can still produce poor results - if you have a single typeface shown at a number of sizes, it can look quite different at each size; if your application has a zoom feature, the character of the text can seem to change significantly as you zoom in and out. (And so can the layout. If you use Microsoft Word, you may have noticed that you sometimes get odd-looking extra wide spaces between certain words. This is the result of Word fighting with GDI32 - Word attempts to keep the on-screen layout as close as possible to how things will look when printing, which means it sometimes clashes with GDI32's grid fitting.)
So WPF offers a different approach to text rendering: it can render text in a way that is as faithful as possible to the original design of the font. This distorts the text less, and it means that you don't get discontinuities as you scale.
The downside is that the text looks blurry, compared to how text rendered by GDI32 looks. (The distortions made by GDI32 are all aimed at improving clarity.)
So in WPF 4.0, Microsoft added the ability to render text in the way GDI32 would. That's what TextOptions.TextFormattingMode="Display" does.
By turning on that option, you are saying "I don't need consistent scaling, and I'd prefer clarity, so generate the same pixels you would have done in GDI32." If you then go on to apply scaling, having told WPF you didn't need scalability, you get crappy results. WPF carefully generated a bitmap representation of the text exactly to your specifications, and you then told it to render that text at a different scale. And so it looks like what it is: a scaled bitmap of some text that was generated for a different resolution.
You could argue that WPF could do something different here: if you apply a scale transform in GDI32 you'd see different behaviour - you'd see the inconsistency at different scales described earlier. If you really want that effect in WPF you can get it by modifying the font size directly. But WPF doesn't prioritise getting that same effect - its goals are to make it possible to get GDI32-style crisp text when you really need it, and to provide consistent scaling by default.
And what you're running into here is the "consistent scaling". Turning on GDI32-style text rendering doesn't break consistent scaling: applying a scale factor (either directly, via a ScaleTransform or indirectly via a Viewbox) will change the dimensions of the visual by exactly the specified scale factor. If it were to re-generate the text visuals by grid fitting to the newly scaled size, the text would come out at a different width. That would actually cause the Viewbox problems: it applies a scale factor based on the content's natural size, designed to make it fit the available space. But if it re-did the grid fit after scaling, that would actually change the width. Because of the inconsistencies inherent in how GDI32 text rendering works, it might not even be possible for the ViewBox to find a suitable scale - it's possible to come up with a piece of text which, when rendered in a particular font, will never come out at 200 pixels wide. For some font sizes, the rounding inherent in grid fitting might bump the size down to, say, 198, and it might stick at that as you make tiny increments in the font size, until you go past some threshold at which point it might jump to 202 pixels.
For a Viewbox attempting to force the text to fit into exactly 200 pixels, that would be a problem. But Viewbox doesn't work that way - it uses WPF's consistent scaling, downstream of the point at which you chose the font size to which GDI32-style text rendering is working. So Viewbox will always be able to do what it is designed to do, but that is task that's fundamentally incompatible with GDI32-style text rendering.
So in short, WPF renders the text for the font size you requested, and then scales the result.
So you have to pick just one feature - you can't have both because that's simply impossible. Either don't attempt to render text in a context in which an arbitrary scale factor may be applied (e.g. Viewbox) or don't turn on GDI32-style text rendering. Otherwise, you get that weird pixelated text that you've encountered.
Ok, bug found. My Window style has the following setter:
<Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
If I set it back to "Ideal" (which is the default value) then it renders the text inside the viewbox correctly. I would say that this is a bug inside WPF. Basically, if you try this:
<Viewbox Height="100" Stretch="Uniform" TextOptions.TextFormattingMode="Display">
<TextBlock FontFamily="Georgia">My Cool Text</TextBlock>
</Viewbox>
You will get the same result as in my initial picture.