write diagonally

[joonstar]

(1) Horizontal writing

12345

(2) vertical writing

1
2
3
4
5


(3) diagonal writing( 0 is empty space here)

1
02
003
0004
00005


(4) diagonal writing(0 is empty space here)

00001
0002
003
04
5


We don't need any style or javascript for (1).

Next syle code might work for (2)

style="width:1px;word-wrap: break-word"

However, I like to know how I write like (3), (4).

Do you have any style for writing diagonally?
(the letter itself need slope, for example; 1 -> / )

[thox]

not what you want to hear:

images

[joonstar]

No, I want to hear from you.
Although your way is not the correct answer, I like to hear anything on the matter.


Yes, your're right. Normally we use image for that.

In my case image is not possible because the diagonal words are
data coming from user's input.

I have to make the diagonal words in text.

any other suggestions?

[giz]

Javascript code writing out CSS positioned HTML code.

Could be messy.

[Roy Sinclair]

SVG (Scalable Vector Graphics) - but it will probably require the SVG viewer from Abobe (free) or one of the few other viewers that are available. SVG is a W3C standard with wide industry participation so support for it should increase making this a solution that will carry into the future better than any other way you could possibly do this.

Here's (http://www.zvon.org/xxl/svgReference/Output/) a quick reference, you can see under the "text" tag how it can be set up to display at any angle or even to follow a specific path.

[joonstar]

quote;

"Javascript code writing out CSS positioned HTML code.
Could be messy"


I like to understand what means that?


If I understand correctly, It means;

"when we use any javascript code CSS positioned HTML code,
It could be bad."

I think many of web documents are using HTML, CSS, and javacript.

Those are all not good functionally?

I don't know what "writing out" exactly means(I am not a native speaker of English).


Anyway I don't understand what giz said.

I hope if giz see my doubt, he explain about it more in detail.

[ronaldb66]

I think he means that it's probably going to end up in a considerable amount of rather difficult code.
With "writing out" he probably means positioning every character of the desired text individually, similarly to the familiar "flying text" cursor trailers; I bet you can lend a good deal of code from one of those. The characters themselves won't be tilted, though; for that you can't avoid some sort of graphic approach; maybe small images for each individual character? Messy, indeed... :(

[joonstar]

http://www.ywd.cc/FLOWER.php


If you see the above, you will know what I want.

The words should be text because it is suppose to be written by users.

[ronaldb66]

Since I don't know anything about SVG, I'd say:
[list=1]
Have users input a text (what script type, how many characters?);
Decode individual characters to images representing tilted chars;
Position these images in accordance to the position in the original text and the desired slant.
[/list=1]
For 1, you can use a form in HTML and an onSubmit event handler for locally processing it, unless you decide to do the form handling and decoding server-side;
for 2, you'll either need javascript or some server side script, and a bunch of images depending on which characters you need;
for 3, javascript and CSS.

It can be done, but what you're asking isn't easy and will require a good deal of coding skills.

[brothercake]

If you don't mind that it only work in IE6 you can make diagonal text using Matrix Transform (http://msdn.microsoft.com/workshop/author/filter/reference/filters/matrix.asp)

[Roy Sinclair]

SVG is rather complex but what you want to do is a simple subset of the whole:

Install the Abode SVG Viewer (http://www.adobe.com/svg/viewer/install/main.html)

Save the following file as svgexample.svg


<svg width="400px" height="250px" viewBox="0 0 400 250">
<g transform="matrix(1 .577 0 1 15 15)">
<text x="0" y="0" style="font-size:20; font-family:Verdana; fill:green"> ABC (skewY) </text>
</g>
</svg>


Add this to a web page:

<object data="svgexample.svg" width="400" height="250" type="image/svg+xml"></object>

Then test the page. It's really not that difficult, SVG is done as text just like html in order to keep it simple to use.

[weronpc]

What you need is 2 loops

I don't know you know programming or not, ASP or PHP.

I like PHP much more so...


<?php
$rows = 5;

for ($x=0; $x < $rows; $x++)
{
$y=0;
while($y < $x)
{
echo "&nbsp;";
}
echo ($x+1)."<br />";
}
?>



$rows = 5; you can change the 5 to any number of rows you want to display

Hope this help, you can also do this with JavaScript too.

[joonstar]

(1) I am a beginner of PHP.
(2) I changed "$rows=5" into "$rows=1" because I need 1 row of diagonal text.
(3) "Robert" is the word that I expect diagonally typed.
(4) I put next php code in my test.php

--------------------------------------------------------------------
<?php
$rows = 1;

for ($x=0; $x < $rows; $x++)
{
$y=0;
while($y < $x)
{
echo "&nbsp;";
}
echo ($x+1)."<br />";
}
?>

Robert
-------------------------------------------------------------------

The result works very slow.
I think it seems a kind of unliminted circulation.
The php code needs "break" somewhere. I don't know where.

[joonstar]

As I test SVG, it works very well.
I think I have to test more on this.

However, It has two problems at the moment.


(P1) It make English words diagonal, but not my mother tongue words.
If I put my mother tongue words instead of English, It shows empty where the diagonal word should be positioned.

(P2) in order to view an SVG file, every users should agree on the terms condition of SVG, Adobe.
I can agree the terms, but I don't like to force my customers to agree.

Anyway, SVG is cool, and I need to test more on SVG.

[Roy Sinclair]

You can specify a language for SVG and it should be able to handle something other than it's default of English. If it doesn't do the trick for you now, at least you'll know it's available in the future and as I said, support for it will be increasing so it may become built into the commonly used browsers instead of an add-on. (There's a group working on it for Mozilla right now).

[joonstar]

I see.
Thanks for your introducing SVG.

By the way,
aren't there any ways for diagonal words in style?

[Roy Sinclair]

CSS only deals with the "normal" ways of expressing text.

[joonstar]

Next css works fine for vertical text.
------------------------------------------------------------------------------------
style="width:1px;word-wrap: break-word"
-----------------------------------------------------------------------------------

I don't think vertical text is normal ways of expressing.

World is wide.
Our thinking is wider than world.
There might be something we don't expect.


If CSS has no such code, Javascript is also OK.
Why not PHP code?
SVG can also be an alternative.

[brothercake]

Originally posted by joonstar
I don't think vertical text is normal ways of expressing.
There are many languages which write vertically - traditional chinese, for example. However no language in the world writes diagonally, and perhaps this is why CSS does not include parameters for it.

Diagonal text is not typography, it's graphic design, so SVG is a more natural choice for doing it.

[iceman]

don't know but maybe this will help you. sorry it's kind of a mess but think you'll get the idea.
good luck

<html>
<head>
<style>
.rel { position: relative;font-family:arial;font-weight:bold;color:blue; }
</style>
<script>
var ref = 0;
function angleText (what, dir, angle, space) {
angle = angle || 45;
angle = Math.PI/180 * angle;
space = space || 10;
degY = space * Math.tan(angle);
var txt = '';
txt += '<DIV ID="td' + ref + '"' + ' class="rel"' + '>';
if (dir) {
for (var r = 0; r < what.length; r++) {
txt += '<SPAN ID="td' + ref + r + '" class="rel" STYLE="left: ' + (r * space) + 'px; top: ' + (r * degY) + 'px;">';
txt += what.charAt(r);
txt += '</SPAN>';
}
}
else {
for (var r = 0; r < what.length; r++) {
txt += '<SPAN ID="td' + ref + r + '" class="rel" STYLE="left: ' + (r * space) + 'px; top: ' + ((what.length - r) * degY) + 'px;">';
txt += what.charAt(r);
txt += '</SPAN>';
}
}
txt += '<\/DIV>';
ref ++;
document.write(txt);
}
</script>

</head>
<body bgcolor=#ffffbo>

<script>
angleText('DHTML is really cool! First Line', true, 225, 5);
angleText('DHTML is really cool! Second Line', false, 225, 5);
</script>

<div id="test in div" style="position:absolute;top:250;left:100;background-color:yellow;width:430;height:220;">this one is inside a div<script>
angleText('DHTML is really cool! First Line', true, 225, 5);
angleText('DHTML is really cool! Second Line', false, 225, 5);
</script></div>

[joonstar]

It is the victory of DHTML!

We can control the angle of the each angle Text.
Great!


I have still two problems.

(1) The letter it self has no angle.

(2) The second line should be "!looc yllaer si LMTHD".


We read English paragraph from left to right.
We also read Oriental paragraph from left to right like English these days.
However, When we read it vertically or angled style, We read it from top to bottom!!!


Say my hello to firestar

[brothercake]

The CSS for rtl text is like this:

element { unicode-bidi: bidi-override; direction: rtl; }

which works in win/ie5+ and mozilla

[joonstar]

I tested your code, but nothing happens.

<table>
<tr>
<td style=unicode-bidi: bidi-override; direction: rtl;>nothing heppens</td>
</tr>
</table>

(Q1) What does "rtl" mean?
(Q2) How can I apply your code in HTML page?

[beetle]

To be done effectively, this needs something like PHP + GD|ImageMagick

[liorean]

rtl means right-to-left. It should work on a span. Table type of elements can sometimes not take some types of style rules.

[joonstar]

<span style=unicode-bidi: bidi-override; direction: rtl;> nothing heppens in span </span>

Neither happens in span tags.

[liorean]

You have to put quotes around the style - it contains spaces. Besides, it's best to always use them, since it removes most possible unclarities. And it's required in xml/xhtml.

Oh, and you need ie5+w or moz for it to work - if you try in other browsers it'll not work whatever you do.

[joonstar]

Sorry, I forgot the quotes around the style.

As I put the quotes around the style, it works well.
I think I have to mix liorean's code to iceman's code, and make a top-to-left angled words.