I need to find a feature or tool that allows me to programmatically create a file in which I will have a sized textbox with text that automatically scales to fit its dimensions and still be visible.
Here is an example of what it would do:
On the left side, an already sized textbox has some text. The text is too long so it goes "out" the textbox, therefore the tool would "scale" it to a size that makes it visible only in the textbox, and not outside. It could scale by changing font size, or "zoom" in any way.
I tried looking at OpenOffice Writer & Impress, Microsoft Word & Powerpoint, with no success. It seems really difficult with CSS according to the resources I could find.
Some resources I found (like Fitty, which is in Javascript. Not what I need, but still possible) will scale it in other manners that do not correspond my needs because they keep the text on one line, and I need them multiline...
See some wrong examples:
Does anyone know any tool that would have such feature?
Related
I have a template in which I'm attempting to change the source of a picture from Image 1, to Image 2 - yet I want Image 2 to keep the original size it was uploaded to the server in. (I want it in the position of Image 1, but its own dimensions.)
To do this, I figured I needed to use the adjust parameter - which I have attempted. The description for adjust=100% is "The picture is adjusted to be proportional to the original size." - which sounded like what I needed to do.
However, in my docx output, this seems to set the image size to be 100% of page width, rather than related to image size. (In the word image properties, it shows my image to be 208%, so I don't think it's related to my file!)
Is this a bug in opentbs, or have I misunderstood the docs? If so, how should I be doing it, or otherwise, can anyone thing of a work around? I attempted not using adjust at all, however that seems to have the same behaviour as adjust=inside - which I presume is the default.
With the normal thanks for a great tool!
Edit: The Error causing tag is below. I've found the problem reproducible when starting from nothing, and with just an image in the word doc. Word 2010, OpenTBS 1.8.
[onshow.logo;ope=changepic;tagpos=after;adjust=100%]
The problems was caused by the TbsPicAdjust() function expecting the image's dimensions to be provided in points, rather than pixels, as php's getimagesize() function was returning.
It was solved by replacing the two fixed coefficients in the TbsPicGetDim_OpenXML_dml() function with 9,525, rather 12,700 as they were originally coded. (Which would be an appropriate value, if the dimensions were in points, rather than pixels.)
After some research, from what I can see, getimagesize() always returns a size in pixels rather than points, so it looks to me like this could be a potential bug?
Additional Source for coefficient, combined with personal calculations: http://openxmldeveloper.org/discussions/formats/f/15/p/396/933.aspx
Workaround:
It depends if you are using the new (.docx) or old (.doc) style of document. If you have the newer style, I don't know for sure that you can change the image size without putting the tag directly into the XML. The older (VML, I believe) style uses <v:shape> to describe a picture rather than <pic:pic>. With v:shape, you can just put together a CSS-style string that describes the size, etc. of your image. Something like:
$imgStyle = "position:absolute;left:0;top:0;width:800;height:600"
Then you just have a tag next to your changepic tag; something like:
[imgStyle;att=v:shape#style]
The newer style does not use a style string like this to size and position images, the pic:pic element is full of nested tags describing the image so it is harder to get to the details (though you could certainly try). I ended up creating a subtemplate for my image switching because my template is in the new format with compatibility for the old format (so I have to maintain two image blocks). This allows me to maintain the XML directly for the image dimensions, but still be able to edit my main template in Word. I just use a tag in my main template that includes the subtemplate like:
[LineItem.template;block=w:r;file='img.xml']
Separating the manually controlled XML out allows me to edit the main template in Word without damaging the really custom parts. Using this technique though, you may have some trouble with onload/onshow tags in the subtemplate - everything I change in the subtemplate is controlled by a block.
I'm working on an ASP.NET website that needs to be internationalized. I'm using .resx files (essentially key-value pairs in a file) to populate static string fields on a page in different languages depending on the chosen culture/locale. I'm implementing Japanese and getting some stubborn vertical strings.
When copy and pasting them into the .resx file, they are horizontal (source of strings is Google Translate, for testing purposes). All of the strings appear normal, but one always displays vertically. The misbehaving string is a few div's deep (like all of them) and only has font-size, font-family, color, and an uppercase transform applied to it.
Removing any or all of the above rules does not change the orientation of the text. I've cleaned the formatting off the offending text with Notepad and shortened it (to ensure it wasn't a length problem). I'm stumped as to why this particular string is stubbornly vertical.
Here is the text in question: ログアウト
(Translation: Logout)
Edit
Clarification of the issue.
What it should look like:
The vertical text in question:
How can I force vertical text to be
horizontal?
Other than the title, I don't really understand your question. I'll take a guess anyway.
Try adding white-space: nowrap to the div that's misbehaving.
Recently I was doing some learning about right-to-left on the web and learned that Unicode characters have a directional property associated with them at the character level. So this might have something to do with that, though I certanily wouldn't know how to ascertain that or fix it, especially given that Google Translate is the source of the strings.
It happens quite often for Asian scripts (not just Japanese but also Korean and Chinese) to have text rendered incorrectly. Usually you just need to play with element width, especially if it is part of HTML table.
I'd like to add a description field to an application that can be as long as several lines (or even paragraphs) or as short as a one-liner.
Instead of taking up a lot of screen real estate or have scroll bars, it would be preferable to have the textbox grow based on its input.
On IE6 adding Style="overflow-y:visible" accomplishes this nicely (both on display of read only, and if we are in edit mode).
However, it has no effect on Firefox, or IE7 for that matter.
Is there a relatively easy fix for this?
Thanks!
You can accomplish this using jquery if you want to go down that route. It's a nice effect, kind of like the comment textarea in facebook.
http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html
I have a textarea where I measure the textWidth and textHeight to make sure the user cannot enter more text than can fit in the text area. I also extended the textArea with a textHeightNow and textWidthNow that measure the textField's dimensions since they update w/out requiring validation. Now this works great for 90% of the embedded fonts I'm using but any fonts that have giant serifs are not measured properly, for instance look at the 'f's in this text area:
alt text http://img.skitch.com/20091101-xhm5jguma1qgukg6fxrymrwr3u.jpg
You can see they get cut off on both sides because textWidth and textWidthNow both return an incorrect size not taking into account the massive serifs. The font size, coords and dimensions of the text area are all integers so thats not the problem, any other suggestions? I looked to see if textArea has a clipContent argument but it doesn't (that would have been nice).
Thanks
I've run into this problem before and as far as I can tell you have two options, none of them very nice:
Use the new flash.text.engine in
Flash Player 10... its very hard to use but
I think it will measure such fonts
(and ligatures) properly.
Draw the textfield into a bitmapdata
and use getColorBoundsRect to
determine its real dimensions.
I ended up using the latter as changing the whole app to the new engine would have been much much harder. You will need to tweak margins and use a larger textfield (inside some container) to be able to draw it properly, but it should work.
I have an internal web app with an image at the top of the page, currently containing some english text with drop shadows. I now need to provide localized versions of this page for various languages. My main choices are:
Have a different graphic per supported language, containing the localized text.
Use CSS to position localized text over a plain image, with a complex CSS technique to get drop shadows in most current browsers.
Are there other options? This is for an educational environment, I don't get to control the browser used by the students.
I did try both removing the drop shadows from the graphic, and also moving the text into in a header in the HTML, but neither was appealing. People said it looked like a cheap knockoff of the current page, which wounds my pride.
Personally I'm a big fan of CSS techniques for visual effects like this. The big benefit is that you are offloading the processing of the effect to the client side, saving you bandwith and content creation time (custom text images for each locale is a big order!), and making the page download faster for the user.
The only reason to avoid it is if you absolutely MUST have the drop shadows on very old (IE5) browsers with next to no CSS support.
Edit: Just thought of something - I a few cases like this where I need a specific font or some exact text effect I've used PHP to render the text, with effects, to an image and cache it server side. That way you avoid the content creation process and gain wider browser support in exchange for bandwidth and server CPU time. It's your call if the tradeoff is acceptable.
Generate the images on request server-side for each language, complete with shadows. Cache them as needed.
If you can use Image Magick, you can refer to this tutorial for generating text + shadows...
Maintaining images with text can be a pain - even without localization, I'd avoid it.
Two choices that I would attempt before going with your options are:
Looking for a free program that generates drop-shadow images that you can have your program utilize whenever it detects that new text is available for the title
Using a shadow image that can be repeated as a background image underneath the text
If those don't work, I'd try the CSS, but test it in as many browsers as you can yourself before going live with it.
Well, Safari supports a proprietary CSS property for drop-shadows, but it won't work in other browsers. CSS3 will have drop-shadows, too (actually only one for boxes, but maybe it can be used for text, too, e.g. when the box has a transparent background).
But seeing that most browsers don't even have a 100% CSS2 support so far, I guess you need to go with one of your two options. Of course, there is a not so complex CSS trick to get a drop shadow:
Drop Shadows for Everyone
But they don't look as nice as a real shadow, since they are not blurred. Further you need to have the text twice in the HTML for these to work.