Make the width of svg auto based on picture - svg

I downloaded an svg-logo of zookeeper on wiki.
It looks the following:
Zookeeper svg-logo on codepen.io
I removed text from logo, but the width is still the same, like it was with the text.
Zookeeper svg-logo on codepen.io without text but with the same width
Is there a way to make the width get calculated based on the picture and to get rid of empty space?
I have already tried to remove width="243.7mm" from the second line, but this affects the whole ratio of image, not width.

Related

Unknown empty space in layout, how to remove it?

I have simple grid layout. 3 columns, 3 rows. Rows are set 400px 400px 100px just for demo.My monitor resolution is 1920x1080 (doesn't matter). On main page there won't content just informations. I'd like remove the empty space under the grid, cuz there is no reason for. I dont know how. It makes my other parts buggy. For better understanding i insert image below.
I checked also <body> but it's not this case.
There is no way to delete it
This is the default HTML and cannot be done unless you override it with an object or change the background color so that it is not white.

Fabric.js How to resize IText horizontally without stretching the text

I have this IText object within a parent Group object.
When I select the Group and resize it horizontally (and vertically as well) the IText resizes as well which makes the text Strech and look awfull.
Now what I would like to do is have the IText center itself (keeping its aspect ratio) within the Group.
How can I do that. I tried modifying the Width and Left of the IText when the object is scaling, but that did not work.
try use latest fabricjs version ( 1.6.0.rc1 ) and instead of using fabric.IText use fabric.Textbox.
This new class has the properties you are looking for, the controls normally used for scaling are instead used for resizing the element and the text flows inside it.
I was not able to make the latest fabric.Textbox work exactly like I wanted.
Luckily, I found a way of making the fabric.ITextcenter horizontally when the parent fabric.Group is resized horizontally and also make the same fabric.IText Text grow in size based on the vertical resize. No ugly text stretch.
Here is the solution:
https://jsfiddle.net/t44wyday/46/

Incorrect coordinates retrieved from image using ABBYY OCR SDK

I'm trying to process an image using ABBYY OCR SDK using the sample code placed in this question but I'm not able get the co-ordinates right for a specific word say "OCR" on the screenshot below.
I want to draw an overlay (yellow rectangle over the word "OCR") and sometimes the rectangle is placed very far away from the actual word.
The XML you get is synthesised according to this schema.
For each recognized character it will contain an instance of charParams element as shown in the answer you linked to. The element will contain the coordinates in page pixels - the same XML also contains a page element:
<page width="..." height="..." resolution="..." originalCoords="...">
where the image width and height are stored. So l and r for each charParams element is in range 0..width-1 of the corresponding page and t and b for each charParams element is in range 0..height-1 of the corresponding page.
Also it's worth mentioning explicitly that all coordinates are in pixels - they are completely resolution-agnostic. This is why whenever you try to highlight anything on an image you have to take zoom into account - the image will likely not be always displayed as is by your device software, but will be downscaled and so you have to map page coordinates onto your zoomed-out image coordinates and highlight appropriately.
Have you checked the DPI of the original image and also check the documentation to make sure the OCR engine is using the same DPI and not returning the image in points or some other measurement system.
It could be that rectangle you are drawing in iOS is not based on pixels but on some other measurement system also.
You just need to work through the process, testing as you go, and work out where the problem is coming from. It is most likely a uniform scaling and the distance from the actual word is proportional to the distance of the word from the top left of the page.

Is there a program to create gifs out of text?

Is there any program that can convert a file into an animated gif by taking the bytes (whatever I see on an editor is seen) and producing them on frames? Im trying to change a large script I wrote into an image so that if I run it, it looks like as if the code is scrolling. I would use photoshop, if I knew how to use it. Even then, the code is really big, so I dont want to be doing it frame by frame.
Whatever you see on the editor screen is ... a screenfull, so why not a screen capture program like http://www.faststone.org/FSCaptureDetail.htm
However, I suspect that you want to convert the entire file to a gif, since you talk of scrolling. Is that so?
If so, be aware that animated GIFs are limited to 8 frames, so you might want to convert to another movie format.
You could, for instance, Google for "text to MPEG". If nothing does it directly, get something that adds subtitles & make your video a solid white background *or match your webpage).
Maybe simpler is something like this ...
A Scrolling Text Applet - Now Free. - Provide an animated look and feel to your web pages. Scrolling Text is a Java applet that will automatically size itself to the available area given to it by the HTML form via the WIDTH and HEIGHT properties of the APPLET tag. There are many configurable features of this applet including title, colors, font size and style, border width and color, graphics, background images etc.
Configurable parameters including;
Background Color - Define your desired background color
Title - If you want a stationary title then include this parameter
Font Size and Style - All text can have it's own Font size and style
Text Color - Specify the color of the text with this one
Border Width and Color - If you require a border then define it with these 2 parameters
Scroll Speed - Customise the Scroll Speed
Display Time - Vary the Display time of each page
This applet is easy to implement and configure and along with the example and help files you should have no trouble implementing your own customised Scrolling Text in your web pages. No understanding of java programming is required, everything is adjusted by parameters in the HTML tags.
Now FREE.
+1 for an interesting question.

MailMerge: No fixed width font?

I am trying to send data to a specific MergeField. The data are sent correctly. Each line of the data has for specific characters. For example the data to the field may be:
12345 FIRST\nABCDE.F SECOND
(it cannot get the newline so i just so it through character \n)
Now in the printed document each character has its one width, '1' is smaller than 'E' for example. So the data are not alligned within the field. I tried the following fonts: Arial, Tahoma, Courier New. Nothing helped.
Any ideas? Thanks in advance.
Ps the data are sent through an executable built by Visual C++ 5.0!!
You should probably use a tab-stop based layout. Set your tab-stops every, say, centimetre or so (i.e. just big than the widest character in your font) and add a tab before each element that needs to be aligned.
With this you shouldn't need to find a fixed width font and can use something more attractive.
Edit: Out of interest, I wonder why you have no luck with Courier New which is fixed width.
Maybe you could post a screenshot somewhere so we can have a look at your problem in more detail.
Try Courier - it does not have kerning (kerning = variable character width)
Also in the Font window there is a check box that allows you to apply kerning to fonts of a certain size or above - setting this value to a large font size may remove kerning.

Resources