You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by William Huang <sh...@xperient.net> on 2003/01/06 22:20:55 UTC

How can I use line spacing with FlowText?

Dear Thomas,
 
I am using FlowText for better dynamically generated text support. I
have used FlowText to realize most of the functionalities I need. But I
can't figure out how to use the line spacing functionality. I tried to
set dy and line-spacing attributes for both flowSpan and flowPara, but
none of them works. Could you tell me how to realize this functionality?
Thanks a lot.
 
With best regards,
William

RE: widgets?

Posted by Grant Mc Auley <gm...@som.llu.edu>.
I am also interested in an Java/SVG interface.

These links are not exactly what you are looking for, but probably
interesting:

1) The SPARK project: http://www.schemasoft.org/

2) Corel (not open source):
http://www.corel.com/servlet/Satellite?pagename=Corel/Products/productIn
fo&id=1042152819585

3) The SVG rendering of the Java ServerFaces "Car Example" (demonstrated
at JavaOne).  I don't think this is on the web yet - very impressive. 

4) Luxor: http://luxor-xul.sourceforge.net/index.htm




> -----Original Message-----
> From: Denis Bohm [mailto:denis@fireflydesign.com] 
> Sent: Tuesday, August 12, 2003 9:04 PM
> To: Batik Users
> Subject: widgets?
> 
> 
> I'm creating some user interfaces in Java that use Batik for 
> their visual
> presentation.  Does anyone know of any open source projects 
> to provide a
> widget layer on top of Batik SVG?
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
> For additional commands, e-mail: batik-users-help@xml.apache.org
> 
> 


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


widgets?

Posted by Denis Bohm <de...@fireflydesign.com>.
I'm creating some user interfaces in Java that use Batik for their visual
presentation.  Does anyone know of any open source projects to provide a
widget layer on top of Batik SVG?


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


Question about window resizing

Posted by William Huang <sh...@xperient.net>.
If the window containing Batik SVG is resized, the SVG graphics will
also be resized. But there will be horizontal or vertical white band if
the x:y ratio of the resized window is different from the x:y defined in
the root element's viewBox attribute. How could I get the information
about the new resized window size in Javascript so that I could adjust
the viewBox attribute to make it consistent with the containing window
x:y? Or is there other better and feasible approach?

Best regards,
William  


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


RE: How can I implement line spacing?

Posted by Thomas E Deweese <th...@kodak.com>.
>>>>> "WH" == William Huang <sh...@xperient.net> writes:

WH> I have a problem with regard to displaying several scrollable
WH> content blocks in separate areas of a single window if the height
WH> and width of these dynamic blocks can't fit into. This question is
WH> similar to the question you answered on Wed, 31 Jul 2002 ("Re:
WH> Newbie Question JSVGComponent"). I think two possible approaches
WH> for my situation is number 1 and number 3.

WH> To use no. 1 approach, I can create multiple JSVGCanvas objects
WH> and put scroll functionality into these JSVGCanvas objects. The
WH> scrolling functionality should be easy to achieve. Since I want to
WH> keep these content blocks in a single SVG file although I also use
WH> xlink to display external SVG files as image elements on one of
WH> these areas, I prefer the no.3 approach.

WH> To use the no.3 approach, I need to use Javascript to make
WH> scrollpane/scrollbar for a content block if its size is larger
WH> than the restricted area size, then use mouse events for scrolling
WH> control. Could you tell me which approach is better for my
WH> question? And could you give me some suggestions about the
WH> Javascript implementation?

    It sounds to me like #1 is better. First off you should get better
performance scrolling in this case (for 'static' documents Batik's
JSVGCanvas does a bunch of caching of the final rendered content just
so scrolling/panning will be faster - on complex documents this can be
very important).  I think someone posted a scrolled implementation of
JSVGCanvas to the list (but it was a while ago).

    Doing #3 would require a fair amount of Java Script
code. Implementing usable scrollbars in javascript would probably be a
major pain.  I know there are some projects that are creating SVG
based widget sets but most of them are targeted at the Adobe Viewer
and I'm not sure Batik implements enough of the DOM for them to work.

    If you are going to try and do #3 you probably want to use an svg
element for the body of the scroll pane (as this automatically clips
to it's bounds), then have a g child that the scroll bars update the
transform on to scroll the document.

    Good luck!


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


RE: How can I implement line spacing?

Posted by William Huang <sh...@xperient.net>.
Dear Thomas,

Thank you very much for your so instructive and detailed guidance. Now I
have much better understanding with regards to these two issues.

With best regards,
William

-----Original Message-----
From: Thomas E Deweese [mailto:thomas.deweese@kodak.com] 
Sent: Wednesday, January 08, 2003 7:43 AM
To: Batik Users
Subject: RE: How can I implement line spacing?


Hi William,

>>>>> "WH" == William Huang <sh...@xperient.net> writes:

WH> How are you? Thank you very much for your guidance. Here I have
WH> two more questions to ask for your advice.

    Sure.

WH> 1. For line spacing, I found that there are some codes for
WH> CSS_LINE_HEIGHT_PROPERTY (line-height) in CSSEngine. Is there a
WH> way to use this property for line spacing functionality? If I need
WH> implement my own line spacing attribute, could you tell me which
WH> program I need to modify and how much the work may be? Is it
WH> possible that X-Smile have some ready for use code since it
WH> supports XHTML?

    I don't think X-Smile will be that useful since the tricky bits
are getting the line-height property to behave correctly with Batik's
CSS engine and Glyph Layout code (of course I say this with no
familiarity with XSmiles so I could be totally wrong).  I took at
Batik look and it appears that most of the needed functionality is
present already in the CSS Engine.  You will need to write a CSS Value
Manager to deal with the relative values (see
org.apache.batik.css.engine.value.svg.BaselineShiftManager).

    There is also an issue that currently the SVG spec says that
line-height is always the same as font-size.  Obviously we don't want
that here.  It appears that BaselineShift is the only value that is
relative to 'line-height' in SVG so you could either make that use
font-size directly (to stay conformant with SVG 1.0) or break the
hardcoded tie of font-size to line-height in the
org.apache.batik.css.engine.SVGCSSEngine:58,88 (I suspect this is the
route the SVG WG will go when FlowText is officially added).

    When this is done you should be able to get a correct value for
line-height from the CSS engine.  You will then need to add the
LINE_HEIGHT to the attributed string so it can be communicated to the
GlyphLayout class.  This should be done in
batik.extension.svg.SVGFlowTextElementBridge probably in the
getAttributeMap method.  You might want to look at
batik.bridge.TextUtilities and it's 'convertFontSize' method to get a
good idea of how to do this properly in Batik.

    Then finally in org.apache.batik.gvt.text.GlyphLayout there is
already a start at support for lineHeight. But you will need to add
some additional code here to get the lineHeight from the attributed
string as you go along (as any flowSpan may have a different
line-height).  This should be modeled on the font stuff already in the
batik.gvt.text.GlyphIterator class.

    You need to carefully read the description of line-height in the
CSS2 specification (section 10.8).  In particular note that
line-height means different things when specified on a block-level
element (flowPara, flowRegionBreak, flowDiv) then on a inline-level
element (flowSpan, flowLine).  Then there is the fairly complex
interplay between the various elements on a line.  

    As to how much work this is, it's hard for me to estimate it well
for you.  I know the code involved very well, and the relevant
specifications reasonably well and I would guess that it is probably
~20-30hr solid work for me say 1 week solid by the time I'm done
writing the tests.  I don't know how well you know Java, the relevant
specs (you could easily spend 2 days understanding the relevant bits
of CSS alone, and that assumes you have a basic understanding of fonts
and text layout).  I don't mean to scare you off with this, but you
have picked a fairly tricky bit of CSS, but when you were done you
will probably have a much better understanding of these elements
(which if you do a lot with text these days can be extremely useful).

WH> 2. For better 'perceived' performance, I also plan to preload
WH> classes using the Squiggle approach since I also observed the
WH> first SVG file loading introduced much more delay. Since my login
WH> page is a JSP page, I will use a background process to load a
WH> small SVG file when user login.  When user subsequently clicks on
WH> the SVG browser link, the class loading time will be reduced. Is
WH> this feasible? 

    Well reading your description it sounds to me like the preloading
will happen on the server not on the client (The JSP runs on the
server not the client).  What you really want to do is set up your
login page to have something like a hidden frame that contains the
applet so the applet is downloaded to the client at the start.  Then
once logged in you can make that frame the main frame or something
like this.  To be quite honest these sorts of tricks aren't my area of
expertise.  But I just want to make sure you aren't pre-loading Batik
on the server where it does no good.

WH> And is it possible for me to customize the browser JVM so that it
WH> can give my Applet more resources just as I use JVM options in
WH> standalone application to control Xms, Xmx and garbage collection
WH> behavior?

    There is a control panel for the plugin. Under the 'Advanced' pane
there is a JRE Runtime Parameters which I assume you could use to pass
Xms, Xmx to the JRE plugin.

WH> With best regards, William

    I hope this helps.  At least it should be pretty good
documentation of what needs to be done even if you decide not to do
it.

WH> -----Original Message----- From: Thomas E Deweese
WH> [mailto:thomas.deweese@kodak.com] Sent: Monday, January 06, 2003
WH> 4:34 PM To: Batik Users Subject: RE: How can I use line spacing
WH> with FlowText?

>>>>> "WH" == William Huang <sh...@xperient.net> writes:

WH> I am using FlowText for better dynamically generated text
WH> support. I have used FlowText to realize most of the
WH> functionalities I need. But I can't figure out how to use the line
WH> spacing functionality. I tried to set dy and line-spacing
WH> attributes for both flowSpan and flowPara, but none of them
WH> works. Could you tell me how to realize this functionality?

WH> Sorry about the mistake I made in my last email. The css attribute
WH> I tried is line-height instead of line-spacing.

WH>     Sorry, but this functionality isn't current implemented.  As I
WH> recall doing this properly was fairly complex due to the way that
WH> CSS handles computed values etc.  I considered putting in a hack
WH> that didn't use CSS (so no cascading) just make it an attribute
WH> but I never did as it wasn't clear that this was particularly
WH> useful.


WH>
---------------------------------------------------------------------
WH> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org For
WH> additional commands, e-mail: batik-users-help@xml.apache.org



WH>
---------------------------------------------------------------------
WH> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org For
WH> additional commands, e-mail: batik-users-help@xml.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


RE: How can I implement line spacing?

Posted by William Huang <sh...@xperient.net>.
Dear Thomas,

I have a problem with regard to displaying several scrollable content
blocks in separate areas of a single window if the height and width of
these dynamic blocks can't fit into. This question is similar to the
question you answered on Wed, 31 Jul 2002 ("Re: Newbie Question
JSVGComponent"). I think two possible approaches for my situation is
number 1 and number 3. 

To use no. 1 approach, I can create multiple JSVGCanvas objects and put
scroll functionality into these JSVGCanvas objects. The scrolling
functionality should be easy to achieve. Since I want to keep these
content blocks in a single SVG file although I also use xlink to display
external SVG files as image elements on one of these areas, I prefer the
no.3 approach.

To use the no.3 approach, I need to use Javascript to make
scrollpane/scrollbar for a content block if its size is larger than the
restricted area size, then use mouse events for scrolling control. Could
you tell me which approach is better for my question? And could you give
me some suggestions about the Javascript implementation?

With best regards,
William 


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


RE: How can I implement line spacing?

Posted by Thomas E Deweese <th...@kodak.com>.
Hi William,

>>>>> "WH" == William Huang <sh...@xperient.net> writes:

WH> How are you? Thank you very much for your guidance. Here I have
WH> two more questions to ask for your advice.

    Sure.

WH> 1. For line spacing, I found that there are some codes for
WH> CSS_LINE_HEIGHT_PROPERTY (line-height) in CSSEngine. Is there a
WH> way to use this property for line spacing functionality? If I need
WH> implement my own line spacing attribute, could you tell me which
WH> program I need to modify and how much the work may be? Is it
WH> possible that X-Smile have some ready for use code since it
WH> supports XHTML?

    I don't think X-Smile will be that useful since the tricky bits
are getting the line-height property to behave correctly with Batik's
CSS engine and Glyph Layout code (of course I say this with no
familiarity with XSmiles so I could be totally wrong).  I took at
Batik look and it appears that most of the needed functionality is
present already in the CSS Engine.  You will need to write a CSS Value
Manager to deal with the relative values (see
org.apache.batik.css.engine.value.svg.BaselineShiftManager).

    There is also an issue that currently the SVG spec says that
line-height is always the same as font-size.  Obviously we don't want
that here.  It appears that BaselineShift is the only value that is
relative to 'line-height' in SVG so you could either make that use
font-size directly (to stay conformant with SVG 1.0) or break the
hardcoded tie of font-size to line-height in the
org.apache.batik.css.engine.SVGCSSEngine:58,88 (I suspect this is the
route the SVG WG will go when FlowText is officially added).

    When this is done you should be able to get a correct value for
line-height from the CSS engine.  You will then need to add the
LINE_HEIGHT to the attributed string so it can be communicated to the
GlyphLayout class.  This should be done in
batik.extension.svg.SVGFlowTextElementBridge probably in the
getAttributeMap method.  You might want to look at
batik.bridge.TextUtilities and it's 'convertFontSize' method to get a
good idea of how to do this properly in Batik.

    Then finally in org.apache.batik.gvt.text.GlyphLayout there is
already a start at support for lineHeight. But you will need to add
some additional code here to get the lineHeight from the attributed
string as you go along (as any flowSpan may have a different
line-height).  This should be modeled on the font stuff already in the
batik.gvt.text.GlyphIterator class.

    You need to carefully read the description of line-height in the
CSS2 specification (section 10.8).  In particular note that
line-height means different things when specified on a block-level
element (flowPara, flowRegionBreak, flowDiv) then on a inline-level
element (flowSpan, flowLine).  Then there is the fairly complex
interplay between the various elements on a line.  

    As to how much work this is, it's hard for me to estimate it well
for you.  I know the code involved very well, and the relevant
specifications reasonably well and I would guess that it is probably
~20-30hr solid work for me say 1 week solid by the time I'm done
writing the tests.  I don't know how well you know Java, the relevant
specs (you could easily spend 2 days understanding the relevant bits
of CSS alone, and that assumes you have a basic understanding of fonts
and text layout).  I don't mean to scare you off with this, but you
have picked a fairly tricky bit of CSS, but when you were done you
will probably have a much better understanding of these elements
(which if you do a lot with text these days can be extremely useful).

WH> 2. For better 'perceived' performance, I also plan to preload
WH> classes using the Squiggle approach since I also observed the
WH> first SVG file loading introduced much more delay. Since my login
WH> page is a JSP page, I will use a background process to load a
WH> small SVG file when user login.  When user subsequently clicks on
WH> the SVG browser link, the class loading time will be reduced. Is
WH> this feasible? 

    Well reading your description it sounds to me like the preloading
will happen on the server not on the client (The JSP runs on the
server not the client).  What you really want to do is set up your
login page to have something like a hidden frame that contains the
applet so the applet is downloaded to the client at the start.  Then
once logged in you can make that frame the main frame or something
like this.  To be quite honest these sorts of tricks aren't my area of
expertise.  But I just want to make sure you aren't pre-loading Batik
on the server where it does no good.

WH> And is it possible for me to customize the browser JVM so that it
WH> can give my Applet more resources just as I use JVM options in
WH> standalone application to control Xms, Xmx and garbage collection
WH> behavior?

    There is a control panel for the plugin. Under the 'Advanced' pane
there is a JRE Runtime Parameters which I assume you could use to pass
Xms, Xmx to the JRE plugin.

WH> With best regards, William

    I hope this helps.  At least it should be pretty good
documentation of what needs to be done even if you decide not to do
it.

WH> -----Original Message----- From: Thomas E Deweese
WH> [mailto:thomas.deweese@kodak.com] Sent: Monday, January 06, 2003
WH> 4:34 PM To: Batik Users Subject: RE: How can I use line spacing
WH> with FlowText?

>>>>> "WH" == William Huang <sh...@xperient.net> writes:

WH> I am using FlowText for better dynamically generated text
WH> support. I have used FlowText to realize most of the
WH> functionalities I need. But I can't figure out how to use the line
WH> spacing functionality. I tried to set dy and line-spacing
WH> attributes for both flowSpan and flowPara, but none of them
WH> works. Could you tell me how to realize this functionality?

WH> Sorry about the mistake I made in my last email. The css attribute
WH> I tried is line-height instead of line-spacing.

WH>     Sorry, but this functionality isn't current implemented.  As I
WH> recall doing this properly was fairly complex due to the way that
WH> CSS handles computed values etc.  I considered putting in a hack
WH> that didn't use CSS (so no cascading) just make it an attribute
WH> but I never did as it wasn't clear that this was particularly
WH> useful.


WH> ---------------------------------------------------------------------
WH> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org For
WH> additional commands, e-mail: batik-users-help@xml.apache.org



WH> ---------------------------------------------------------------------
WH> To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org For
WH> additional commands, e-mail: batik-users-help@xml.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


How can I implement line spacing?

Posted by William Huang <sh...@xperient.net>.
Dear Thomas,

How are you? Thank you very much for your guidance. Here I have two more
questions to ask for your advice.

1. For line spacing, I found that there are some codes for
CSS_LINE_HEIGHT_PROPERTY (line-height) in CSSEngine. Is there a way to
use this property for line spacing functionality? If I need implement my
own line spacing attribute, could you tell me which program I need to
modify and how much the work may be? Is it possible that X-Smile have
some ready for use code since it supports XHTML?

2. For better 'perceived' performance, I also plan to preload classes
using the Squiggle approach since I also observed the first SVG file
loading introduced much more delay. Since my login page is a JSP page, I
will use a background process to load a small SVG file when user login.
When user subsequently clicks on the SVG browser link, the class loading
time will be reduced. Is this feasible? And is it possible for me to
customize the browser JVM so that it can give my Applet more resources
just as I use JVM options in standalone application to control Xms, Xmx
and garbage collection behavior?       

With best regards,
William



-----Original Message-----
From: Thomas E Deweese [mailto:thomas.deweese@kodak.com] 
Sent: Monday, January 06, 2003 4:34 PM
To: Batik Users
Subject: RE: How can I use line spacing with FlowText?

>>>>> "WH" == William Huang <sh...@xperient.net> writes:

WH> I am using FlowText for better dynamically generated text
WH> support. I have used FlowText to realize most of the
WH> functionalities I need. But I can't figure out how to use the line
WH> spacing functionality. I tried to set dy and line-spacing
WH> attributes for both flowSpan and flowPara, but none of them
WH> works. Could you tell me how to realize this functionality?

WH> Sorry about the mistake I made in my last email. The css attribute
WH> I tried is line-height instead of line-spacing.

    Sorry, but this functionality isn't current implemented.  As I
recall doing this properly was fairly complex due to the way that CSS
handles computed values etc.  I considered putting in a hack that
didn't use CSS (so no cascading) just make it an attribute but I never
did as it wasn't clear that this was particularly useful.


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


RE: How can I use line spacing with FlowText?

Posted by William Huang <sh...@xperient.net>.
I am trying to use switch element for tabpane functionality. That is, to
dynamically switch the displayed elements using a variable other than
systemLanguage, requireExtensions, and requiredFeatures. I made a new
attribute contant SWITCH_ATTRIBUTE and modified the
SVGSwitchElementBridge. The static display is fine. But it does not in
the dynamic way. When I modified the DOM tree in Javascript (modify
SWITCH_ATTRIBUTE), the Switch element won't refresh and display another
element. 

I modified SVGSwitchElementBridge to extend SVGShapeElementBridge and
added the following methods:

    protected void buildShape(BridgeContext ctx,
                              Element e,
                              ShapeNode shapeNode) {
        ShapeNode showNode = (ShapeNode) createGraphicsNode(ctx, e);
        shapeNode.setShape(showNode.getShape());
    }

    /**
     * Invoked when an MutationEvent of type 'DOMAttrModified' is fired.
     */
    public void handleDOMAttrModifiedEvent(MutationEvent evt) {
        String attrName = evt.getAttrName();
        System.out.println("SVGSwitchElementBridge: event"+evt+"
"+attrName);
        buildShape(ctx,e, (ShapeNode) node);
        handleGeometryChanged();
    }      

But the content still won't be refreshed. It didn't print out the
message so the handleDomAttrModifiedEvent is not called. I found
handleDOMNodeInsertedEvent and other events are also not called. How
could I let the JavaScript event trigger DOM tree update, then refresh
display? Thanks a lot.

With best regards,
William  




---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org


RE: How can I use line spacing with FlowText?

Posted by Thomas E Deweese <th...@kodak.com>.
>>>>> "WH" == William Huang <sh...@xperient.net> writes:

WH> I am using FlowText for better dynamically generated text
WH> support. I have used FlowText to realize most of the
WH> functionalities I need. But I can't figure out how to use the line
WH> spacing functionality. I tried to set dy and line-spacing
WH> attributes for both flowSpan and flowPara, but none of them
WH> works. Could you tell me how to realize this functionality?

WH> Sorry about the mistake I made in my last email. The css attribute
WH> I tried is line-height instead of line-spacing.

    Sorry, but this functionality isn't current implemented.  As I
recall doing this properly was fairly complex due to the way that CSS
handles computed values etc.  I considered putting in a hack that
didn't use CSS (so no cascading) just make it an attribute but I never
did as it wasn't clear that this was particularly useful.


---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xml.apache.org
For additional commands, e-mail: batik-users-help@xml.apache.org