title: Meaning of position or offset in HTMLDocument text
body: <p>I'm trying to understand how positions/offsets work in <code>HTMLDocument</code>. Position/offset semantics are described <a href="https://docs.oracle.com/javase/7/docs/api/javax/swing/text/Document.html" rel="noreferrer">here</a>. My interpretation is that these are indices in the sequence of on-screen characters represented by the <code>HTMLDocument</code>.</p>
  
  <p>Consider the example HTML from <a href="https://docs.oracle.com/javase/7/docs/api/javax/swing/text/html/HTMLDocument.html" rel="noreferrer">the <code>HTMLDocument</code> documentation</a>:</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;html&gt;
     &lt;head&gt;
       &lt;title&gt;An example HTMLDocument&lt;/title&gt;
       &lt;style type="text/css"&gt;
         div { background-color: silver; }
         ul { color: red; }
       &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
       &lt;div id="BOX"&gt;
         &lt;p&gt;Paragraph 1&lt;/p&gt;
         &lt;p&gt;Paragraph 2&lt;/p&gt;
       &lt;/div&gt;
     &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>When I open this HTML in a browser, I only see "Paragraph 1" and "Paragraph 2" (and no leading spaces or newlines). So I would think that "Paragraph 1" starts at offset <code>0</code>.</p>
  
  <p>But consider the following code, where I print the text in the example HTML and the offset of the body:</p>
  
  <pre><code>import java.io.StringReader;
  import javax.swing.text.Element;
  import javax.swing.text.html.*;
  
  public class Test {
      public static void main(String[] args) throws Exception {
          String html = " &lt;html&gt;\n"
                      + "   &lt;head&gt;\n"
                      + "     &lt;title&gt;An example HTMLDocument&lt;/title&gt;\n"
                      + "     &lt;style type=\"text/css\"&gt;\n"
                      + "       div { background-color: silver; }\n"
                      + "       ul { color: red; }\n"
                      + "     &lt;/style&gt;\n"
                      + "   &lt;/head&gt;\n"
                      + "   &lt;body&gt;\n"
                      + "     &lt;div id=\"BOX\"&gt;\n"
                      + "       &lt;p&gt;Paragraph 1&lt;/p&gt;\n"
                      + "       &lt;p&gt;Paragraph 2&lt;/p&gt;\n"
                      + "     &lt;/div&gt;\n"
                      + "   &lt;/body&gt;\n"
                      + " &lt;/html&gt;\n";
  
          HTMLEditorKit htmlKit = new HTMLEditorKit();
          HTMLDocument doc = (HTMLDocument) htmlKit.createDefaultDocument();
          htmlKit.read(new StringReader(html), doc, 0);
  
          System.out.println("doc length: " + doc.getLength());
          String text = doc.getText(0, doc.getLength());
          System.out.println("doc text, surrounded by quotes, with newlines replaced with /: \""
                  + text.replace('\n', '/') + "\"");
  
          Element element = doc.getDefaultRootElement().getElement(1);
          System.out.println("element name: " + element.getName());
          int offset = element.getStartOffset();
          System.out.println("offset of body: " + offset);
      }
  }
  </code></pre>
  
  <p>Output:</p>
  
  <pre><code>doc length: 26
  doc text, surrounded by quotes, with newlines replaced with /: "  /Paragraph 1/Paragraph 2"
  element name: body
  offset of body: 3
  </code></pre>
  
  <p><strong>Basic questions:</strong> Why is "Paragraph 1" (the start of the body) at index <code>3</code>? Where do the first three characters (two spaces and a newline) of the text come from? Am I misinterpreting what "offset" means?</p>
  
  <p><strong>Challenge question:</strong> Given some HTML (simple enough to completely understand by inspection), how can I rigorously figure out the offsets of all DOM elements by hand?</p>
  
  <hr>
  
  <p>More info:</p>
  
  <p>If I remove the <code>style</code> tag from the HTML, I get the same result (body offset of <code>3</code>). If I also remove the <code>title</code>, I get a body offset of <code>1</code>. If I finally remove <code>head</code> entirely, I get a body offset of <code>0</code> (as expected). So apparently <code>style</code> contributes 0, <code>title</code> contributes 2, and <code>head</code> contributes 1 to the body's offset? What is the reasoning behind this?</p>
  
  <p>This also doesn't appear to be affected by whitespace in the HTML string.</p>