Loading ...
Sorry, an error occurred while loading the content.
 

Re: batik: disable text selection

Expand Messages
  • heldermagalhaes
    ... Yes, probably there are more than one way to accomplish this. For example, I made a sample (available below) where text selection is disabled by overlaying
    Message 1 of 3 , Jun 1, 2007
      > Is there a way to disable text selection?
      > - I want to use events, so 'pointer-events' cannot set to none
      > - I need the default mouse cursor over text elements

      Yes, probably there are more than one way to accomplish this. For
      example, I made a sample (available below) where text selection is
      disabled by overlaying text elements with invisible rectangles, which
      catch the pointer events and therefore disable the feature, while
      allowing the events to propagate to the SVG document root (uncomment
      the 'alert' to verify).

      Nevertheless I guess you should ask yourself if you really want to do
      that: text selection is seen as a good thing, although I admit text
      selection is currently faulty in most implementations, mixing up
      pointer events, catching events when not expected, etc.. I think
      disabling the feature can be a smart way to temporarily overcome these
      limitations while implementations don't catch up with developer/user
      needs.

      References:
      http://www.w3.org/TR/SVG11/text.html#TextSelection
      (although it's referred that «A text selection operation starts
      [...] no links or events have been assigned to the 'text' [element]»,
      any of the tested implementations seem to respect this)

      http://osdir.com/ml/web.svg/2004-11/msg00053.html
      (somehow old as the SVG 1.2 specification was redesigned and the
      link referred doesn't work, but the concept is there and will probably
      be in the standard some day)

      I provide a sample test describing the proposed behavior. Note that it
      works in Batik 100% but the dynamic text bounding box is unstable in
      ASV6 beta 1 (sometimes shows it, sometimes not - weirdly - that's why
      I didn't made the rectangle completely invisible in this case). Also,
      Renesis (and other SVG implementations) don't implement the bounding
      box feature (and it crashes eSVG) so use with care.

      If using the Yahoo! Groups Web interface to view this, it shows much
      better if fixed width font is used (right menu "Show Message Option",
      "Use Variable Width Font"):

      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <svg xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns="http://www.w3.org/2000/svg"
      contentScriptType="text/ecmascript" contentStyleType="text/css"
      version="1.2" baseProfile="tiny"
      width="800" height="600" viewBox="0 0 800 600"
      preserveAspectRatio="xMidYMid meet"
      onload="init(evt)" onmouseup="handler(evt)">

      <title>Text selection test</title>

      <script type="text/ecmascript"> <![CDATA[
      var svgNS = "http://www.w3.org/2000/svg";

      var init = function(evt){
      //fetch the text element
      var textEle = document.getElementById("dynamic-text");

      //compute its bouding box
      var theBB = textEle.getBBox();

      //create an invisible rectangle
      var bbox = document.createElementNS(svgNS, "rect");
      bbox.setAttributeNS(null, "x", theBB.x);
      bbox.setAttributeNS(null, "y", theBB.y);
      bbox.setAttributeNS(null, "width", theBB.width);
      bbox.setAttributeNS(null, "height", theBB.height);
      bbox.setAttributeNS(null, "fill", "black");
      bbox.setAttributeNS(null, "fill-opacity", "0.1");
      bbox.setAttributeNS(null, "stroke", "none");
      bbox.setAttributeNS(null, "stroke-width", "0");

      //insert into the document
      document.documentElement.appendChild(bbox);
      }

      var handler = function(evt){
      //uncomment to verify event propagation
      //alert("mouseup");
      }

      var nullHandler = function(evt){
      }
      ]]> </script>

      <text x="50" y="100" font-size="50">usual text pointer</text>
      <text x="50" y="200" font-size="50" style="cursor:default">default
      pointer</text>

      <!-- standard way to do it (although apparently I doesn't work) -->
      <text x="50" y="300" font-size="50"
      onclick="nullHandler(evt)">standard unselectable text</text>

      <text x="50" y="400" font-size="50">static unselectable text</text>
      <!-- an invisible rectangle covers text, disabling selection -->
      <rect x="50" y="350" width="550" height="50"
      fill="white" fill-opacity="0" stroke="none" stroke-width="0" />

      <text x="50" y="500" font-size="50" id="dynamic-text">dynamic
      unselectable text</text>

      </svg>
    • thomas.deweese@kodak.com
      Hi Istavan, ... When you construct the JSVGCanvas you can use the following constructor: /** * Creates a new JSVGCanvas. * * @param ua a SVGUserAgent instance
      Message 2 of 3 , Jun 2, 2007
        Hi Istavan,

        svg-developers@yahoogroups.com wrote on 05/31/2007 11:15:31 AM:

        > Is there a way to disable text selection?
        > - I want to use events, so 'pointer-events' cannot set to none
        > - I need the default mouse cursor over text elements

        When you construct the JSVGCanvas you can use the following
        constructor:

        /**
        * Creates a new JSVGCanvas.
        *
        * @param ua a SVGUserAgent instance or null.
        * @param eventsEnabled Whether the GVT tree should be reactive to
        mouse
        * and key events.
        * @param selectableText Whether the text should be selectable.
        */
        public JSVGCanvas(SVGUserAgent ua,
        boolean eventsEnabled,
        boolean selectableText)

        You can pass 'null' for the 'ua' and Batik will provide one
        (although the UserAgent allows for a lot of useful customization).

        BTW the batik-users mail-list will likely get you quicker
        answers on Batik specific questions like this.


        >
        > thanx
        > István

        >
      Your message has been successfully submitted and would be delivered to recipients shortly.