Patent Publication Number: US-2018052843-A1

Title: Extracting a portion of a document, such as a web page

Description:
TECHNICAL FIELD 
     The described technology is directed to the field of tools for interacting with electronic documents. 
     BACKGROUND 
     A web browser is en application for displaying documents, such as web pages represented in HTML. Such web pages can Include a wide variety of content, different portions of which are of interest to different users. 
     A few different conventional approaches are available to a user who wishes to retain a portion of a web page that is of interest to the user. For example, the user can issue a save command to the browser, which causes the browser to persistently store a complete copy of the web page, including all of its HTML source, as well as associated resources of various types. As another example, the user can use a bookmarking function of the browser to save in a bookmark the URL that was used to retrieve the web page. Additionally, the user can use a clipboard provided by the operating system to select the portion of the web page of interest within the browsers; copy that portion to the clipboard; paste the portion from the clipboard into a word processing document; and save the word processing document. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         FIG. 1  is a block diagram showing some of the components typically incorporated in at least some of the computer systems and other devices on which the facility operates. 
         FIG. 2  is a block diagram showing some of the components typically incorporated in at feast some of the computer systems and other devices on which the facility executes. 
         FIG. 3  is a flow diagram showing steps performed by the facility to install itself on a client computer system in some embodiments. 
         FIG. 4  is a display diagram showing the browser&#39;s display of the sample web page. 
         FIG. 5  is a data structure diagram showing the DOM constructed by the browser for the sample page. 
         FIG. 6  is a flow diagram that shows steps performed by the facility when it is enable for a page in some embodiments. 
         FIG. 7  is a display diagram showing a display presented by the facility in which b selected node is highlighted. 
         FIG. 8  is a flow diagram showing steps performed by the facility in order to extract a portion of a web page corresponding to a subtree defined by a selected node. 
         FIG. 9  is a flow diagram showing steps performed by the facility as part of the extract function for extracting a simple node of a webpage portion being extracted. 
         FIG. 10  is a data structure diagram shelling a partially-constructed version of the portion copy subtree generated by the facility. 
         FIG. 11  is a data structure diagram showing the DOM when it contains a complete portion copy subtree. 
         FIG. 12  is a data structure diagram showing sample contents of a portion table maintained by the facility in some embodiments, 
         FIG. 13  is a flow diagram steps performed by the facility in order to respond to a request for a user&#39;s portion destination page showing ail of the portions extracted by the user from different web pages. 
         FIG. 14  is a flow diagram showing alternate steps performed by the facility in order to respond to a request for a user&#39;s portion destination page. 
         FIG. 15  is a display diagram showing a sample display presented by the facility containing the portion destination page for the user. 
         FIG. 18  is a flow diagram showing steps typically performed by the facility In order to provide portion extraction using an explicit portion extraction control. 
         FIG. 17  is a display diagram showing a sample display presented by the facility including a page containing a portion extraction control. 
         FIG. 18  is a display diagram showing a sample display presented by the facility when the user uses the mouse cursor to hover over the extraction control. 
         FIG. 19  is a display diagram showing a sample display presented by the facility in response to the user activating the extraction control. 
         FIG. 20  is a display diagram showing a sample display presented by the facility after the user has used the extraction control to extract a portion of the page. 
         FIG. 21  is a display diagram showing a sample display presented by the facility including a portion destination page containing the extracted portion. 
         FIG. 22  is a display diagram showing a sample display presented by the facility in order to enable the user performing an extraction to create a new account with the extraction service with which the extracted portion wilt be associated. 
         FIG. 23  is a display diagram showing a sample display presented by the facility after establishing a permalink for a portion extraction. 
         FIG. 24  is a display diagram showing a sample display presented by the facility when a portion permalink is dereferenced. 
     
    
    
     DETAILED DESCRIPTION 
     The inventor has recognized significant disadvantages in conventional approaches to retaining a portion of a web page. For example, the conventional approach involving causing the browser to save the web page has the disadvantages that portions of the page not of interest to tie user are retained along with the portion of interest; the files produced by the browser save operation can be large and unwieldy; and the retained portion cannot be easily associated with retained portions of other pages. The conventional approach Involving creating a bookmark containing the page&#39;s URL fails to identify the portion of the page that was of interest to the user; and is vulnerable to the removal of the page, a change in the URL with which it can be retrieved, or its alteration to remove, relocate, or alter the portion of interest. The conventional approach involving using the clipboard to copy the portion of interest to a word processing document has the disadvantages that the portion may not look or behave in the same ways that it does in the web page. 
     In order to overcome these disadvantages of conventional approaches, the inventor has invented a software and/or hardware facility for extracting a portion of a document such as a web page represented in HTML or another tag language. The document from which the facility extracts a portion is referred to herein as “the page,” irrespective of this document&#39;s type. 
     In some embodiments, the facility makes use of executable code within the page, such as javascript code. In some embodiments, this code is included as a native part of the page; in some embodiments, the code is injected into the page, such as after retrieval by a bookmarklet or a toolbar. 
     In some embodiments, the facility adds to the page a user interface that enables the user to select a portion of the page, such as by selecting within a hierarchical representation of the page such as a Document Object Model (“DOM”) structure one or more nodes of the hierarchy each defining a subtree of the nodes of the hierarchy. In some embodiments, as part of the selection of the portion of the page, the user interface displays a visual indication of the portion, such as a rectangle surrounding the portion. 
     In some embodiments, the facility enables the publisher of a page to easily add to the page a clipping button that, when clicked by the user when viewing the page, causes a portion of the web page designated by the publisher to be extracted and stored on behalf of the user, so that the user can later view the copy with full fidelity and interact with the copy in a manner similar to interacting with the original portion of the web page. In order to do so, the publisher adds two items to the page; an inclusion reference for the code, and a DOM element for the button that identifies to the code the identifier of the element of the page that is to be extractable using the button, or identifiers of a pair of elements of the page defining a range of elements of the page that is to be extractable using the button. In some embodiments, when the user hovers over the clipping button added to the page, the identified element glows. In some embodiments, when the user clicks the button, the code triggers an animation by which the identified element appears to be lifted out of the page into an extraction preview window. In the extraction preview window, the user can specify whether to proceed with the extraction, and whether to annotate, tag, and/or address the extracted portion to another user. In response, if the user already has an extraction account, the identified element of the webpages is extracted so as to be accessible from the user&#39;s account. In various embodiments, if the user does not already have an extraction account, the user may (a) register for an extraction account, (b) extract the item to a new, anonymous extraction account that can later be registered, or (c) perform a single action with respect to the extracted portion that does not involve any extraction account, such as obtaining a permanent link for the extracted portion that is not tied to an account, e-mailing the extracted portion, etc. 
     In some embodiments, when the portion has been selected, the facility constructs a copy of the portion that is local to the page. In particular, the facility at least partially copies each of the selected nodes of the page and its descendants to descend from a “reset” node added to the page by the facility. In general, a node of the page can have particular values for style attributes either by virtue of these attributes being explicitly specified for the node in the source for the page (“inline attributes”), and/or by inheriting these attributes from ancestor nodes in the page hierarchy (“inherited attributes”), and/or by being specified via a CSS selector, which is effectively a pattern that can match on an element&#39;s type, id, class, or context. When there are multiple style rules that could be applied to an element that are in conflict, the general approach to resolving the conflict is to apply the most specific specification. Thus, CSS selectors trump inherited attributes, more specific CSS selectors (like an id) trump generic selector (like a class name or type name), and inline CSS trumps everything. The reset node specifies a stylesheet, such as a CSS stylesheet that (1) cuts off inheritance of style attribute values from ancestors of the resent node to descendants of the reset node, and (2) establishes, for inheritance by descendants of the reset node, a standard set of style attribute values. When the facility copies the selected nodes and the nodes that descend from them into the local copy, the facility initially copies only a limited subset of the inline attributes along with the copied node, in some cases none. As part of or after performing this copy operation, the facility performs a parallel root-to-leaves traversal of each selected subtree and the corresponding subtree in the local copy. For each pair of nodes visited in these traversals (one in the selected subtree and one in the local copy), the facility queries the browser for the computed attribute values of the node. The computed attribute values of a node are those used by the browser in rendering that node within the rendered version of the page, determined by first determining the set of attribute values the node inherits from its ancestors, then overriding these in any ways specified by the node&#39;s inline attributes. For each computed attribute value of the node of the pair in the selected subtree that differs from the computed value of the same attribute of the node of the pair in the local copy, the facility establishes an inline attribute for the node of the pair in the local copy that specifies the computed attribute value of the node of the pair in the selected subtree. Accordingly, the local copy ends up with all of the nodes of the selected subtree(s), with the same computed attribute values in each node of the copy, and with an inline attribute in a node of the copy only where the computed value of the corresponding node of the selected subtree differs from the value of the same attribute Inherited by the node of the copy form the reset node and the node&#39;s ancestors in the copied subtree. 
     After the local copy is generated, the facility exports the local copy to a location outside the page. For example, in various embodiments, the facility appends tag language source representing the local copy to a destination page of page portions extracted by the same user, or adds tag language source representing the local copy to a table of page portions all extracted by the same user that may be used to dynamically generate a destination page of page portions extracted by the same user. In some embodiments, as part of exporting the copy, the facility applies one or more compression techniques, in some embodiments including a compression technique specifically adapted to the tag language. 
     When the facility includes an exported portion copy in the destination page, it both (1) reverses any applied compression techniques to recover the uncompressed tag language representation of the portion copy, and (2) establishes the portion copy as the child(ren) of a reset node in the destination page. In the rendered destination page, the portion copy typically appears in a manner that is largely or completely visually identical to the portion as selected in its original page, including parts of the portion corresponding to each native and external resources. Controls in the portion copy typically operate in the same way they do in the portion as selected in its original page. 
     In some embodiments, the destination page generated by the facility includes controls for sorting and/or subsetting the page portions extracted by the same user, such as based on date, category, tags, domain, etc. 
     By operating in some or all of the ways described above, the facility extracts a high-fidelity, similarly-behaving copy of a page portion having relatively modest storage requirements for future enjoyment of a user. 
       FIG. 1  is a high-level data flow diagram showing data flow within a typical arrangement of components used to provide the facility. A web client computer system  110  that is under user control generates and sends a request for a facility code injector to a portion extraction server computer system via a network such as the Internet  120 , such as with a browser program  111  having browser  112 . A web server program  131  on the portion extraction server computer system receives the request and replies with the facility code injector  132 , which is in some embodiments a bookmarklet for injecting client code for the facility into web pages to enable portion extraction from them. The received facility code injector is installed ( 115 ) in connection with the browser  111  on the client computer system. The client computer system then generates and sends a content request to a content server  140 , such as a browser page request. The content server typically replies to each request with served content, such as with a web server program  141 . 
     When the client computer system receives the response to its content request containing the HTML source for a web page, it is stored ( 113 ) by the browser, which parses the page source in order to construct the document object model data structure (“DOM”)  114  that the browser uses to display this web page. While the web page is displayed in the browser, the user can activate the facility code injector to inject into the page facility code for selecting and extracting a portion of the page. The user can then use the facility to select and extract a portion of the page. The extracted version of this portion is stored in a portion table  135  in the portion extraction server computer system. The user can subsequently request a destination page from the portion extraction server computer system. When this happens, a page generation engine  133  on the portion extraction server computer system uses a destination page template to retrieve web page portions extracted by the user from the portion table and incorporate them in a destination page generated by the portion extraction server computer system and return to the client computer system in response to the request, where the generated destination page containing the web page portions extracted by the user can be displayed and interacted with in the browser. 
     While various embodiments are described in terms of the environment described above, those skilled In the art will appreciate that the facility may be implemented in a variety of other environments including a single, monolithic computer system, as well as various other combinations of computer systems or similar devices connected in various ways. 
       FIG. 2  is a block diagram showing some of the components typically incorporated in at least some of the computer systems and other devices on which the facility executes. In various embodiments, these computer systems and other devices  200  can include server computer systems, desktop computer systems, laptop computer systems, tablets, netbooks, mobile phones, personal digital assistants, televisions, digital video recorders, set top boxes, cameras, automobile computers, electronic media players, etc. In various embodiments, these computer systems and devices  200  may include one or more central processing units (“CPUs”)  201  for executing computer programs; a computer memory  202  for storing programs and data while they are being used, including the facility and associated data; a persistent storage device  203 , such as a hard drive for persistently storing programs and data: a computer-readable media drive  204 , such as a floppy, CD-ROM, or DVD drive, for reading programs and data stored on a computer-readable medium: and a network connection  205  for connecting the computer system to other computer systems, such as via the Internet or another data transmission network and its networking hardware, such as switches, routers, repeaters, electrical cables and optical fibers, light emitters and receivers, radio transmitters and receivers, and the like, so that data signals such as data signals conveying data structures, programs, and unstructured data may be sent between such computer systems. While computer systems configured as described above are typically used to support the operation of the facility, those skilled in the art will appreciate that the facility may be implemented using devices of various types and configurations, and having various components. 
       FIG. 3  is a flow diagram showing steps performed by the facility to install itself on a client computer system in some embodiments. In step  301 , the client computer system sends to the portion extraction server a request for the facility&#39;s code injector. In step  302 , the portion extraction server sends this code injector to the client. When the facility code injector is received by the client, the client installs the facility code injector, such as by installing a bookmarklet in one or more browsers installed on the client. After step  303 , these steps conclude. 
     Those skilled in the art will appreciate that the steps shown in  FIG. 3  and in each of the other flow diagrams discussed herein may be altered in a variety of ways. For example, the order of the steps may be rearranged; some steps may be performed in parallel; shown steps may be omitted, or other steps may be included; a shown step may be divided into substeps, or multiple shown steps may be combined into a single step, etc. 
     An example in which a user retrieves a web page and uses the facility to extract a portion from it follows. In the example, the user retrieves the web page by typing its URL, “http://example.com/”, into the URL field of the browser. In response, the facility retrieves the HTML source for the sample web page shown below in Table A from a publisher server computer system. 
     
       
         
           
               
               
             
               
                 TABLE A 
               
               
                   
               
             
            
               
                  1 
                 &lt;!doctype html&gt; 
               
               
                  2 
                 &lt;html&gt; 
               
            
           
           
               
               
            
               
                  3 
                 &lt;head&gt; 
               
            
           
           
               
               
            
               
                  4 
                 &lt;title&gt;Clipping Example&lt;/title&gt; 
               
               
                  5 
                 &lt;style&gt; 
               
            
           
           
               
               
            
               
                  6 
                 body { 
               
            
           
           
               
               
            
               
                  7 
                 margin:20px 100px; 
               
               
                  8 
                 font-family: arial; 
               
            
           
           
               
               
            
               
                  9 
                 } 
               
               
                 10 
                 .framed { 
               
            
           
           
               
               
            
               
                 11 
                 border: 1px solid red; 
               
               
                 12 
                 padding:10px; 
               
            
           
           
               
               
            
               
                 13 
                 } 
               
               
                 14 
                 .framed span { 
               
            
           
           
               
               
            
               
                 15 
                 font-style:italic; 
               
            
           
           
               
               
            
               
                 16 
                 } 
               
            
           
           
               
               
            
               
                 17 
                 &lt;/style&gt; 
               
            
           
           
               
               
            
               
                 18 
                 &lt;/head&gt; 
               
               
                 19 
                 &lt;body&gt; 
               
            
           
           
               
            
               
                 20 
               
            
           
           
               
               
            
               
                 21 
                 &lt;p&gt;very first paragraph.&lt;/p&gt; 
               
            
           
           
               
            
               
                 22 
               
            
           
           
               
               
            
               
                 23 
                 &lt;p class=“framed”&gt; 
               
            
           
           
               
               
            
               
                 24 
                 This is a paragraph of text that has the “framed” class 
               
               
                 25 
                 set to it. &lt;span style=“font-weight:normal;”&gt;This is 
               
               
                 26 
                 a span that is styled through a CSS selector rule. It has 
               
               
                 27 
                 a &lt;a href=“link”&gt;link&lt;/a&gt; inside of it.&lt;/span&gt; This 
               
               
                 28 
                 is the last sentence, which has a standard &lt;b&gt;bold&lt;/b&gt; 
               
               
                   
                 in it word. 
               
            
           
           
               
               
            
               
                 29 
                 &lt;/p&gt; 
               
            
           
           
               
            
               
                 30 
               
            
           
           
               
               
            
               
                 31 
                 &lt;p&gt;very last paragraph. &lt;/p&gt; 
               
            
           
           
               
               
            
               
                 32 
                 &lt;/body&gt; 
               
            
           
           
               
               
            
               
                 33 
                 &lt;/html&gt; 
               
               
                   
               
            
           
         
       
     
       FIG. 4  is a display diagram showing the browser&#39;s display of the sample web page. The display includes a browser window  400  made up of a browser control area  410  containing browser controls and a browser client area  420  containing a rendered version of the sample web page. It can be seen that the browser control area includes a URL field  411  containing the URL of the sample web page and a button  412  for enabling the facility with respect to the page, such as by launching a bookmarklet associated with the facility to inject code for the facility into the page. If can also be seen that the rendered sample web page shown in the client area  420  contains three paragraphs,  421 ,  422 , and  423 , and that the second paragraph  422  is surrounded by a border  431 . By comparing the rendered web page to the HTML source for the web page in Table A, it can be seen that paragraph  421  corresponds to the &lt;p&gt; node in line  21 ; paragraph  422  corresponds to the &lt;p&gt; node in lines  23 - 29 ; and paragraph  423  corresponds to the &lt;p&gt; node in line  31 . 
       FIG. 5  is a data structure diagram showing the DOM constructed by the browser for the sample page. The roof of the DOM is an HTML node  501  corresponding to the &lt;html&gt; tag in lines  2 - 33  of the source. The head node  511  is a child of the HTML node  501 , and corresponds to the &lt;head&gt; tag in lines  3 - 18 , which contains the title of the page in a &lt;title&gt; tag on line  4 , and styles used in the page in a &lt;style&gt; tag on lines  5 - 17 . The descendents of head node  511  are not shown in  FIG. 5 . The HTML node  501  has a second child node, body node  512 , corresponding to the &lt;body&gt; tag in lines  19 - 32 . The body node  512  has three child nodes, piece base nodes  531 ,  532  and  533 , corresponding to the &lt;p&gt; tags on line  21 , lines  23 - 29 , and line  31 , respectively. P node  632  has the following children: a text node  542  corresponding to the text on lines  24 - 25 ; a span node  543  corresponding to the &lt;span&gt; tag on lines  25 - 27 ; a text node  544  corresponding to the text on lines  25 - 27 ; a b node  545  corresponding to the &lt;b&gt; tag on line  28 ; and a text node  546  corresponding to the text on fine  28  after the &lt;b&gt; tag. The span node  543  has the following children: a text node  571  corresponding to the text on line  24  and line  25  before the &lt;span&gt; tag; an a node  572  corresponding to the &lt;a&gt; tag on line  27 ; and a text node  573  corresponding to the text on line  27  after the &lt;span&gt; tag in line  28  before the &lt;b&gt; tag. Node  545  has a single child, text node  574  corresponding to the text inside the &lt;b&gt; tag on line  28 . 
     Returning to  FIG. 4 , with the sample page displayed, the user selects button  412  to enable the facility with respect to the page, such as by injecting code for the facility into the page. 
       FIG. 8  is a flow diagram that shows steps performed by the facility when it is enabled for a page in some embodiments. In step  601 , the facility generates a list of nodes in the page, such as by traversing the DOM generated for the page by the browser, or performing queries against the DOM. In some embodiments, the facility uses a jQuery javascript library available from jquery.com to query, traverse, augment, and manipulate the DOM. In step  602 , the facility removes from the list of nodes generated in step  601  any node that is ineligible to be selected for extraction. In various embodiments, the facility uses various tests in order to identify nodes ineligible for selection, including one or more of the following: its value for the visibility attribute is hidden; it has no text of its own, and is not the ancestor of a text or image node; if has a display area that is larger than the viewport of the page or smaller than a minimum area, such as 10,000 pixels; or if has no sibling nodes, i.e., it is the only child of its parent. In step  803 , for each node in the list, the facility calculates the coordinates at which its top left corner is displayed, and its width and height. In step  604 , the facility obtains the current, scrolling-adjusted coordinates of the mouse pointer. In step  605 , the facility removes from the list any nodes that are not beneath the scrolling-adjusted mouse pointer coordinates obtained in step  604 . In step  806 , the facility selects the node on the list having the smallest area. In step  807 , the facility highlights the selected node and displays a floating toolbar for the facility. 
       FIG. 7  is a display diagram showing a display presented by the facility in some embodiments in which a selected node is highlighted. If can be seen that, in the client area  720  in which the rendered version of the page is displayed, the user has positioned the mouse pointer  734  inside the paragraph node  722 . In response, the facility has selected paragraph node  722  in step  609 , and highlighted it in step  610 . The facility has further displayed a facility toolbar  730  that includes controls that the user can use to interact with the facility. These include an extraction mode button  731  that the user can click in order to toggle the extraction mode such that the selection and highlighting of nodes in response to mouse movements within the page is enabled or disabled; a home button  732  for traversing to the destination page displaying portions extracted by the user; and a close button  733  for closing the facility toolbar. 
     Returning to  FIG. 6 , in step  608 , if the user has clicked the mouse button within the node highlighted in step  807 , then the facility continues in step  609 , else the facility continues in step  604  to obtain new mouse pointer coordinates and potentially deselect the currently-selected node, and potentially select a new node. In step  609 , the facility extracts the portion of the page corresponding to the subtree of the DOM defined by the selected node, that is, the subtree of the DOM that has the selected node as its root. Step  609  is discussed in greater detail below in connection with  FIG. 8 . After step  609 , the facility continues in step  604 . 
     In some embodiments, as part of the steps performed by the facility when it is enabled for a page (not shown), rt monitors for the user clicking on the extraction mode button  731 , and, in response, toggles the extraction mode on or off, such that the process of selecting and highlighting a node for extraction is disabled or enabled. 
     In some embodiments, rather than selecting in step  606  the node under the mouse pointer having the smallest area, the facility uses the following logic to select a node based upon the location of the mouse pointer. The facility initializes a score for each node on the list to be initially set equal to 1. If the mouse pointer coordinates indicate that the mouse pointer is within a node on the list, then the facility reduces the score for the node containing the mouse pointer to the value 0.1. For each node on the list, the facility multiplies the node&#39;s score by both (1) the square of the distance from the mouse pointer to the upper-left corner of the node and (2) the square roof of the node&#39;s area. The facility then selects the node on the list having the lowest score. 
       FIG. 8  is a flow diagram showing steps performed by the facility in some embodiments in order to extract a portion of a webpage corresponding to a subtree defined by a selected node. In step  801 , the facility creates in the DOM a reset node as a child of the body node—in the case of the example, body node  512  shown in  FIG. 5 . In some embodiments, the reset node created in step  801  has the node type div; visibility attribute is set to the value hidden; position attribute is set to absolute; and position and dimension attribute values are set identical to the selected node that is the root of the original portion subtree. Also in step  801 , the facility assigns the reset node to a reset class. A reset class used by the facility in some embodiments is shown below in Table B. 
     
       
         
           
               
               
             
               
                 TABLE B 
               
               
                   
               
             
            
               
                  1 
                 .clipping { 
               
               
                  2 
                 font-family: times; 
               
               
                  3 
                 font-size:16px; 
               
               
                  4 
                 font-weight:normal; 
               
               
                  5 
                 font-style:normal; 
               
               
                  6 
                 color: black; 
               
               
                  7 
                 line-height:100%; 
               
               
                  8 
                 margin:0; padding:0; 
               
               
                  9 
                 } 
               
               
                 10 
                 .clipping td { 
               
               
                 11 
                 font-size:16px; 
               
               
                 12 
                 } 
               
               
                 13 
                 .clipping * { 
               
               
                 14 
                 color: black; 
               
               
                 15 
                 font:inherit; 
               
               
                 16 
                 } 
               
               
                 17 
                 .clipping a { 
               
               
                 18 
                 text-decoration:underline; 
               
               
                 19 
                 } 
               
               
                 20 
                 .clipping html, .clipping address, 
               
               
                 21 
                 .clipping blockquote, 
               
               
                 22 
                 .clipping body, .clipping dd, .clipping div, 
               
               
                 23 
                 .clipping dl, .clipping dt, .clipping fieldset, .clipping form, 
               
               
                 24 
                 .clipping frame, .clipping frameset, 
               
               
                 25 
                 .clipping h1, .clipping h2, .clipping h3, .clipping h4, 
               
               
                 26 
                 .clipping h5, .clipping h6, .clipping noframes, 
               
               
                 27 
                 .clipping ol, .clipping p, .clipping ul, .clipping center, 
               
               
                 28 
                 .clipping dir, .clipping hr, .clipping menu, .clipping pre 
               
            
           
           
               
               
            
               
                 29 
                 { display: block; } 
               
            
           
           
               
               
               
            
               
                 30 
                 .clipping li 
                 { display: list-item; list-style-type:none; } 
               
               
                 31 
                 .clipping head 
                 { display: none } 
               
               
                 32 
                 .clipping table 
                 { display: table } 
               
               
                 33 
                 .clipping tr 
                 { display: table-row } 
               
               
                 34 
                 .clipping thead 
                 { display: table-header-group } 
               
               
                 35 
                 .clipping tbody 
                 { display: table-row-group } 
               
               
                 36 
                 .clipping tfoot 
                 { display: table-footer-group } 
               
               
                 37 
                 .clipping col 
                 { display: table-column } 
               
               
                 38 
                 .clipping colgroup 
                 { display: table-column-group } 
               
               
                 39 
                 .clipping td, th 
                 { display: table-cell } 
               
               
                 40 
                 .clipping caption 
                 { display: table-caption } 
               
               
                 41 
                 .clipping th 
                 { font-weight: bolder; text-align: center } 
               
               
                 42 
                 .clipping caption 
                 { text-align: center } 
               
               
                 43 
                 .clipping h1 
                 { font-size: 2em; margin: .67em 0 } 
               
               
                 44 
                 .clipping h2 
                 { font-size: 1.5em; margin: .75em 0 } 
               
               
                 45 
                 .clipping h3 
                 { font-size: 1.17em; margin: .83em 0 } 
               
            
           
           
               
               
            
               
                 46 
                 .clipping h4, .clipping p, 
               
               
                 47 
                 .clipping blockquote, .clipping ul, 
               
               
                 48 
                 .clipping fieldset, .clipping form, 
               
               
                 49 
                 .clipping ol, .clipping dl, .clipping dir, 
               
            
           
           
               
               
               
            
               
                 50 
                 .clipping menu 
                 { margin: 1.12em 0 } 
               
               
                 51 
                 .clipping h5 
                 { font-size: .83em; margin: 1.5em 0 } 
               
               
                 52 
                 .clipping h6 
                 { font-size: .75em; margin: 1.67em 0 } 
               
            
           
           
               
               
            
               
                 53 
                 .clipping h1, .clipping h2, .clipping h3, .clipping h4, 
               
               
                 54 
                 .clipping h5, .clipping h6, .clipping b, 
               
            
           
           
               
               
               
            
               
                 55 
                 .clipping strong 
                 { font-weight: bolder } 
               
               
                 56 
                 .clipping blockquote 
                 { margin-left: 40px; margin-right: 40px } 
               
            
           
           
               
               
            
               
                 57 
                 .clipping i, .clipping cite, .clipping em, 
               
               
                 58 
                 .clipping var, .clipping address 
               
            
           
           
               
               
            
               
                 59 
                 { font-style: italic; font-weight: normal } 
               
            
           
           
               
               
            
               
                 60 
                 .clipping pre, .clipping tt, .clipping code, 
               
            
           
           
               
               
               
            
               
                 61 
                 .clipping kbd, .clipping samp 
                 { font-family: monospace } 
               
               
                 62 
                 .clipping pre 
                 { white-space: pre; background-color: 
               
            
           
           
               
               
            
               
                   
                 transparent; 
               
            
           
           
               
               
            
               
                 63 
                 margin: 0; padding: 0 } 
               
            
           
           
               
               
            
               
                 64 
                 .clipping button, .clipping textarea, 
               
            
           
           
               
               
               
            
               
                 65 
                 .clipping input, .clipping select 
                 { display: inline-block } 
               
            
           
           
               
               
               
            
               
                 66 
                 .clipping big 
                 { font-size: 1.17em } 
               
            
           
           
               
               
               
            
               
                 67 
                 .clipping small, .clipping sub, .clipping sup 
                 { font-size: .83em } 
               
            
           
           
               
               
               
            
               
                 68 
                 .clipping sub 
                 { vertical-align: sub } 
               
               
                 69 
                 .clipping sup 
                 { vertical-align: super } 
               
               
                 70 
                 .clipping table 
                 { border-spacing: 2px; } 
               
            
           
           
               
               
            
               
                 71 
                 .clipping thead, .clipping tbody, 
               
            
           
           
               
               
               
            
               
                 72 
                 .clipping tfoot 
                 { vertical-align: middle } 
               
            
           
           
               
               
               
            
               
                 73 
                 .clipping td, .clipping th, .clipping tr 
                 { vertical-align: inherit } 
               
            
           
           
               
               
               
            
               
                 74 
                 .clipping s, .clipping strike, .clipping del 
                 { text-decoration: line- 
               
            
           
           
               
               
            
               
                   
                 through } 
               
            
           
           
               
               
               
            
               
                 75 
                 .clipping hr 
                 { border: 1px inset } 
               
            
           
           
               
               
            
               
                 76 
                 .clipping ol, .clipping ul, .clipping dir, 
               
            
           
           
               
               
               
            
               
                 77 
                 .clipping menu, .clipping dd 
                 { margin-left: 40px } 
               
            
           
           
               
               
               
            
               
                 78 
                 .clipping ol 
                 { list-style-type: decimal } 
               
            
           
           
               
               
            
               
                 79 
                 .clipping ul, .clipping ol { margin: 0; padding: 0 } 
               
            
           
           
               
               
               
            
               
                 80 
                 .clipping u, .clipping ins 
                 { text-decoration: underline } 
               
            
           
           
               
               
               
            
               
                 81 
                 .clipping br:before 
                 { content: “\A”; white-space: pre-line } 
               
               
                 82 
                 .clipping center 
                 { text-align: center } 
               
            
           
           
               
               
               
            
               
                 83 
                 .clipping :link, .clipping :visited 
                 { text-decoration: underline } 
               
            
           
           
               
               
               
            
               
                 84 
                 .clipping :focus 
                 { outline: thin dotted invert } 
               
               
                   
               
            
           
         
       
     
     Again, the reset class is intended to establish a common set of default CSS style attribute values that correspond to typical browser default values for both the portion copy subtree constructed in the DOM of the page from which the portion is extracted, and the portion copy subtree that is “reconstituted” in the portion destination page. In particular, the attribute values of the reset class are chosen to match, as closely as possible, the attributes with which web pages are most commonly rendered, to minimize the number of inline attributes established in the portion copy subtree by the facility. The sample reset class shown in Table B has the name “clipping”. In some embodiments (not shown), the facility uses a more obscure name, or randomly generates a name, in order to decrease the likelihood that the reset class&#39;s name will collide with a class that is native to the page. 
       FIG. 10  is a data structure diagram showing a partially-constructed version of the portion copy subtree generated by the facility in some embodiments. It can be seen that, in step  901 , the facility established div node  1000  as the reset node, which is a child of body node  512 .  FIG. 10  is discussed in greater detail below. 
     In step  802 , the facility calls an extract node function for extracting a single node of a webpage portion being extracted. The extract node function has two parameters; source node, the node of the original portion in the page to copy, and destination parent node, i.e., the node of the portion copy being generated in the DOM that is to be the parent of the copy made of the source node. Details of the extract node function are discussed below in connection with  FIG. 9 . 
       FIG. 9  is a flow diagram showing steps performed by the facility in some embodiments as part of the extract node function for extracting a single node of a webpage portion being extracted. As described above, it has two parameters; source node and destination parent node. In step  901 , the facility creates a destination node as a child of the destination parent node. The destination node created in step  901  has the same type as the source node. In reviewing  FIG. 10 , it can be seen that the P node  1032  that is created in the copy subtree in step  901  when the extract node function is called with P node  532  of the original portion as the source node has the same type as node  532 , and has child text node  1042  corresponding to text node  542 . When the extract node function is called with span node  543  of the original portion as the source node, the facility creates span node  1043  in the copy subtree in step  901 . 
     In step  902 , the facility selectively copies inline attribute values from the source node to the destination node. In various embodiments, the selective copying of inline attribute values uses one or more of the rules shown below in Table C. 
     
       
         
           
               
               
             
               
                 TABLE C 
               
               
                   
               
             
            
               
                 1 
                 If source node has tag “input”, then copy source node&#39;s “type” 
               
               
                   
                 attribute to destination node. If source node “type” is not “hidden”, 
               
               
                   
                 then also copy node&#39;s “value” attribute to destination node. 
               
               
                 2 
                 If source node has tag “embed”, “object”, or “param”, then copy 
               
               
                   
                 all of source node&#39;s attributes to destination node. 
               
               
                 3 
                 If source node has tag “button”, then copy the outer width and outer 
               
               
                   
                 height attributes of source node to destination node. 
               
               
                 4 
                 If source node has tag “img”, then copy the “src” attribute from 
               
               
                   
                 source node to destination node, transforming the value of the “src” 
               
               
                   
                 attribute from a relative URL to an absolute URL if relative. 
               
               
                 5 
                 If source node has tag “a”, then copy the “href” attribute from source 
               
               
                   
                 node to destination node, transforming the value of href from a 
               
               
                   
                 relative URL to an absolute URL if relative. 
               
               
                 6 
                 All other attributes of source node are ignored and not copied. 
               
               
                   
               
            
           
         
       
     
     In step  903 , for each style attribute other than the visibility, height, and weight style attributes, the facility determines a computed value for that attribute in both the source node and the destination node, and compares these two computed values for the attribute. If the compared values do not match, the facility adds an inline attribute to the destination node setting the value of the attribute to the value computed for the attribute in the source node. Table D below shows the results of this comparison between destination span node  1043  shown In  FIG. 10  and corresponding source span node  543 . 
     
       
         
           
               
               
               
               
               
             
               
                   
                 TABLE D 
               
               
                   
                   
               
               
                   
                 Attribute 
                 Value in Source 
                 Value in Copy 
                 Match 
               
               
                   
                   
               
             
            
               
                   
               
            
           
           
               
               
               
               
               
            
               
                 01 
                 -webkit-border-bottom-left-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 02 
                 -webkit-border-bottom-right-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 03 
                 -webkit-border-top-left-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 04 
                 -webkit-border-top-right-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 05 
                 -webkit-box-shadow 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 06 
                 background-attachment 
                 “scroll” 
                 “scroll” 
                 TRUE 
               
               
                 07 
                 background-clip 
                 “border-box” 
                 “border-box” 
                 TRUE 
               
               
                 08 
                 background-color 
                 “rgba (0, 0, 0, 0)” 
                 “rgba (0, 0, 0, 0)” 
                 TRUE 
               
               
                 09 
                 background-image 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 10 
                 background-origin 
                 “padding-box” 
                 “padding-box” 
                 TRUE 
               
               
                 11 
                 background-position 
                 “0% 0%” 
                 “0% 0%” 
                 TRUE 
               
               
                 12 
                 background-position-x 
                 “0%” 
                 “0%” 
                 TRUE 
               
               
                 13 
                 background-position-y 
                 “0%” 
                 “0%” 
                 TRUE 
               
               
                 14 
                 background-repeat 
                 “repeat” 
                 “repeat” 
                 TRUE 
               
               
                 15 
                 border-bottom-color 
                 “rgb (0, 0, 0)” 
                 “rgb (0, 0, 0)” 
                 TRUE 
               
               
                 16 
                 border-bottom-left-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 17 
                 border-bottom-right-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 18 
                 border-bottom-style 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 19 
                 border-bottom-width 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 20 
                 border-collapse 
                 “separate” 
                 “separate” 
                 TRUE 
               
               
                 21 
                 border-left-color 
                 “rgb (0, 0, 0)” 
                 “rgb (0, 0, 0)” 
                 TRUE 
               
               
                 22 
                 border-left-style 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 23 
                 border-left-width 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 24 
                 border-right-color 
                 “rgb (0, 0, 0)” 
                 “rgb (0, 0, 0)” 
                 TRUE 
               
               
                 25 
                 border-right-style 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 26 
                 border-right-width 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 27 
                 border-spacing 
                 “0px 0px” 
                 “0px 0px” 
                 TRUE 
               
               
                 28 
                 border-top-color 
                 “rgb (0, 0, 0)” 
                 “rgb (0, 0, 0)” 
                 TRUE 
               
               
                 29 
                 border-top-left-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 30 
                 border-top-right-radius 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 31 
                 border-top-style 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 32 
                 border-top-width 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 33 
                 bottom 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 34 
                 caption-side 
                 “top” 
                 “top” 
                 TRUE 
               
               
                 35 
                 clear 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 36 
                 clip 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 37 
                 color 
                 “rgb (0, 0, 0)” 
                 “rgb (0, 0, 0)” 
                 TRUE 
               
               
                 38 
                 cursor 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 39 
                 direction 
                 “ltr” 
                 “ltr” 
                 TRUE 
               
               
                 40 
                 display 
                 “inline” 
                 “inline” 
                 TRUE 
               
               
                 41 
                 empty-cells 
                 “show” 
                 “show” 
                 TRUE 
               
               
                 42 
                 float 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 43 
                 font-family 
                 “arial” 
                 “arial” 
                 TRUE 
               
               
                 44 
                 font-size 
                 “16px” 
                 “16px” 
                 TRUE 
               
               
                 45 
                 font-style 
                 “italic” 
                 “normal” 
                 FALSE 
               
               
                 46 
                 font-variant 
                 “normal” 
                 “normal” 
                 TRUE 
               
               
                 47 
                 font-weight 
                 “normal” 
                 “normal” 
                 TRUE 
               
               
                 48 
                 left 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 49 
                 letter-spacing 
                 “normal” 
                 “normal” 
                 TRUE 
               
               
                 50 
                 line-height 
                 “normal” 
                 “normal” 
                 TRUE 
               
               
                 51 
                 list-style-image 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 52 
                 list-style-position 
                 “outside” 
                 “outside” 
                 TRUE 
               
               
                 53 
                 list-style-type 
                 “disc” 
                 “disc” 
                 TRUE 
               
               
                 54 
                 margin-bottom 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 55 
                 margin-left 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 56 
                 margin-right 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 57 
                 margin-top 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 58 
                 max-height 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 59 
                 max-width 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 60 
                 min-height 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 61 
                 min-width 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 62 
                 opacity 
                 1 
                 1 
                 TRUE 
               
               
                 63 
                 outline-color 
                 “rgb (0, 0, 0)” 
                 “rgb (0, 0, 0)” 
                 TRUE 
               
               
                 64 
                 outline-style 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 65 
                 outline-width 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 66 
                 overflow-x 
                 “visible” 
                 “visible” 
                 TRUE 
               
               
                 67 
                 overflow-y 
                 “visible” 
                 “visible,” 
                 TRUE 
               
               
                 68 
                 padding-bottom 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 69 
                 padding-left 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 70 
                 padding-right 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 71 
                 padding-top 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 72 
                 page-break-after 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 73 
                 page-break-before 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 74 
                 page-break-inside 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 75 
                 position 
                 “static” 
                 “static” 
                 TRUE 
               
               
                 76 
                 right 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 77 
                 table-layout 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 78 
                 text-align 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 79 
                 text-decoration 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 80 
                 text-indent 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 81 
                 text-transform 
                 “none” 
                 “none” 
                 TRUE 
               
               
                 82 
                 top 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                 83 
                 vertical-align 
                 “baseline” 
                 “baseline” 
                 TRUE 
               
               
                 84 
                 white-space 
                 “normal” 
                 “normal” 
                 TRUE 
               
               
                 85 
                 word-spacing 
                 “0px” 
                 “0px” 
                 TRUE 
               
               
                 86 
                 z-index 
                 “auto” 
                 “auto” 
                 TRUE 
               
               
                   
               
            
           
         
       
     
     It can be seen in line  45  that the values computed for the font-style attribute in the source and destination nodes do not match. Accordingly, in step  903 , the facility establishes for destination span node  1043  an inline attribute value of font-style=“italic” to match the value computed for this attribute in the source node. 
     In steps  904 - 908 , the facility loops through each of the children of the source node in the order in which they occur m the DOM. For example, where the extract function is called for source node  543 , in steps  904 - 908 , the facility loops through children nodes  571 ,  572 , and  573  of source node  543  in this order. In step  905 , if the child node is a text node, then the facility continues in step  906 , else a facility continues in step  907 . For example, child node  571  is a text node, while child node  572  is not a text node. In step  906 , the facility copies the text node to be a child of the destination node. For example, where the current child node is text node  571 , the facility creates a copy of text node  571  as a child of destination span node  1043 , shown in  FIG. 11  as node  1171 . After step  906 , the facility continues in step  908 . In step  907 , the facility recursively calls the extract node function, setting the source node parameter equal to the current child node, and setting the destination parent node parameter equal to the destination node. In step  908 , if at least one additional child of the source node remains to be processed, the facility continues in step  904  to process the next child of the source node, else the facility continues in step  909 . In step  909 , for each of the height and width style attributes, if the computed value of the attribute in the source node does not match the attribute&#39;s computed value in the destination, the facility adds an inline attribute to the destination node setting the value of the attribute to the value computed for the attribute in the source node. When the extract node function is called with span node  543  as the source node, the computed value of the height attribute in both the source node and the target node is “35 px”, so the facility does not attach an inline attribute to the destination node for this attribute. However, for the width attribute, the value in the source node is computed to be “536 px”, while its value in the destination node is computed to be “737 px”. Accordingly, the facility establishes an inline attribute in the destination node setting the value of this attribute equal to the value calculated for the attribute in the source node, “536 px”. After step  909 , these steps conclude, and the extract node function returns. 
     Returning to  FIG. 8 , when the call made to the extract node function in step  802  returns, the facility has finished constructing the portion copy subtree in the page&#39;s DOM,  FIG. 11  is a data structure diagram showing the DOM when it contains a complete portion copy subtree. It can be seen that p node  1032 , which is the child of the reset node  1000 , is the root of a subtree whose structure exactly matches the original portion subtree whose root is p node  532 . As discussed above, the nodes of the portion copy subtree have inline attributes determined by logic of the facility in conjunction with attribute values calculated for nodes of the original portion, which are not descendents of the reset node, and the corresponding nodes of the portion copy, which are descendants of the reset node. 
     In step  803 , the facility generates html corresponding the subtree of the DOM defined by the child of the reset node, in the case of the example, the child of the reset node that is the root of this subtree is p node  1032 . Table E below shows the html generated by the facility in step  803  in the example. 
     
       
         
           
               
               
             
               
                 TABLE E 
               
               
                   
               
             
            
               
                  1 
                 &lt;!doctype html&gt; 
               
               
                  2 
                 &lt;html&gt; 
               
            
           
           
               
               
            
               
                  3 
                 &lt;body&gt; 
               
            
           
           
               
               
            
               
                  4 
                   
               
               
                  5 
                 &lt;p style= 
               
               
                  6 
                 “font-family:arial;line-height:normal;margin-bottom:16px;margin-top:16px; 
               
               
                  7 
                 width:548px;padding:10px;border:1px solid rgb(255, 0, 0);”&gt; This is a 
               
               
                  8 
                 paragraph of text that has the “framed” class set to it. &lt;span 
               
               
                  9 
                 style=“font-style:italic;width:536px;”&gt;This is a span that is styled 
               
               
                 10 
                 through a CSS selector rule. It has a &lt;a style=“color:#00E;border- 
               
               
                 11 
                 color:#00E;” href=“http:// example.com/link.html”&gt;link&lt;/a&gt; inside of 
               
               
                 12 
                 it.&lt;/span&gt; This is the last sentence, which has a standard &lt;b style=“font- 
               
               
                 13 
                 weight:bold;”&gt;bold&lt;/b&gt; in it word. &lt;/p&gt; 
               
               
                 14 
               
            
           
           
               
               
            
               
                 15 
                 &lt;/body&gt; 
               
            
           
           
               
               
            
               
                 16 
                 &lt;/html&gt; 
               
               
                   
               
            
           
         
       
     
     It can be seen that a &lt;p&gt; tag from lines  5 - 13  corresponds to p node  1032 , the root of the copy subtree. The facility has established inline attributes for this node for several different attributes: font-family, line-height, margin-bottom, margin-top, width, padding, and border. As every other node in the copy subtree descends from p node  1032 , these inline attributes are inherited by most of the other nodes in the copy subtree, and need not fee repeated there. The text on lines  8  corresponds to text node  1142 . The span tag from line  8  to line  12  corresponds to span node  1043 , and has the inline attributes discussed above. The text on lines  9 - 10  corresponds to text node  1137 . The a tag on lines  10 - 11  corresponds to a node  1172 . The text on lines  11 - 12  corresponds to text node  1173 . The text on line  12  corresponds to text node  1144 . The b tag on lines  12 - 13  corresponds to b node  1145 . The text inside the b node corresponds to text node  1174 . The text on line  13  after the b node corresponds to text node  1148 . 
     In step  804 , the facility compresses the html generated for the portion copy in step  803 . In various embodiments, the facility uses one or more of the rules shown below in Table F. 
     
       
         
           
               
             
               
                 TABLE F 
               
               
                   
               
             
            
               
                 1. For all of the inlined style information in the generated HTML, rewrite 
               
               
                 verbose CSS declarations into shorthand form. For example, if 
               
               
                 margin-top:A, margin-right:B, margin-bottom:C, margin-left:D are all 
               
               
                 present, then this can be abbreviated as “margin: A B C D”. Moreover, 
               
               
                 if A, B, C, and D are all of the same value, then this can further be 
               
               
                 abbreviated as “margin:A”. Carry out these abbreviates for every know 
               
               
                 short hand form, which includes margin, padding, border, background, 
               
               
                 font, list, outline, etc. Also, convert “rgb(A,B,C)” colors into 
               
               
                 hexadecimal notation. This step is to simply reduce the size of the 
               
               
                 generated HTML without altering how it should be interpreted. 
               
               
                 2. Compress the generated HTML with a shared dictionary. Since HTML 
               
               
                 uses a small dictionary of tag names, CSS attribute names, and common 
               
               
                 attribute values, these names and strings are frequently repeated. 
               
               
                 Using a small dictionary allows us to refer to replace the verbose 
               
               
                 strings by an index in the dictionary, thereby reducing the total 
               
               
                 space used by the generated HTML. Since the generated HTML is 
               
               
                 transmitted over a network and stored on disk, the space savings 
               
               
                 are critical. 
               
               
                   
               
            
           
         
       
     
     In step  805 , the facility uploads the compressed html generated in step  804  to the portion extraction server computer system for storage in the portion table maintained on the portion extraction server computer system on behalf of the user of the client computer system. After step  805 , these steps conclude. 
       FIG. 12  is a data structure diagram showing sample contents of a portion table maintained by the facility in some embodiments. The portion table  1200  is made up of rows, such as rows  1201 - 1205 , each corresponding to a different portion extracted from a web page by some user. Each row is divided into the following columns: a user id column  1211  that identifies the user who extracted the portion; a date/time column  1212  that indicates the date and time at which the portion was extracted; a domain column  1213  that contains the domain of the page from the portion is extracted; a title column  1214  that contains the title of the page from which the portion is extracted; and a compressed portion html column  1215  containing the compressed html generated for the portion by the facility. For example, row  1201  corresponds to the example portion, and indicates that it was extracted by a user having user id  5553 , at 10:49; 13 AM PDT on Apr. 4, 2011, from the domain example.com, with the title “Clipping Example.” The row contains the compressed portion html shown above in Table F in column  1215 . It can be seen that rows  1202 - 1204  correspond to other portions extracted by the same user, while row  1205  corresponds to a portion extracted by a different user having user id  5557 . 
     While  FIG. 12  and each of the other table diagrams discussed herein show a table whose contents and organization are designed to make them more comprehensible by a human reader, those skilled in the art will appreciate that actual data structures used by the facility to store this information may differ from the table shown, in that they, for example, may be organized in a different manner; may contain more or less information than shown; may be compressed and/or encrypted; may contain a much larger number of rows than shown; etc. 
       FIG. 13  is a flow diagram showing steps performed by the facility in order to respond to a request for a user&#39;s portion destination page showing all of the portions extracted by the user from different web pages in some embodiments. In step  1301 , the client sends a request for the destination page to the portion extraction server, such as in response to the user&#39;s activation of home button  732  in the facility toolbar shown in  FIG. 7 , typing the destination page&#39;s URL into the URL field of the browser, dereferencing a browser bookmark, etc. In step  1302 , the portion extraction server processes a destination page template using a page generation engine to populate a destination page with portions extracted by the requesting user that are retrieved by the facility from the portion table. For example, for user having user id  5553 , the facility constructs the destination page using rows  1201 - 1204  of the portion table. In step  1303 , the facility returns the destination page to the client. In step  1304 , the client browser renders the destination page, and permits the user to interact with it to both view and act on extracted portion. After step  1304 , these steps conclude. 
       FIG. 14  is a flow diagram showing alternate steps performed by the facility in order to respond to a request for a user&#39;s portion destination page. In step  1401 , the client sends to the portion extraction server a request for the user&#39;s destination page. In step  1402 , the portion extraction server retrieves from the portion fable metadata about the user&#39;s n most recently extracted portions, such as 20 portions most recently extracted by the user. A facility includes metadata about each of these end portions, along with an identifier for each, in a JSON bundle having a built-in template for the destination page. The portion extraction server returns this JSON bundle to the client. In step  1403 , the client uses the template in the received JSON bundle to compose a skeleton of the destination page having an empty space in the position in which each portion will be composed. In steps  1404 - 1408 , the facility loops through each portion whose identifier is included in the JSON bundle. In step  1405 , the client uses the portion identifier to request the portion html for this portion from the portion extraction server. In step  1406 , the portion extraction server retrieves the portion html for this portion from the portion table and returns it to the client, in step  1407 , the client composes the received clip html in the corresponding position in the destination page skeleton. In step  1408 , if additional portions remain to be processed, the facility continues in step  1404  to process the next portion. After step  1408 , the steps conclude. 
       FIG. 15  is a display diagram showing a sample display presented by the facility in some embodiments containing the portion destination page for the user. Browser window  150 D includes a client area  1520  in which is displayed a rendered version of the destination page. The destination page includes multiple portion entries each containing one portion extracted from a web page by the user, such as portion entries  1530  and  1540 . As shown, each portion entry includes the portion itself (portion  1535  in entry  1530 , portion  1545  in entry  1540 ), as well as additional information about the portion. For example, in addition to portion  1535 , portion entry  1530  includes a title  1531  of the page from which the portion is extracted, and indication  1532  of the user who extracted the portion; the date and time  1533  at which the portion is extracted; and the domain  1534  of the web page from which the portion is extracted. In some embodiments, the destination page contains a portion entry for every portion ever extracted by the user. The destination page also includes numerous filtering controls, such as filtering controls  1581 - 1584  for omitting the portion entries to those that correspond, respectively, to recently-extracted portions; portions marked private; portions marked public; and deleted portions. The destination page also includes filtering controls  1571 - 1572  for different tags attributing in various ways to each portion, web page, web site, or group of web sites from which the portion was extracted, etc. The destination page also includes filtering controls such as filtering controls  1581 - 1582  for displaying only those portion entries corresponding to portions extracted from particular websites or domains. The destination page also includes a search field  1554  into which the user can type a search query. In response, the facility filters the displayed portions to those that satisfy the query, such as those that contain text matching the query. The destination page also includes a log out control  1555  that the user can activate in order to log out from the facility, or back in. Those skilled in the art will appreciate that various other user interface techniques can be applied to the layout in an operation of the destination page in various embodiments. 
       FIG. 16  is a flow diagram showing steps typically performed by the facility in order to provide portion extraction using an explicit portion extraction control. In step  1801 , the facility receives a page containing a portion extraction control. The portion extraction control contained in the page refers to the portion to be extracted from the page when the portion extraction control is activated. In step  1602 , the facility renders the page, including the control. 
       FIG. 17  is a display diagram showing a sample display presented by the facility including a page containing a portion extraction control. In the display diagram, a browser window  1700  includes a URL field  1701  containing a URL for the page and a client area  1710  containing the page. The page includes a portion extraction control  1713 , as well as a portion  1711  to be extracted in connection with the portion extraction control. This portion  1711  itself contains a number of controls, here links  1712  that the user may activate in the order to take various actions with regard to the portion, including displaying additional information relating to the portion. 
     Sample source for the page shown in  FIG. 17  appears below in table G. 
     
       
         
           
               
               
             
               
                 TABLE G 
               
               
                   
               
             
            
               
                  1 
                 &lt;!DOCTYPE html&gt; 
               
               
                  2 
                 &lt;html&gt; 
               
            
           
           
               
               
            
               
                  3 
                 &lt;head&gt; 
               
            
           
           
               
               
            
               
                  4 
                 ... 
               
               
                  5 
                 &lt;script src=“http://dev.clpbrd.com/js/bookmarklet_embed.js” 
               
            
           
           
               
               
            
               
                  6 
                 id=“_ffa82b73f79fce74”&gt;&lt;/script&gt; 
               
            
           
           
               
               
            
               
                  7 
                 ... 
               
            
           
           
               
               
            
               
                  8 
                 &lt;/head&gt; 
               
               
                  9 
                 &lt;body&gt; 
               
            
           
           
               
               
            
               
                 10 
                 ... 
               
               
                 11 
                 &lt;div id=“team-overview-profile”&gt; 
               
            
           
           
               
               
            
               
                 12 
                 ... 
               
               
                 13 
                 &lt;!-- markup that defines the appearance of the team overview --&gt; 
               
               
                 14 
                 ... 
               
            
           
           
               
               
            
               
                 15 
                 &lt;/div&gt; 
               
               
                 16 
                 ... 
               
               
                 17 
                 &lt;div class=“clipboardEmbedButton” data-element-id=“team-overview-profile”&gt;&lt;/div&gt; 
               
               
                 18 
                 ... 
               
            
           
           
               
               
            
               
                 19 
                 &lt;/body&gt; 
               
            
           
           
               
               
            
               
                 20 
                 &lt;/html&gt; 
               
               
                   
               
            
           
         
       
     
     A body section of the source (lines  9 - 19 ) includes a div node (lines  11 - 15 ) corresponding to portion  1711 . This div node contains contents not shown here that define the visual and operational characteristics of the portion. This div node also specifies in line  11  the id “team-overview-profile.” The source further includes a second div node (line  17 ) inserted by the publisher or by a tool provided by the operator of the facility to the publisher. This div node specifies a class “clipboardEmbedButton” that identifies it as a button that can be activated to extract a portion of the page. This div node further specifies a data-element-id of “team-overview-profile”—this is a reference to the portion to be extracted, and matches the id specified for the div node at lines  11 - 15  corresponding to the portion to be extracted. The source further includes a script tag (lines  5 - 6 ), added to the page by the publisher or by a tool provided to the publisher by the operator of the facility, that incorporates into the source for the page a javascript file that defines and implements clipboard embed buttons to operate as described herein when included in the page, as one is in line  17  of the source for the present page. 
     A second version of sample source for the page shown in  FIG. 17  appears below in Table H. 
                         TABLE H                   1   &lt;!DOCTYPE html&gt;        2   &lt;html&gt;                      3   &lt;head&gt;                      4   ...        5   &lt;script src=“http://dev.clpbrd.com/js/bookmarklet_embed.js”                      6   id=“_ffa82b73f79fce74”&gt;&lt;/script&gt;                      7   ...                      8   &lt;/head&gt;        9   &lt;body&gt;                     10   ...       11   &lt;div id=“team-overview-profile”&gt;                     12   ...       13   &lt;!-- markup that defines the appearance of the team overview --&gt;       14   ...                     15   &lt;/div&gt;       16   ...       17   &lt;div class=“clipboardEmbedButton” data-element-start-id=“first-id” data-element-                     18   end-id“last-id”&gt;&lt;/div&gt;                     19   ...                     20   &lt;/body&gt;                     21   &lt;/html&gt;                    
Table H differs from Table G in that lines  17 - 18 , rather than referring with a single data-element-id parameter to a single node of the DOM that defines a subtree of nodes that is to be extractable using the control, instead refers with a first data-element-start-id and a second data-element-end-id that together define a range of DOM nodes that are to be extractable using the control button.
 
     Returning to  FIG. 18 , in step  1603 , the facility switches on input received from the user while viewing the page. If the received input is input corresponding to hovering the mouse cursor over the extraction control, then the facility continues in step  1604  to highlight the portion of the page to be extracted using the extraction control. After step  1604 , the facility continues to step  1603  to process additional user input. 
       FIG. 18  is a display diagram showing a sample display presented by the facility when the user uses the mouse cursor to hover over the extraction control. It can be seen that, when the user hovers the mouse cursor  1814  over the extraction control  1813 , the facility highlights the portion to be extracted  1811 , and/or makes it appear to glow. This enable the user to see the portion on the page that will be extracted if the user activates the extraction control. 
     Returning to  FIG. 16 , if the user input received in step  1603  corresponds to activating the extraction control, then the facility continues in step  1605  to extract the portion of the page specified by the publisher. After step  1604 , the facility continues in step  1603  to process additional user input. If the user input received in step  1603  is of another type, the facility performs appropriate processing, the details of which are not shown here. 
       FIG. 19  is a display diagram showing a sample display presented by the facility in response to the user activating the extraction control. When the user clicks the mouse button while hovering the mouse cursor over the extraction control as shown in  FIG. 18 , the facility displays a preview window  1920 . The preview window includes the portion  1911  as it will he extracted from the page. The preview window further includes an annotation, tag, and mention field  1921  into which the user can type information annotating the portion, tagging or otherwise categorizing the portion, and/or bringing the portion to the attention of another user with a @mention. The preview window further includes a check box  1922  that the user can select in order to publish the clip to make it publicly available; a preview disabling checkbox  1923  that the user can select in order to perform further extractions without using this preview window; a cancel button  1924  that the user can select in order to choose not to perform the present extraction; and a save button  1925  that the user can select in order to proceed with the extraction. 
       FIG. 20  is a display diagram showing a sample display presented by the facility alter the user has used the extraction control to extract a portion of the page. It can be seen that the extraction button  2013  now bears the legend “saved, ” indicating that an extraction has been performed in connection with the control, and saved in connection with a portion extraction account with which the user is associated. 
       FIG. 21  is a display diagram showing a sample display presented by the facility including a portion destination page containing the extracted portion. The browser application window  2100  includes a client area  2110  containing the portion destination page. The portion destination page, in turn, contains a section  2171  corresponding to the extracted portion of the document shown in  FIGS. 17-20 . This section includes a portion  2111 —with operational controls—as well as a portion title  2157 , an identifier  2160  for the user who performed the extraction, and a domain  2159  in connection with which the extraction was performed. As described further above, in the portion destination page, the portion is displayed in the context of other portions extracted from pages, such as portions extracted from pages by the same user, portions that relate to the same tags or other categories, portions extracted from pages of particular websites, etc. 
     Where the user is not signed into an account with the extraction service at the time they perform the extraction, in some embodiments the facility permits the user to sign in to an existing account. In some embodiments, the facility enables the user to create a new account. 
       FIG. 22  is a display diagram showing a sample display presented by the facility in order to enable the user performing an extraction to create a new account with the extraction service with which the extracted portion will be associated. The display includes an account creation window  2230 , which in turn contains an email field  2231  into which the user may enter their email address, a user name field  2232  into which the user may enter their user name for the portion extraction service, and a password field  2233  to which the user can enter a password for this new extraction service account. After populating these fields, the user can activate a create account control  2235  in order to create a new account with the portion extraction service. Alternatively, the user can activate a third-party login control  2234  in order to log into the portion extraction service via a third-party service, such as Facebook. 
     Alternatively, in some embodiments, the facility creates an anonymous account in order to save a portion extracted by a user not having an account. In such embodiments, the facility permits the user to later associate this account with their identity and/or provide more Information usable by the facility to make this anonymous account a more robust one. 
     Where the user who performs an extraction neither has an existing account for the portion extraction service nor wishes to immediately create one, the facility enables the user to perform certain actions with respect to the extraction that do not involve the extraction becoming associated with a portion extraction service account. As one example, the user can identify a recipient to whom the extracted portion is to be forwarded, such as by providing an email address for the recipient to which the extracted portion is to be emailed, or to which a reference to the extracted portion is to be emailed. As another example, in some embodiments, the user receives a “permalink,” a URL that can be used to directly access the extracted portion without reference to any portion extraction service account.  FIGS. 23 and 24  provide and example of such a permalink. 
       FIG. 23  is a display diagram showing a sample display presented by the facility after establishing a permalink for a portion extraction. The display contains a permalink window  2340 , which in turn contains a URL  2341  that can be used to access the extracted portion. The window further includes a close control  2342  that the user can operate in order to close the permalink window. 
       FIG. 24  is a display diagram showing a sample display presented by the facility when a portion permalink is dereferenced. When the URL for the permalink is displayed in a browser, such as by pasting the URL into the browser&#39;s URL field  2401 , a page  2410  is served to and displayed by the browser. The page includes the extracted portion  2411 , complete with operational controls  2412 . It further includes a title  2457  for the portion; an image  2458  and an identifier  2459  for the user who performed the extractions, if these are available; an indication  2481  of a website with respect to which the extraction was performed; an indication  2461  of the time at which the extraction was performed. The page further includes a field  2482  to which the user can enter notes, tags, or user @mentions, as well as a field  2463  into which the user can enter a comment for the extracted portion. The page also includes the following controls: a visit control  2451  that the user can select to open the page from which the portion was extracted in a new browser window or browser tab; a like control  2452  that user can select to indicate that the user likes the portion, causes a like association to be formed between the user and the portion, and augments a count of the number of users who liked the portion as a basis for scoring the portion relative to other portions; a publish control  2453  that user can select to make the portion viewable by any user; a flag control  2454  that user can select to indicate that something is wrong with the portion, e.g., the portion is broken in some sense, or offensive, or raises a copyright issue; a share control  2455  that user can select to enable the user to share the portion with another user through a third-party mechanism, such as via a Facebook post, a Twitter tweet, a permalink email, or an iframe imbed; and a delete control  2456  that the user can select to delete the portion. 
     In some embodiments, the facility enables the user to select multiple subtrees within the page for extraction, such as by using user interface techniques such as click-and-drag and shift-click. In such embodiments, the facility constructs multiple copy subtrees, each corresponding to one of the subtree selected in the original, as children of the reset node. In some embodiments, the facility reestablishes and rescores the list of nodes in the page when the page is reflowed by the browser, or when new content streams into the page. 
     In some embodiments, the facility performs additional analysis to identify nodes in the destination subtree having a particular type to which the facility has assigned or would assign the same inline attributes and values. In these embodiments, the facility establishes a special class for nodes of this type that express these attribute values, so that the inline attributes can be removed from the nodes themselves. 
     In some embodiments, the facility performs additional analysis to identify outermost layout attributes of the source subtree that are superfluous in the destination subtree. For example, the source subtree may have a large right margin value to make sure that it is visually separated from another part of the source document that is not present in the extracted portion. In this case, the large margin in the source subtree can be reduced or eliminated in the destination subtree. 
     In some embodiments, the facility enables the author of a page to code the source for the page in a manner that directs aspects of the facility&#39;s extraction of portions from the page. In some embodiments, the author of a page is able to explicitly designate which nodes in the page are eligible for extraction. For example, for a recipe page in which each recipe is presented as a stylized index card, the author may wish to designate as candidates for extraction only those nodes corresponding to a whole index card to better preserve the fidelity of portions extracted from this page. In some embodiments, the author performs this explicit designation by attaching a special class to only those nodes that are to be eligible for extraction by the facility. In the case of the sample page shown above in Table A, the author of the page would add “class=clipboard_region” inside the &lt;p&gt; open tags that occur on lines  21 ,  23 , and  31  to limit the facility to extracting only any of the entire paragraphs, rather than nodes corresponding to only a portion of a paragraph. 
     In some embodiments, the author of a page is able to code a page in a way that specifies metadata to be associated with portions extracted from the page by the facility. For example, the author of a page might wish to ensure that portions extracted from the page have a metadata attribute associated with them that identifies the subject matter category to which the portion relates. This subject matter category can then be used by the facility in the destination page in order to select, subset, sort, etc. extracted portions based upon their subject matter category. As one example, the author of a cinema page may wish to associate the category “movies” with the page as a whole, and more specific categories such as “movies—horror”, “movies—documentary”, etc. with sections of the page directed to individual movies that fall into those categories. In some embodiments, in order to do so, the author adds the inline attribute “clipboard_category=‘movies’” to the body tag for the page, adds the inline attribute “clipboard_category=‘movies—horror’” to the open tag for a node that the author wishes to have this more specific category, etc. The facility, in generating an extracted portion, copies these specialized metadata attributes to the extracted portion along with formatting attributes. Also, in some embodiments, the presence of any of these metadata attributes in an extracted portion causes the facility to add the metadata attribute and its value to the portion fable entry for the portion (not shown), enabling the facility to more easily use this additional metadata to select, sort, subset, etc. the extracted portions represented in the portion fable. In various embodiments, the author is able to specify values for various metadata attributes in this way, in some cases metadata attributes that are arbitrarily selected by the author. 
     It will be appreciated by those skilled in the art that the above-described facility may be straightforwardly adapted or extended in various ways. For example, in a variety of embodiments, the facility is capable of extracting portions from documents other than html documents, including both documents in other tag languages and non-tag language documents. In various embodiments, the facility uses a variety of techniques to enable the user to select one or more portions to he extracted, and a variety of techniques to make extracted portions available and usable to this user and/or other users. While the foregoing description makes reference to particular embodiments, the scope of the invention is defined solely by the claims that follow and the elements recited therein.