Is it possible to adjust the size of the font, depending on the length of the word?
I have a situation where I need to display one word, on one line. But the word can vary between 1 and 10 characters long. I would like the text to be a maximum font-size of 65px, but adjust the more characters are added so that when all 10 are used, the word doesn't get pushed out of view.
The dimensions are always going to be fixed (portrait iPod), just the length of the word is variable.
Any CSS ninjas out there mind teaching an old dog a new trick :)
you can use javascript to change font-size according to string length -
var str = "Hello World!";
var n = str.length;
if(n>10){
document.getElementById("id").style.font = "italic bold 20px arial,serif";
}
hope this help..
Related
Is there some means - short of extending the JavaFX charting base class(es) - to specify a multi-line title string?
As seen in the screenshot the title is the only element 'wanting' more space.
I had seen some references to using a newline '\n' and even a pipe character '|' in the string but they apparently do not work for the title.
I just threw this in a sample I had and it worked.
chart.setTitle("really long title...........\n.............and some more ");
Label l = (Label)chart.lookup(".chart-title");
l.setWrapText(true);
The \n sets the break point if I don't want it at the limit.
As you can see it's just a Label, the hard part is getting it.
You can also use a css file with the selector. I think it's already centered.
.chart-title{
-fx-wrap-text : true;
-fx-alignment : center;
}
I know how to use the (font-size) attribute, but I only want the letters on a mobile device to get smaller when the letters reach a certain amount.....
When letters reach 40 characters, I want the letters to shrink so that it can fit in a mobile browser
Can this be done?
You can use jquery to count the number of caracters inside a certain tag. For instance in a <p>like this:
http://jsfiddle.net/dL1zzdtg/1/
var XX = 40;
$('p').filter(function() {
return $(this).text().length > XX;
}).addClass('long_paragraph');
You adjust the number of caracters in the XX = 40 above.
and in the css add:
p.long_paragraph {font-size:70%;}
(I found the javascript here )
I have listbox with text in it, and I was asked to see if I could just justify its contents after the dash. My resulting code produced something like this:
Which works fine for scenarios where the text to the left of the dash is less than the max length found from the other items in the listbox (i.e. (B20) is less than (B15-B19), which is the longest entry found, so add some whitespace before the dash).
The issue, though, is that if the text before the dash is same length, it still looks like it isn't justified. Example:
Is there a way to truly line up all the dashes? I would imagine I would have to look at the actual pixel length of the characters before the dash as opposed to the length?
Notes:
I am using ASP.NET Webforms
VB.NET
The text for each item in the listbox is all one string
Right now, my method to accomplish what you see in the first picture is as follows:
Public Sub JustifyDisplayName()
Const ACCOUNT_FOR_DASH As Integer = 4
Dim maxCharCount As Integer = 0
Dim whiteSpace As String = HttpUtility.HtmlDecode(" ")
'Find which one is the longest code
For Each element As TextEntry In Me
If element.Value.Length > maxCharCount Then
maxCharCount = element.Value.Length
End If
Next
'Now, extend the '-' to the max for all items
For Each element As TextEntry In Me
'See how much white space we need to inject
Dim paddingNeeded As Integer = maxCharCount - element.Value.Length
Dim tempDisplay As StringBuilder = New StringBuilder(element.Value)
If paddingNeeded > 0 Then
tempDisplay.Append(CChar(whiteSpace), paddingNeeded + ACCOUNT_FOR_DASH)
tempDisplay.Append(" - " & element.Description)
End If
tempDisplay.Append(" - " & element.Description)
element.DrillDownDisplayNameJustified = tempDisplay.ToString()
Next
End Sub
Thanks.
If you used a fixed-width font, you could make this all much easier. In addition to good ol' Courier, I believe there are others.
If you don't, you're not going to be able to get exactly the right width. You could get close, but you won't get it exactly, because the difference in length between (H60-H95) and (I00-I99) as they are rendered may not evenly divide into increments of one .
But if you really want to give this a try, you'll have to use the System.Drawing namespace, the Graphics class, and a method on Graphics called MeasureString. This will be just to get the lengths of the strings in your selected font, though: System.Drawing doesn't apply to web apps.
If you could append spaces to short items before the dash so that you always have the same number of characters before the dash, you may consider using Monospaced Fonts, where each character occupies the same width - Ref: Similar Question.
I am working on some legacy code and system, and trying to get auto -resizing of text working.
however, despite the code working really well. This also wraps actual single words into two words.
for example QUALITY
becomes
Has anybody any idea how to keep the word wrapping, but remove the letter wrapping.
thanks
the code:
truncated = 1
fontSize = 127
thewords = Request("words") ' try QUALITY
do while Cint(truncated) = 1
set theDoc = Server.CreateObject("ABCpdf7.Doc")
fontSize = fontSize - 2
if fontSize <= 0 Then
exit do
end if
theDoc.Rect.Width = 273
theDoc.Rect.Height = 202
theDoc.Color.Alpha = 0
theDoc.FillRect()
theDoc.Color.Alpha = 255
theDoc.FrameRect()
theFont1 = "C:\inetpub\wwwroot\fonts\fonts\Helvetica.ttf"
theDoc.Font = theDoc.EmbedFont(theFont1, Latin, False, False, True)
theDoc.Fontsize = fontsize
theDoc.VPos = 0.5
theDoc.color = "75 68 67 90"
oText = theDoc.AddTEXT(thewords)
truncated = theDoc.GetInfo(oText, "Truncated")
'Response.Write(truncated & "<br>")
Loop
Data = theDoc.Rendering.GetData("testing.png")
Response.ContentType = "image/png"
Response.BinaryWrite Data
I know this is old code, and even an old version but this is what the system runs. If anyone has a clue then it would be much appreciated.
thanks
abcPDF will only letter wrap if:
wrapping is on
There is not enough horizontal space to fit one of the words being set
There is vertical room for another line in the active rect
These conditions therefore amount to there being plenty of vertical room but not enough horizontal room for some particularly long word. So a heuristic for finding the correct font size would be to test horizontally first, using only the longest word from your string, in a temporary rect that shrinks to one more than the font size as you reduce font size; then, once you have the right font size to avoid letter wrapping, go back to testing with the original rect and full string, continuing to decrease font size until truncation completely disappears.
This will get much hairier if what you're trying to set is actually HTML with variant fonts or sizes; but for plain text in a single font and style, it should be ok.
I am converting text to image. Some of the text is longer in length than others.
How do I make sure that none of the text is truncated?
The code below is limiting my bitmap to 250, 30.
System.Drawing.Bitmap imgIn = new System.Drawing.Bitmap(250, 30);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(imgIn);
g.Clear(System.Drawing.Color.White);
System.Drawing.Font font = new System.Drawing.Font("Arial", 10, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Pixel);
I was following this example:How to convert Email Address or another text form TextBox to image
UPDATE
I found this article that helped accomplish my task: Generate Image from text using C# OR Convert Text in to Image using C#
After I was able to resize the image according to the text length, I discovered that I need to introduce line breaks in the text otherwise the image was going all the way to Timbuktu when
the text was a couple of sentences.
How do I introduce line breaks in long texts?
You can use TextRenderer.MeasureText to get the size in pixels of the text.
Size size = TextRenderer.MeasureText("text", Font("Arial",10));
System.Drawing.Bitmap imgIn = new System.Drawing.Bitmap(size.Width, size.Height);
EDIT
I found this article on how to write an HTTP Handler that will do what you want, it even wraps text to fit.
Try this one: http://msdn.microsoft.com/en-us/library/system.drawing.graphics.measurestring.aspx which is on System.Drawing.Graphics.