It seems as if the simple stuff is really giving me a work over in SSRS.
I have a legends and the text spacing is all weird.
I would like it to start at the top with no spaces in between.
I have checked the Legend settings, but can;t seem to pin point where to set this.
Thank you for your assistance.
You've got your legend set with a custom size, which means it's being stretched to that size, regardless of the number of items in it. Try changing the CustomPosition -> Height value, or turning off the CustomPosition entirely and just placing the legend in the more usual way by dragging it around the chart.
Related
I have a list of items with some styling. Basically, I have an anchor inside the list item, and the anchor has the gray background etc, while the item itself has a gradient bottom border.
Between some items, I get a white line. I've found that it's caused by the list item it self 'shining through' the label. Why?
It looks like it doesn't happen if no anchor text wraps.
It also doesn't happen if the bottom border has an even thickness (2px, 4px, etc)
I know I can hide the effect by setting the background color on the item itself. I'm more interested in why it happens then how to solve it.
Here's a link to a codesandbox showing the effect.
It seems that you are coming across a fairly well known problem.
It arises when the system is trying to map CSS pixels into the several screen pixels that make up one CSS pixel on many modern screens.
Sometimes a screen pixel gets ‘left behind’ so causing a narrow line.
It’s a bit like a rounding error.
It can often be seen when zooming at certain levels. The fact that you see it on 1px sizing is what makes me feel this is the problem here too.
I've been looking at this small issue for a while and I can't seem to fix it. It's an firefox only bug it's fine in IE Chrome etc.
This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.
As you see the Black colour is slightly more down, I can't seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens't seem to help either, (did this locally).
If you open the pictures in photoshop or w/e they're exactly aligned.
Anyone have any idea why it goes wrong on Firefox only?
--> example
Removed the example since it's a website.
Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.
It's because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn't. You can use this workaround:
Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you're using em. That's the reason why you should now change to rem, at least for the elements inside .infographic.
Now you're done.
Ignore padding didn't seem to do anything since no padding existed? I'm really confused here. I do NOT want the red areas. (Please ignore potato colors, I'm just debugging)
Debugging using flash firebug - the dark blue border with the plus in the top left represents the whole of the UITextField inside of my Label component. I was using some other fixes found from around the web regarding how to scale the text properly to fit the container and this is a breaking issue for those fixes.
Does anyone know how to achieve this? I just want to scale my text dynamically when the window is resized and the container resizes as a result.
edit: it's important to note that this label has a scale applied, I can tell that the padding is still there when it's smaller but it's much less noticeable without the scaling
If I have problems like this I debug using FlexSpy.... to inspect the elements, and change properties in real time, very handy for things like this. Maybe that might be of some help...
https://code.google.com/p/fxspy/
Example of FlexSpy running
http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html
As far as I Know it isn't possible to get rid of the 2 pixel glutter around the text. For information about the padding arround the text see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextLineMetrics.html
You may use the .textWidth property to find out the with of your text. The exactly position of the text is dependent of the textfield.antiAliasType and the _textfield.gridFitType methods. With _textfield.gridFitType = flash.text.GridFitType.PIXEL The Flash player tries to render the text to pixels. This causing the 2 pixel glutter to vary between 1-3 pixels.
I have created an algorithm that converts text formatted in SVG into HTML, the algorithm works well but the positioning of the text in the HTML version is slightly out compared to the SVG.
I have realised that this is due to the coordinate system in SVG; it's origin is at the bottom left rather than the top left. Therefore my HTML text is below the position it should be. This is for commercial software, personally I would rather keep the text as SVG, but I can't because of a client request, also this needs to be a pixel perfect copy!
In order to fix the HTML I need to align the text so that its baseline is at the point that I read from the SVG. I have tried to do this with vertical-alignment but with no success.
The problem is not working out the coordinates here, I already know where the baseline of the text should be.
Does anyone know how to to align the baseline of some text to a set point in HTML? Or does anyone know if it is even possible to place text using the baseline rather than the top left point.
CSS can't change the position of the baseline. It is where it is, based on the font.
I would love
to do this by trial an error but this needs to work for any SVG file,
which could use any font, at any size. Therefore the margin is going
to be different each time.
That rules out any kind of "hack" to make it look right..
Take a look at all the possible values for vertical-align.
If none of those help, I don't know what to suggest.
line-height should work for you. But to be honest, your going to need to play around with a few things, like padding, margin to get it just right.
You should be able to define the location using divs bottom and left (or whatever you have each line of text set as) CSS properties (and make sure that it's position is set to absolute).
Workaround
One way will be to wrap your fonts in an element to allow vertically nudging it in the viewport.
<style>
.font-vertical-fix {
position: relative;
bottom: -0.2em;
}
</style>
<span class="font-vertical-fix">
Some badly designed font family ported to the web.
</span>
Example: https://jsfiddle.net/rkc3ho48/
Solution
The solution is to use a Webfont that's designed for the web.
Not all fonts made for desktop apps like Adobe/Sketch are designed with the web in mind. On these platforms, the designer can just vertically nudge the font in the canvas.
On an HTML page, you can make text flow around images with the CSS property "float". But this will only consider the image's rectangle, not transparent regions in the image. I now have an image that has large areas of full transparency, like for example a circular logo, and would like the text to flow around the circle contour of that logo, not the bounding rectangle. At least on the text-facing side of the image.
I know that CSS is probably not suitable for that task. But is there some workaround, like hidden divs or something that can achieve the same (or a similar) effect? Has somebody already seen such a thing?
I have written a PHP function for that now. It takes the PNG image and generates the <div> elements to make the text flow around another form than the image's rectangle. You can find the code here:
https://unclassified.software/source/shaped-image-flow
Update 2020/2021:
Now there is a CSS property for that: shape-outside. It can be given an image with transparency that will determine the outside shape to let the text flow around. If the visible image is already a PNG, the same image can be used for this CSS property. Additional margin can be added with shape-margin. Both are supported by anything except IE.
Example:
<img src="img/shape.png" style="shape-outside: url(img/shape.png); shape-margin: 1.5em;">
I really doubt you can do that easily without making a big mess, of tags, JavaScript or both. One way i can think is placing image on larger zindex and positioning div or divs behind it, and text would flow around them. It would be easiest to use smaller rectangle that excludes transparent areas. But then why not just crop/clip the image? Or you can try floating line height divs behind it, but I guess that it will get quite ugly pretty fast. Or you could try placing each line of text in span/div and positioning them manually or with js by calculating approximate shapes to those that are in the image. One other idea, of which I'm not sure: it might be possible do this using svg. But quick search does not show much promise ether.
Any way one more thing to consider, when doing something as experimental and complicated as this, in whatever way you do this, it will most likely be huge pain to make it work well across most browsers.
There is a css property that do just what you want
shape-outside include values of shapes you can use.
https://www.geeksforgeeks.org/how-to-wrap-the-text-around-an-image-using-html-and-css/