Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old August 2nd, 2006, 10:30 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default Vertical Text - How to stop wrap?

Hello CSS ers

My objective is to save width (for printing) due to a performance management dashboard having to many items (Nature of the beast)

I intend using CSS to solve my issue. Have found out about the very useful style to achieve vertical text:

.ArialVert
{ writing-mode: tb-rl;filter: flipv fliph;
   font-family: Arial,Verdana;
   font-size: 9px;
   color: #000000;
   background-color: #FFF1D9;
}

However some text wraps onto a new line (defeating my purpose of saving space width wise) some does not. I am in a strict IE 6.0 sp2 SOE environment and do realize this style is not very portable. The text strings are accronyms for navy bases EG:

Land Comd (no wrap)
HQ LSF (wraps to a new line after the Q)
HQ 5 Bde (no wrap)
DJFHQ (no wrap)
51 FNQR (wraps after the 1)

How can I force no wrap?

I have made sure the cell is not constrained by height, this is definatley not an issue.

Also, to aid anybody looking at using this style. If I use the above style without the background-color: [someColorValue]; property the text goes bold and turns its self into a font I do not reccognize (un-readable). Be aware of this. I only solved it thru trial an error. can anybody tell me why this is? Its not an issue however I remain intriuged.

TYIA

Wind is your friend
Matt
__________________
Wind is your friend
Matt
  #2 (permalink)  
Old August 2nd, 2006, 10:52 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

It would be easier if you showed us a page (URL) so we could get the context. For instance, why does the shorter name (HQ LSF) wrap by not the longer (HQ 5 Bde)? What have you done to make that happen?
Obviously what you posted isn't the whole story. But try this.

Land Comd
HQLSF
HQ 5 Bde
DJFHQ
51 FNQR

--
http://yupapa.com
  #3 (permalink)  
Old August 2nd, 2006, 11:17 PM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

Thankyou for your prompt reply. Unfortunatley I am in a Defence Restricted environment, a URL is not a option.

;;;why does the shorter name (HQ LSF) wrap by not the longer (HQ 5 Bde)?
That is my question. I dont know why, thats why I submitted the post to the CSS experts. i am an ASP guy.

;;What have you done to make that happen?
Dont want to sound condesending, appogies if I do however if I knew i wouldnt have the problem

;;;Obviously what you posted isn't the whole story
Not sure what else I could possibly say. I thought my post was verbose enough.

The values are comng out of a database. It is a very dynamic page. I have checked the DB table where the text is held. There is no reason why it happens in some cells and not others. FYI Its the same cell in a loop. I will upload a screen shot to a location where you can download it, give me five minutes I will post a link, username and password so you may see for your self

I do not wish to store non breaking spaces in my database. I was hopping for a CSS property which solved the issue.

Thankyou for your time

Wind is your friend
Matt
  #4 (permalink)  
Old August 2nd, 2006, 11:37 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

What you use to create verical text is not CSS. The code you posted alone does not create line breaks. Conclusion: something else is the cause.

Quote:
quote:Unfortunatley I am in a Defence Restricted environment, a URL is not a option.
So make a dummy page with dummy content that shows the problem and put it on a publicly available server... the details you offer aren't enough to understand your problem.

--
http://yupapa.com
  #5 (permalink)  
Old August 3rd, 2006, 12:07 AM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

;;;What you use to create verical text is not CSS
are you saying:

.ArialVert
{ writing-mode: tb-rl;filter: flipv fliph;
   font-family: Arial,Verdana;
   font-size: 9px;
   color: #000000;
   background-color: #FFF1D9;
}

is not CSS?

That code is CSS, does create vertical text and works. Im am not sure we are on the same page.

FYI here is a cut n paste version of what i am doing. Using CSS to create vertical text:

<html>
<head>
    <title>Vertical text</title>
    <style>
.InstructArialVert {writing-mode: tb-rl;filter: flipv fliph; font-family: Arial,Verdana,sans-serif; FONT-SIZE: 9px; color: #000000;background-color: #FFF1D9;}

    </style>
</head>
<body>
<div class="InstructArialVert">Test-1</div>
</body>
</html>

Wind is your friend
Matt
  #6 (permalink)  
Old August 3rd, 2006, 12:17 AM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

meow

I appreciate your time and effort however now realize a screen shot will not help you help me. I am not looking for an alternative for creating vertical text. I wish for an experienced CSS (Richard York are you there mate) person to look at my current style and assist.

TYIA

Wind is your friend
Matt
  #7 (permalink)  
Old August 3rd, 2006, 12:36 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Some of it is CSS, yes, but the interesting part isn't. The proprietary MS extensions, "filters an transformations" and behaviors are more JS than CSS if I understand correctly, even if they can be evoked from a CSS rule. But that isn't important for the problem.

Have you looked at the code you posted in IE? Do you see the wrapping problem? Because I still don't. That's why I say the problem lies somewhere else - in the code you don't show. Most likely is that you somehow limit the height of that DIV. If that's the case, don't do that or give it enough height to hold the text without wrapping.

My crystal ball just ran out of power. Must load batteries.:)

--
http://yupapa.com
  #8 (permalink)  
Old August 3rd, 2006, 01:22 AM
Friend of Wrox
Points: 6,664, Level: 34
Points: 6,664, Level: 34 Points: 6,664, Level: 34 Points: 6,664, Level: 34
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2004
Location: Sydney, NSW, Australia.
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
Send a message via AIM to mat41
Default

For the good of this post:

;;Some of it is CSS
Which part of the style are you saying isnt CSS

;;;but the interesting part isn't
Constructivley, exactly what part are you refering to

FYI: It has nothing to do with the div tag. The style can be used in many many tags including a regular <td>

;;Most likely is that you somehow limit the height of that DIV
You have not read my post properly. I have placed a transparent image (not in the same cell, an adjacent cell outside the ASP loop) to mitigate the possibility of the cell height being a factor. The example I gave you is in a <div> tag. the example on the page is actually in a <span> tag. IMO this has nothing to do with the issue. I have tryed placing the STYLE inside all of the options EG div, td, span etc - I get the same result...




Wind is your friend
Matt
  #9 (permalink)  
Old August 3rd, 2006, 02:19 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Quote:
quote:You have not read my post properly
That is so much harder to do without seeing the code for the page you're having problems with.

Sometimes it may be something stupid like (irrelevant) whitespace between tags in the source.

It' hard to see for us (and read your post properly) what's going without any code....

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
  #10 (permalink)  
Old August 3rd, 2006, 08:43 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Unfortuntely, I don't have time to try and recreate what you're doing on my own in code. I have to see a live, functioning example.

That you are working on a sensitive project is no excuse. Post an example that doesn't contain sensitive information. Remember, you're the one asking for help. Don't try to make us go far out of the way to help you. Make it easy for us to help you.

That said, and without seeing it, as was suggested by others here, eliminate all spaces from between the words you don't want to wrap. Implement the &nbsp; character in place of spaces in those situations. Words with hyphens will always wrap on the hyphen, and I've personally never found a good way around that. Last resort, implement the white-space: nowrap; declaration in creative ways to prevent wrapping. Spaces, BTW, includes line breaks (not to be confused with HTML line breaks) and spacing between elements in the source code.

If there's anything more to advise you on, we'll have to see a live, functioning example of what you're talking about.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html




Similar Threads
Thread Thread Starter Forum Replies Last Post
Wrap Text sams ASP.NET 1.0 and 1.1 Professional 0 September 20th, 2007 02:12 AM
Text wrap in Datalist helix24 ASP.NET 2.0 Basics 0 May 12th, 2006 07:45 PM
how does one get vertical text in HTML? lcsgeek Classic ASP Professional 3 September 9th, 2004 08:47 PM
Wrap text with merged cells aspadda Excel VBA 4 January 29th, 2004 03:02 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.