US20120210206A1 - Resizing an editable area in a web page - Google Patents
Resizing an editable area in a web page Download PDFInfo
- Publication number
- US20120210206A1 US20120210206A1 US13/434,996 US201213434996A US2012210206A1 US 20120210206 A1 US20120210206 A1 US 20120210206A1 US 201213434996 A US201213434996 A US 201213434996A US 2012210206 A1 US2012210206 A1 US 2012210206A1
- Authority
- US
- United States
- Prior art keywords
- div element
- hidden
- resize
- div
- content
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Abandoned
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Definitions
- HTML Hypertext Markup Language
- Web site authoring tools or applications exist, which aid in Web page creation and design. Some Web site authoring tools may be implemented via a Web browser. These tools are typically more limited in functionality as compared to client-based tools. Many browser-based Web authoring tools either rely on a user to understand how to write code to create a Web site, or on the other hand, allow a user to enter data and drag-and-drop objects into a pre-designed Website template, requiring no HTML knowledge.
- a user understands how to write code to create a Web site, he/she can start with a blank page and create a completely customized Web page. With a pre-designed Web site, the design is typically set, and a user simply inserts the data he/she wants into text frames included in the template. A need exists for a negotiation between these two design extremes, giving a user more capability to design a Web site and to affect the layout without requiring him/her to understand the underlying code beneath the surface.
- Zone may be an HTML DIV element that is enclosed by a table cell.
- DIV elements are containers in which a user may place Web content. Collectively, zones may form an entire Web site.
- the terms “zone” and “DIV element” may be used interchangeably herein.
- DIV elements must also change in size in order to contain all of the data and preserve the design of a Web site.
- a user may choose to control the appearance of the elements on a screen by specifying the width of DIV elements. If the width of a DIV element is specified, the height remains variable, and the contents may wrap at the specified width. Thus, regardless of which browser or screen resolution is used, the contents within the DIV element will wrap at the specified width, and the integrity of the Web page design is preserved.
- a user may choose to specify a height of a DIV element in addition to a width.
- Web site editing tools exist for allowing for the vertical resizing of DIV elements; however, such tools accomplish vertical resizing by setting a cascading style sheet (CSS) height attribute of the DIV element.
- CSS cascading style sheet
- the DIV element becomes fixed, and is unable to size to dynamic Web content. For example, if an individual is viewing a Web page with a DIV element containing a specified width and height, and if the individual has his text display size set at a large size, the content contained within the DIV element may either be cut off by the dimensions of the DIV element, or may flow out of the DIV element and into other content. In either case, the intent of the Web design may be destroyed.
- Embodiments of the present invention are directed to resizing a height and/or a width of a DIV element, while preserving its ability to dynamically size to Web content utilizing a browser-based Web authoring tool.
- a user may select and drag a drag-and-drop mechanism to resize a DIV element.
- a drag-and-drop mechanism may be moved either up or down, which may either increment or decrement line breaks in the DIV element's content. The process of incrementing or decrementing line breaks may increase or decrease the vertical height of a DIV element.
- FIG. 1 is a simplified block diagram of a computing architecture in which embodiments of the present invention may be implemented.
- FIG. 2 is an illustration of an example DIV element containing drag-and-drop mechanisms (resize markers).
- FIG. 3 is an illustration of an example HTML code for a DIV element which has been resized utilizing current methods.
- FIG. 4 is an illustration of the example DIV element of FIG. 2 , which has been resized utilizing current methods, and contains text that has overflowed the DIV element.
- FIG. 5 is another illustration of an example DIV element containing drag-and-drop mechanisms (resize markers).
- FIG. 6 is an illustration of an example HTML code for a DIV element which has been resized utilizing embodiment of the present invention.
- FIG. 7 is an illustration of the example DIV element of FIG. 5 , which has been resized utilizing embodiments of the present invention.
- FIG. 8 is an illustration of an example DIV element, wherein a top hidden DIV element and a bottom hidden DIV element are shown.
- FIG. 9 is an example logical flow diagram illustrating a method for resizing the height of a DIV element, while preserving its ability to dynamically size to Web content via a browser using a Web-based authoring tool.
- FIG. 10 is an illustration of an example DIV element containing an upper resize marker which may be utilized to vertically resize a DIV element.
- FIG. 11 is an illustration of a cell containing a DIV element and a hidden padding DIV element used for vertically resizing a DIV element by selecting and dragging an upper resize marker.
- FIG. 12 is an illustration of an example DIV element containing a horizontal resize marker or handle which may be utilized to horizontally resize a DIV element.
- FIG. 13 is an illustration of an example DIV element containing an eight-resize marker user interface.
- FIG. 14 is a block diagram illustrating example physical components on a computing device with which embodiments of the invention may be practiced.
- embodiments of the present invention are directed to resizing a width and/or height of a DIV element via a browser using a Web-based authoring tool, while preserving the DIV element's ability to dynamically size to Web content.
- line breaks may be utilized.
- a user selects and drags a drag-and-drop mechanism to resize a DIV element in the vertical direction
- an HTML tag for inserting a line break i.e., ⁇ br>
- ⁇ br> an HTML tag for inserting a line break
- FIG. 1 is a simplified block diagram of one embodiment of a computing architecture for creating, distributing, requesting, pulling, and displaying a Web page.
- the example system 100 may include a client computing device 110 , a distributed computing network 120 , and a remote server 130 . Greater or fewer clients, networks, and servers may be used.
- client computing device 110 may be a desktop computer, laptop computer, terminal computer, personal data assistant, cellular telephone device, or any other computing device known in the art.
- Computing device 110 may include input/output devices, a central processing unit (“CPU”), a data storage device, and a network device.
- CPU central processing unit
- computing device 110 may include a Web browser 150 .
- client and client computing device are used interchangeably.
- Remote server 130 is a computing device that may include a database server and a front-end server that is accessible to client 110 through distributed computing network 120 .
- Remote server 130 may include input/output devices, a central processing unit (“CPU”), a data storage device, and a network device.
- distributed computing network 120 is the Internet and client 110 may remotely access remote server machine 130 , which may be operable to run a Web server 140 .
- client 110 may include a Web browser application 150 , for example INTERNET EXPLORER from MICROSOFT CORPORATION of Redmond, Wash.
- the Web browser application 150 may be utilized to request a Web page from a Web server 130 , pull the page through a network 120 , and onto the client computing device 110 .
- the Web browser application 150 may be utilized to interpret the HTML tags within the Web page and accordingly display the page on a display of the client computing device 110 .
- the Web browser application 150 may also be utilized to author and/or edit HTML content.
- Web server 140 is a piece of computer software operable to respond to a Web browser's 150 request for a page, and then deliver the page to the Web browser through a distributed network 120 .
- FIGS. 2-4 illustrate an example of a current method for resizing the height of a DIV element.
- a DIV element defines logical divisions within a Web document, and may be utilized to achieve a desired structural and presentational effect by a user.
- the enclosed content may be defined as a specific section of a Web page.
- a DIV element 205 is shown containing drag-and-drop mechanisms (resize markers) 210 . Utilizing current methods, as a user selects and drags a resize marker 210 , the pixel height of the DIV element is defined.
- the pixel height of the DIV element may be defined inside the code. For example, if a user selects and drags a resize marker 210 to manipulate the height of a DIV element 205 , the resulting height of the DIV element may become part of the underlying HTML code that describes how the DIV element should be formatted.
- FIG. 3 is an example of the underlying HTML code of a Web page.
- the DIV element 205 of FIG. 2 is defined in the code by an HTML tag ⁇ div>. Within the brackets of the DIV element's HTML tag, the DIV element's 205 dimensions are defined.
- the resulting height 310 of the DIV element 205 after resizing is defined as 101px. With the height 310 of the DIV element set inside the code, the height is no longer dynamic. If content inside the DIV element 310 does not fit within the set size of the DIV element, the content may either be cut off by the dimensions of the DIV element or flow out of the DIV element and into other content.
- FIG. 4 is an illustration of the example DIV element 205 of FIG. 2 containing Web content 405 .
- the content 405 inside the DIV element 205 exceeds the set dimensions of the DIV element.
- the DIV element Upon setting the height 310 of the DIV element 205 , the DIV element loses the ability to adjust to any dynamic Web content 405 .
- the text 405 has flowed out of the DIV element 205 .
- the overflow of text 410 is shown in FIG. 4 .
- a DIV element's 205 height dimension 310 is set inside the code, and if the content 405 is any larger than the set dimensions, it may overlap another DIV element on the Web page, which may destroy the layout and design of a Web page.
- FIGS. 5-7 illustrate an example of how embodiments of the present invention may be utilized for resizing the height of a DIV element while maintaining the integrity of a Web page's layout and design.
- an intuitive user interface may be utilized to resize a DIV element 205 .
- a user may select and drag a lower resize marker 510 up or down to increase or decrease the height of a DIV element 205 .
- a user may select a lower resize marker 510 by various ways known in the art.
- a keyboard's UP and Down keys may be utilized to resize a DIV element 205 should a user tab to a DIV element's lower resize marker 510 .
- the terms “click-and-drag” and “select-and-drag” may be used interchangeably.
- FIG. 6 is an illustration of an example HTML code for an example DIV element 205 whose height has been resized utilizing embodiments of the present invention.
- one or more line breaks ( ⁇ br>) 605 may be appended to the end of the DIV element's Web content.
- various terms may be used to describe the HTML tag ⁇ br> 605 , such as, line break, new line character, carriage return, new line, etc.
- the term “line break” will be used herein in reference to the HTML tag ⁇ br> 605 , which may be utilized to specify a line break within Web content.
- more line breaks 605 may be appended to the end of the DIV element's Web content.
- one or more line breaks ( ⁇ br>) 605 may be removed from the end of the DIV element's Web content.
- FIG. 7 is an illustration of the example DIV element 205 of FIG. 5 that has been resized utilizing embodiments of the present invention.
- Content 405 has been added to the DIV element 205 , and as can be seen in FIG. 7 , the content does not overflow the DIV element.
- the Web content 405 does not run out of the DIV element 205 , nor does it interfere with the layout of the Web page, as in the previous example illustrated in FIG. 4 .
- two hidden DIV elements are utilized to provide precise pixel height limits, which determines at what point a line break 605 should be incremented or decremented as a user drags a lower resize marker 510 to resize a DIV element.
- FIG. 8 is an illustration of an example DIV element 205 , wherein a top hidden DIV element 805 and a bottom hidden DIV element 810 are shown.
- a top hidden DIV element 805 and a bottom hidden DIV element 810 may be set to the precise left/top anchor point of the DIV element 205 to be resized.
- the two hidden DIV elements 805 , 810 have the same width as the original DIV element 205 , as well as the same HTML content 405 .
- the difference between the hidden DIV elements and the original DIV element is that the top hidden DIV element 805 has one less line break HTML tag ( ⁇ br>) 605 than the original DIV element 205 , and the bottom hidden DIV element 810 has one more line break ⁇ br> 605 than the original DIV element 205 .
- the two hidden DIV elements 805 , 810 establish an upper and lower pixel height boundary 815 , 820 .
- the cursor's X/Y position may be continually sampled via a scripting language, such as JAVASCRIPT by SUN MICROSYSTEMS.
- ⁇ br>s 605 may be removed from the end of the original DIV element's 205 HTML content 405 . If at any point a cursor's Y position crosses the bottom hidden DIV element's lower boundary 820 , then one or more ⁇ br>s 605 may be appended to the end of the original DIV element's 205 HTML content 405 .
- the two hidden DIV elements' 805 , 810 lower boundaries 815 , 820 may be reestablished, and the process of resizing may be repeated.
- a DIV element's 205 height cannot be shorter than its content.
- the HTML content 405 may be checked for line breaks 605 at the end of the content. If the content does not include a line break 605 at the end, then the top hidden DIV element's lower boundary 815 may not be established, and the DIV element's 205 height may not be moved beyond the boundary of content 405 .
- FIG. 9 is an example logical flow diagram illustrating a method for resizing the height of a DIV element, while preserving its ability to dynamically size to Web content as described above.
- the method 900 begins at operation 905 and proceeds to operation 910 where a Web site authoring software system receives an indication to resize a DIV element 205 vertically.
- a user may give an indication to resize a DIV element 205 by various means, such as utilizing a mouse and performing a click-and-drag operation on a lower resize marker 510 , by utilizing a keyboard and tabbing to a lower resize marker and then using the UP and/or DOWN keys, by utilizing touch or multi-touch technology, or by other various means known in the art.
- the method proceeds to operation 915 where two hidden DIV elements (top and bottom) 805 , 810 are created.
- the two hidden DIV elements 805 , 810 are operative to establish an upper and lower pixel boundary 815 , 820 used to determine when a line break ( ⁇ br>) 605 may be added to or removed from the DIV element's HTML content 405 .
- the bottom hidden DIV element 810 is set to the left/top anchor point of the original DIV element 205 .
- the width of the bottom hidden DIV element 810 is set to equal the width of the original DIV element 205 .
- the HTML content 405 of the original DIV element 205 is replicated in the bottom hidden DIV element 810 , and a line break ( ⁇ br>) 605 is appended to the end.
- the top hidden DIV element 805 is set to the left/top anchor point of the original DIV element 205 .
- the width of the top hidden DIV element 805 is set to equal the width of the original DIV element 205 .
- the HTML content 405 of the original DIV element 205 is replicated in the top hidden DIV element 805 .
- a line break ( ⁇ br>) 605 is at the end of the replicated HTML content 405 , then the method proceeds to operation 945 where a line break ( ⁇ br>) 605 is removed from the end of the content.
- the method proceeds from operations 945 and 950 to operation 955 where the cursor's Y axis coordinates are continually checked and a determination is made whether it reaches either of the upper or lower boundaries 815 , 820 provided by the hidden DIV elements 805 , 810 .
- the system checks to see if the cursor's Y position has crossed the top hidden DIV element's lower boundary 815 . If it has, the method proceeds to operation 970 , where one or more line breaks ( ⁇ br>) 605 is/are removed from the end of the DIV element's 205 HTML content 405 . If the cursor's Y position has not crossed the top hidden DIV element's lower boundary 815 at operation 960 , the method goes back to operation 955 , where the cursor's Y position is continually checked.
- the system checks to see if the cursor's Y position has crossed the bottom hidden DIV element's lower boundary 820 . If it has, the method proceeds to operation 975 , where one or more line breaks ( ⁇ br>) 605 is/are appended to the end of the DIV element's 205 HTML content 405 . If the cursor's Y position has not crossed the top hidden DIV element's lower boundary 815 at operation 965 , the method goes back to operation 955 , where the cursor's Y position is continually checked.
- the method proceeds from operations 970 and 975 to operation 980 where the hidden DIV elements 805 , 810 are reset.
- the method ends at operation 990 .
- a user may click-and-drag on an upper resize marker to resize a DIV element 205 .
- a user may select an upper resize marker 1005 and drag the marker up or down to vertically resize a DIV element 205 .
- the method of resizing a DIV element 205 using an upper resize marker 1005 is different than utilizing a lower resize marker 205 .
- a zone is a DIV element that is enclosed by a table cell. Zones are containers in which a user may place Web content. Collectively, zones may form an entire Web site.
- a table may consist of a variable number of cells, and only some cells may contain zones. Referring now to FIG. 11 , a zone cell 1105 is shown. Within a cell, a zone may be represented as a DIV element 205 . Currently, these DIV elements 205 take up the full vertical extent of a cell. According to embodiments of the present invention, to allow for vertical resizing, a hidden padding DIV 1110 may be added to the top of each zone DIV element 205 .
- a zone DIV element 205 By manipulating the pixel height of a hidden padding DIV element 1110 , a zone DIV element 205 can be moved vertically and create vertical gaps. Referring still to FIG. 11 , the bottom border 1115 of the zone DIV element 205 is touching the bottom of the cell 1105 . This is because the cell 1105 sizes to its content 405 .
- the height of a cell, and ultimately, of a table row may be determined by the combined height of a hidden padding DIV element 1110 and a zone DIV element 205 . As more content 405 is added, the layout may expand vertically while preserving the table architecture.
- a user drags an upper resize box 1005 to resize a DIV element 205 like in previous embodiments described earlier, line breaks ⁇ br> 605 may be added or removed; however, in addition, a hidden padding DIV element 1110 may also be utilized.
- two hidden DIV elements 805 , 810 may be created. If a user's cursor is moved downward and crosses below a distance equivalent to the distance between the top hidden DIV element's lower boundary 815 and the zone DIV element 205 , then a determination is made to compress the zone DIV element's height.
- a line break ( ⁇ br>) 605 is at the end of the DIV element's 205 HTML content 405 , then the height of the padding DIV element 1110 may be increased by the same distance. If there is not a line break ( ⁇ br>) 605 at the end of the DIV element's 205 HTML content 405 , then no action may be taken.
- a line break ⁇ br> 605 may be appended to the end of the DIV element's 205 HTML content 405 , and the same distance may be removed from the padding DIV element 1110 .
- a padding DIV element 1110 is just one way to achieve a vertical padding effect. Various methods may be utilized to achieve the same effect.
- a user may horizontally resize a DIV element 205 utilizing a horizontal resize marker or handle.
- Current methods exist for horizontally resizing a DIV element 205 utilizing resize handles 1205 as illustrated in FIG. 12 .
- the width of the DIV element and the width of a space to its left or right may be adjusted. All widths may be maintained as a percentage of the total width of the content area of a Web page.
- each LEFT or RIGHT keystroke may be interpreted as a fixed percentage value to increment the width of a DIV element 205 .
- an eight-resize marker user interface may be achieved. As illustrated in FIG. 13 , an eight-resize marker UI is shown. By combining embodiments of horizontal resizing with vertical resizing, full resizing in four directions may be achieved. According to an embodiment, a user may select and drag on any corner resize markers 1305 to resize both the width and height of a DIV element 205 .
- FIG. 14 is a block diagram illustrating example physical components on a computing device 1400 with which embodiments of the invention may be practiced.
- Client system 110 and server system 130 and/or electronic computing devices within client system 110 and/or server system 130 may be implemented in the manner of electronic computing device 1400 .
- electronic computing device 1400 comprises a memory unit 1401 .
- Memory unit 1401 is a computer-readable data storage medium that is capable of storing data and instructions.
- Memory unit 1401 may be a variety of different types of computer-readable data storage media including, but not limited to, dynamic random access memory (DRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), reduced latency DRAM, DDR SDRAM, DDR3 SDRAM, Rambus RAM, or other types of computer-readable data storage media.
- DRAM dynamic random access memory
- DDR SDRAM double data rate synchronous dynamic random access memory
- reduced latency DRAM DDR SDRAM
- DDR3 SDRAM DDR3 SDRAM
- Rambus RAM Rambus RAM
- electronic computing device 1400 comprises a processing unit 1402 .
- processing unit 1402 may execute software instructions that cause processing unit 1402 to provide specific functionality.
- processing unit 1402 may be implemented as one or more processing cores and/or as one or more separate microprocessors.
- processing unit 1402 may be implemented as one or more Intel Corel microprocessors.
- Processing unit 1402 may be capable of executing instructions in an instruction set, such as the x86 instruction set, the POWER instruction set, a RISC instruction set, the SPARC instruction set, the IA-64 instruction set, the MIPS instruction set, or another instruction set.
- processing unit 1402 may be implemented as an application specific integrated circuit (ASIC) that provides specific functionality.
- ASIC application specific integrated circuit
- processing unit 1402 may provide specific functionality by using an ASIC and by executing software instructions.
- Electronic computing device 1400 also comprises a video interface 1404 that enables a client system 110 or a server system 130 to output video information to display device 1406 .
- Display device 1406 may be a variety of different types of display devices. For instance, display device 1406 may be a cathode-ray tube display, an LCD display panel, a plasma screen display panel, a touch-sensitive display panel, a LED array, or another type of display device.
- Non-volatile storage device 1408 is a computer-readable data storage medium that is capable of storage data and/or instructions.
- Non-volatile storage device 1408 may be a variety of different types of different non-volatile storage devices.
- non-volatile storage device 1408 may be one or more hard disk drives, magnetic tape drives, CD-ROM drives, DVD-ROM drives, Blu-Ray disc drives, or other types on non-volatile storage devices.
- Electronic computing device 1400 also includes an external component interface 1410 that enables client system 110 and server system 130 to communicate with external components. As illustrated in the example of FIG. 14 , external component interface 1410 communicates with an input device 1412 and an external storage device 1414 . In one implementation of electronic computing device 1400 , external component interface 1410 is a Universal Serial Bus (USB) interface. In other implementations of electronic computing device 1400 , electronic computing device 1400 may include another type of interface that enables electronic computing device 1400 to communicate with input device and/or output devices. For instance, electronic computing device 1400 may include a PS/2 interface.
- USB Universal Serial Bus
- Input device 1412 may be a variety of different types of devices including, but not limited to, keyboards, mice, trackballs, stylus input devices, touch pads, touch-sensitive display devices, touch-sensitive display screens, or other types of input devices.
- External storage device 1414 may be a variety of different types of computer-readable data storage media including magnetic tape, flash memory modules, magnetic disk drives, optical disc drives, and other computer-readable data storage media.
- electronic computing device 1400 includes a network interface 1416 that enables electronic computing device 1400 to send data to and receive data from network 120 .
- Network interface 1416 may be a variety of different types of network interface.
- network interface 1416 may be an Ethernet interface, a token-ring interface, a fiber optic interface, a wireless network interface (e.g. WiFi, WiMax, etc.), or another type of network interface.
- network interface 1416 may be operable to accessing and utilizing a remote application 140 stored on a remote server 130 .
- Electronic computing device 1400 also includes a communications medium 1418 that facilitates communication among the various components of electronic computing device 1400 .
- Communications medium 1418 may comprise one or more different types of communication media including, but not limited to, a PCI bus, a PCI Express bus, an accelerated graphics port (AGP) bus, an Infiniband interconnect, a serial Advanced Attachment (ATA) interconnect, a parallel ATA interconnect, a Fiber Channel interconnect, a USB bus, a Small Computer System Interface (SCSI) interface, or another type of communications medium.
- FIG. 14 Several computer-readable data storage media are illustrated in the example of FIG. 14 (i.e. memory unit 1401 , non-volatile storage device 1408 , and external storage device 1414 ). Together, these computer-readable data storage media may constitute a single logical computer-readable data storage medium.
- This single logical computer-readable data storage medium may store instructions executable by processing unit 1402 . Actions described in the above description may result from the execution of the instructions stored on this single logical computer-readable data storage medium. Thus, when this description says that a particular logical module performs a particular action, such a statement may be interpreted to mean that instructions of the software module cause a processing unit, such as processing unit 1402 , to perform the action.
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
Embodiments of the present invention provide for vertically and/or horizontally resizing a zone or DIV element of a Web page via a browser-based Web authoring tool, while preserving a DIV element's ability to dynamically size to its Web content. Drag and drop vertical resizing of a DIV element is accomplished by creating two hidden DIV elements that are set to the specific left/top anchor, width, and altered HTML content of the DIV element to be resized. The two hidden DIV elements provide specific top and bottom pixel height limits to determine when a line break should be appended or decremented to the original DIV element's HTML content. By utilizing line breaks to vertically resize, a DIV element maintains its capability of sizing to dynamic Web content.
Description
- This is a continuation application of application Ser. No. 12/487,859, filed Jun. 19, 2009, and titled RESIZING AN EDITABLE AREA IN A WEB PAGE.
- As the Web has progressed since its creation, the markup languages used to format a Web page have also progressed. Hypertext Markup Language (HTML), the predominant markup language for Web pages, has progressed from only giving Websites basic structure of headings and paragraphs to become more complex and flexible, allowing users to add objects, such as images and tables, to a page.
- Various Web site authoring tools or applications exist, which aid in Web page creation and design. Some Web site authoring tools may be implemented via a Web browser. These tools are typically more limited in functionality as compared to client-based tools. Many browser-based Web authoring tools either rely on a user to understand how to write code to create a Web site, or on the other hand, allow a user to enter data and drag-and-drop objects into a pre-designed Website template, requiring no HTML knowledge.
- If a user understands how to write code to create a Web site, he/she can start with a blank page and create a completely customized Web page. With a pre-designed Web site, the design is typically set, and a user simply inserts the data he/she wants into text frames included in the template. A need exists for a negotiation between these two design extremes, giving a user more capability to design a Web site and to affect the layout without requiring him/her to understand the underlying code beneath the surface.
- Most modern Web pages are constructed with multiple zones. A zone may be an HTML DIV element that is enclosed by a table cell. DIV elements are containers in which a user may place Web content. Collectively, zones may form an entire Web site. The terms “zone” and “DIV element” may be used interchangeably herein. When designing a Web site, a user must account for several factors that he/she has no control of when his/her Web site is viewed on the Web, for example, the size of the browser window, the Web browser used, the input devices used, and the size, design, and other characteristics of the fonts users have available on their own computers. This means that the content is dynamic; it may change in size and hence, underlying DIV elements must also change in size in order to contain all of the data and preserve the design of a Web site. A user may choose to control the appearance of the elements on a screen by specifying the width of DIV elements. If the width of a DIV element is specified, the height remains variable, and the contents may wrap at the specified width. Thus, regardless of which browser or screen resolution is used, the contents within the DIV element will wrap at the specified width, and the integrity of the Web page design is preserved.
- A user may choose to specify a height of a DIV element in addition to a width. Web site editing tools exist for allowing for the vertical resizing of DIV elements; however, such tools accomplish vertical resizing by setting a cascading style sheet (CSS) height attribute of the DIV element. By setting the CSS height attribute of a DIV element, the DIV element becomes fixed, and is unable to size to dynamic Web content. For example, if an individual is viewing a Web page with a DIV element containing a specified width and height, and if the individual has his text display size set at a large size, the content contained within the DIV element may either be cut off by the dimensions of the DIV element, or may flow out of the DIV element and into other content. In either case, the intent of the Web design may be destroyed.
- It is with respect to these and other considerations that the present invention has been made.
- Embodiments of the present invention are directed to resizing a height and/or a width of a DIV element, while preserving its ability to dynamically size to Web content utilizing a browser-based Web authoring tool. A user may select and drag a drag-and-drop mechanism to resize a DIV element. To achieve vertical resizing, a drag-and-drop mechanism may be moved either up or down, which may either increment or decrement line breaks in the DIV element's content. The process of incrementing or decrementing line breaks may increase or decrease the vertical height of a DIV element.
- The details of one or more embodiments are set forth in the accompanying drawings and description below. Other features and advantages will be apparent from a reading of the following detailed description and a review of the associated drawings. It is to be understood that the following detailed description is explanatory only and is not restrictive of the invention as claimed.
- This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the detailed description. This summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended as an aid in determining the scope of the claimed subject matter.
-
FIG. 1 is a simplified block diagram of a computing architecture in which embodiments of the present invention may be implemented. -
FIG. 2 is an illustration of an example DIV element containing drag-and-drop mechanisms (resize markers). -
FIG. 3 is an illustration of an example HTML code for a DIV element which has been resized utilizing current methods. -
FIG. 4 is an illustration of the example DIV element ofFIG. 2 , which has been resized utilizing current methods, and contains text that has overflowed the DIV element. -
FIG. 5 is another illustration of an example DIV element containing drag-and-drop mechanisms (resize markers). -
FIG. 6 is an illustration of an example HTML code for a DIV element which has been resized utilizing embodiment of the present invention. -
FIG. 7 is an illustration of the example DIV element ofFIG. 5 , which has been resized utilizing embodiments of the present invention. -
FIG. 8 is an illustration of an example DIV element, wherein a top hidden DIV element and a bottom hidden DIV element are shown. -
FIG. 9 is an example logical flow diagram illustrating a method for resizing the height of a DIV element, while preserving its ability to dynamically size to Web content via a browser using a Web-based authoring tool. -
FIG. 10 is an illustration of an example DIV element containing an upper resize marker which may be utilized to vertically resize a DIV element. -
FIG. 11 is an illustration of a cell containing a DIV element and a hidden padding DIV element used for vertically resizing a DIV element by selecting and dragging an upper resize marker. -
FIG. 12 is an illustration of an example DIV element containing a horizontal resize marker or handle which may be utilized to horizontally resize a DIV element. -
FIG. 13 is an illustration of an example DIV element containing an eight-resize marker user interface. -
FIG. 14 is a block diagram illustrating example physical components on a computing device with which embodiments of the invention may be practiced. - As briefly described above, embodiments of the present invention are directed to resizing a width and/or height of a DIV element via a browser using a Web-based authoring tool, while preserving the DIV element's ability to dynamically size to Web content. To achieve the resizing of a DIV element's height while preserving its ability to dynamically size to its content, line breaks may be utilized. According to an embodiment, when a user selects and drags a drag-and-drop mechanism to resize a DIV element in the vertical direction, an HTML tag for inserting a line break (i.e., <br>) is inserted or removed from the underlying HTML document, which a Web browser reads, interprets, and accordingly displays as a Web page. By incrementing and/or decrementing line breaks (<br>) within a DIV element, the DIV element's ability to dynamically resize to its content is preserved.
- The following detailed description refers to the accompanying drawings. Wherever possible, the same reference numbers are used in the drawing and the following description to refer to the same or similar elements. While embodiments of the invention may be described, modifications, adaptations, and other implementations are possible. For example, substitutions, additions, or modifications may be made to the elements illustrated in the drawings, and the methods described herein may be modified by substituting, reordering, or adding stages to the disclosed methods. Accordingly, the following detailed description does not limit the invention, but instead, the proper scope of the invention is defined by the appended claims.
-
FIG. 1 is a simplified block diagram of one embodiment of a computing architecture for creating, distributing, requesting, pulling, and displaying a Web page. Theexample system 100 may include aclient computing device 110, a distributedcomputing network 120, and aremote server 130. Greater or fewer clients, networks, and servers may be used. - In example embodiments,
client computing device 110 may be a desktop computer, laptop computer, terminal computer, personal data assistant, cellular telephone device, or any other computing device known in the art.Computing device 110 may include input/output devices, a central processing unit (“CPU”), a data storage device, and a network device. According to an embodiment,computing device 110 may include aWeb browser 150. In the present disclosure, the terms client and client computing device are used interchangeably. -
Remote server 130 is a computing device that may include a database server and a front-end server that is accessible toclient 110 through distributedcomputing network 120.Remote server 130 may include input/output devices, a central processing unit (“CPU”), a data storage device, and a network device. In example embodiments, distributedcomputing network 120 is the Internet andclient 110 may remotely accessremote server machine 130, which may be operable to run aWeb server 140. - According to an embodiment,
client 110 may include aWeb browser application 150, for example INTERNET EXPLORER from MICROSOFT CORPORATION of Redmond, Wash. TheWeb browser application 150 may be utilized to request a Web page from aWeb server 130, pull the page through anetwork 120, and onto theclient computing device 110. TheWeb browser application 150 may be utilized to interpret the HTML tags within the Web page and accordingly display the page on a display of theclient computing device 110. TheWeb browser application 150 may also be utilized to author and/or edit HTML content. - According to an embodiment,
Web server 140 is a piece of computer software operable to respond to a Web browser's 150 request for a page, and then deliver the page to the Web browser through a distributednetwork 120. - Having described an
example system 100 of an embodiment of a computing architecture in which embodiments of the present invention may be utilized,FIGS. 2-4 illustrate an example of a current method for resizing the height of a DIV element. As described previously, a DIV element defines logical divisions within a Web document, and may be utilized to achieve a desired structural and presentational effect by a user. When a DIV element is used, the enclosed content may be defined as a specific section of a Web page. Referring now toFIG. 2 , aDIV element 205 is shown containing drag-and-drop mechanisms (resize markers) 210. Utilizing current methods, as a user selects and drags aresize marker 210, the pixel height of the DIV element is defined. When a DIV element's height is resized via a selection and dragging of aresize marker 210, the pixel height of the DIV element may be defined inside the code. For example, if a user selects and drags aresize marker 210 to manipulate the height of aDIV element 205, the resulting height of the DIV element may become part of the underlying HTML code that describes how the DIV element should be formatted. -
FIG. 3 is an example of the underlying HTML code of a Web page. As shown inFIG. 3 , theDIV element 205 ofFIG. 2 is defined in the code by an HTML tag <div>. Within the brackets of the DIV element's HTML tag, the DIV element's 205 dimensions are defined. As shown on line 12 of the HTML code, the resultingheight 310 of theDIV element 205 after resizing is defined as 101px. With theheight 310 of the DIV element set inside the code, the height is no longer dynamic. If content inside theDIV element 310 does not fit within the set size of the DIV element, the content may either be cut off by the dimensions of the DIV element or flow out of the DIV element and into other content. -
FIG. 4 is an illustration of theexample DIV element 205 ofFIG. 2 containingWeb content 405. As shown inFIG. 4 , thecontent 405 inside theDIV element 205 exceeds the set dimensions of the DIV element. Upon setting theheight 310 of theDIV element 205, the DIV element loses the ability to adjust to anydynamic Web content 405. In this example, thetext 405 has flowed out of theDIV element 205. The overflow oftext 410 is shown inFIG. 4 . When a DIV element's 205height dimension 310 is set inside the code, and if thecontent 405 is any larger than the set dimensions, it may overlap another DIV element on the Web page, which may destroy the layout and design of a Web page. -
FIGS. 5-7 illustrate an example of how embodiments of the present invention may be utilized for resizing the height of a DIV element while maintaining the integrity of a Web page's layout and design. As shown inFIG. 5 , an intuitive user interface (UI) may be utilized to resize aDIV element 205. A user may select and drag alower resize marker 510 up or down to increase or decrease the height of aDIV element 205. As should be appreciated, a user may select alower resize marker 510 by various ways known in the art. According to an embodiment, a keyboard's UP and Down keys may be utilized to resize aDIV element 205 should a user tab to a DIV element'slower resize marker 510. Although various methods exist for selecting and dragging alower resize marker 510, the terms “click-and-drag” and “select-and-drag” may be used interchangeably. -
FIG. 6 is an illustration of an example HTML code for anexample DIV element 205 whose height has been resized utilizing embodiments of the present invention. According to an embodiment, when the height of aDIV element 205 is increased, one or more line breaks (<br>) 605 may be appended to the end of the DIV element's Web content. As should be appreciated, various terms may be used to describe the HTML tag <br> 605, such as, line break, new line character, carriage return, new line, etc. The term “line break” will be used herein in reference to the HTML tag <br> 605, which may be utilized to specify a line break within Web content. According to an embodiment, as a DIV element's 205 height is increased, more line breaks 605 may be appended to the end of the DIV element's Web content. - According to another embodiment, when the height of a
DIV element 205 is decreased, one or more line breaks (<br>) 605 may be removed from the end of the DIV element's Web content. -
FIG. 7 is an illustration of theexample DIV element 205 ofFIG. 5 that has been resized utilizing embodiments of the present invention.Content 405 has been added to theDIV element 205, and as can be seen inFIG. 7 , the content does not overflow the DIV element. According to an embodiment, when height is added to aDIV element 205 by adding line breaks 605 as opposed to specifying aheight dimension 310 of the DIV element, it may dynamically size itself to itscontent 405. Referring still toFIG. 7 , theWeb content 405 does not run out of theDIV element 205, nor does it interfere with the layout of the Web page, as in the previous example illustrated inFIG. 4 . - According to an embodiment, two hidden DIV elements are utilized to provide precise pixel height limits, which determines at what point a
line break 605 should be incremented or decremented as a user drags alower resize marker 510 to resize a DIV element. -
FIG. 8 is an illustration of anexample DIV element 205, wherein a tophidden DIV element 805 and a bottom hiddenDIV element 810 are shown. According to an embodiment, a tophidden DIV element 805 and a bottom hiddenDIV element 810 may be set to the precise left/top anchor point of theDIV element 205 to be resized. The twohidden DIV elements original DIV element 205, as well as thesame HTML content 405. The difference between the hidden DIV elements and the original DIV element is that the tophidden DIV element 805 has one less line break HTML tag (<br>) 605 than theoriginal DIV element 205, and the bottom hiddenDIV element 810 has one more line break <br> 605 than theoriginal DIV element 205. In effect, the twohidden DIV elements pixel height boundary - According to an embodiment, as a
lower resize marker 510 is clicked-and-dragged, the cursor's X/Y position may be continually sampled via a scripting language, such as JAVASCRIPT by SUN MICROSYSTEMS. - If at any point a cursor's Y position crosses the top hidden DIV element's
lower boundary 815, and if aline break 605 is present, then one or more <br>s 605 may be removed from the end of the original DIV element's 205HTML content 405. If at any point a cursor's Y position crosses the bottom hidden DIV element'slower boundary 820, then one or more <br>s 605 may be appended to the end of the original DIV element's 205HTML content 405. When aDIV element 205 is resized, the two hidden DIV elements' 805,810lower boundaries - According to an embodiment, a DIV element's 205 height cannot be shorter than its content. The
HTML content 405 may be checked forline breaks 605 at the end of the content. If the content does not include aline break 605 at the end, then the top hidden DIV element'slower boundary 815 may not be established, and the DIV element's 205 height may not be moved beyond the boundary ofcontent 405. - Having described embodiments of the present invention with respect to
FIGS. 1-8 ,FIG. 9 is an example logical flow diagram illustrating a method for resizing the height of a DIV element, while preserving its ability to dynamically size to Web content as described above. - The
method 900 begins atoperation 905 and proceeds tooperation 910 where a Web site authoring software system receives an indication to resize aDIV element 205 vertically. A user may give an indication to resize aDIV element 205 by various means, such as utilizing a mouse and performing a click-and-drag operation on alower resize marker 510, by utilizing a keyboard and tabbing to a lower resize marker and then using the UP and/or DOWN keys, by utilizing touch or multi-touch technology, or by other various means known in the art. - Once the system receives an indication to resize a
DIV element 205, the method proceeds tooperation 915 where two hidden DIV elements (top and bottom) 805,810 are created. The twohidden DIV elements lower pixel boundary HTML content 405. - At
operation 920, the bottom hiddenDIV element 810 is set to the left/top anchor point of theoriginal DIV element 205. The width of the bottom hiddenDIV element 810 is set to equal the width of theoriginal DIV element 205. - At
operation 925, theHTML content 405 of theoriginal DIV element 205 is replicated in the bottom hiddenDIV element 810, and a line break (<br>) 605 is appended to the end. - At
operation 930, the tophidden DIV element 805 is set to the left/top anchor point of theoriginal DIV element 205. The width of the tophidden DIV element 805 is set to equal the width of theoriginal DIV element 205. - At
operation 935, theHTML content 405 of theoriginal DIV element 205 is replicated in the tophidden DIV element 805. - At
operation 940, a determination is made to see if a line break (<br>) 605 is at the end of the replicatedHTML content 405. - If a line break (<br>) 605 is at the end of the replicated
HTML content 405, then the method proceeds tooperation 945 where a line break (<br>) 605 is removed from the end of the content. - If a line break (<br>) 605 is not at the end of the replicated
HTML content 405, then the method proceeds tooperation 950 where all theHTML content 405 is removed from the tophidden DIV element 805. - The method proceeds from
operations operation 955 where the cursor's Y axis coordinates are continually checked and a determination is made whether it reaches either of the upper orlower boundaries DIV elements - At
operation 960, the system checks to see if the cursor's Y position has crossed the top hidden DIV element'slower boundary 815. If it has, the method proceeds tooperation 970, where one or more line breaks (<br>) 605 is/are removed from the end of the DIV element's 205HTML content 405. If the cursor's Y position has not crossed the top hidden DIV element'slower boundary 815 atoperation 960, the method goes back tooperation 955, where the cursor's Y position is continually checked. - At
operation 965, the system checks to see if the cursor's Y position has crossed the bottom hidden DIV element'slower boundary 820. If it has, the method proceeds tooperation 975, where one or more line breaks (<br>) 605 is/are appended to the end of the DIV element's 205HTML content 405. If the cursor's Y position has not crossed the top hidden DIV element'slower boundary 815 atoperation 965, the method goes back tooperation 955, where the cursor's Y position is continually checked. - The method proceeds from
operations operation 980 where the hiddenDIV elements - The method ends at
operation 990. - According to another embodiment of the present invention, a user may click-and-drag on an upper resize marker to resize a
DIV element 205. Referring toFIG. 10 , a user may select anupper resize marker 1005 and drag the marker up or down to vertically resize aDIV element 205. The method of resizing aDIV element 205 using anupper resize marker 1005 is different than utilizing alower resize marker 205. - As described above, most modern Web pages are constructed with multiple zones. A zone is a DIV element that is enclosed by a table cell. Zones are containers in which a user may place Web content. Collectively, zones may form an entire Web site. A table may consist of a variable number of cells, and only some cells may contain zones. Referring now to
FIG. 11 , azone cell 1105 is shown. Within a cell, a zone may be represented as aDIV element 205. Currently, theseDIV elements 205 take up the full vertical extent of a cell. According to embodiments of the present invention, to allow for vertical resizing, ahidden padding DIV 1110 may be added to the top of eachzone DIV element 205. By manipulating the pixel height of a hiddenpadding DIV element 1110, azone DIV element 205 can be moved vertically and create vertical gaps. Referring still toFIG. 11 , thebottom border 1115 of thezone DIV element 205 is touching the bottom of thecell 1105. This is because thecell 1105 sizes to itscontent 405. The height of a cell, and ultimately, of a table row may be determined by the combined height of a hiddenpadding DIV element 1110 and azone DIV element 205. Asmore content 405 is added, the layout may expand vertically while preserving the table architecture. - If a user drags an
upper resize box 1005 to resize aDIV element 205, like in previous embodiments described earlier, line breaks <br> 605 may be added or removed; however, in addition, a hiddenpadding DIV element 1110 may also be utilized. Upon a user selecting anupper resize marker 1005, twohidden DIV elements lower boundary 815 and thezone DIV element 205, then a determination is made to compress the zone DIV element's height. If a line break (<br>) 605 is at the end of the DIV element's 205HTML content 405, then the height of thepadding DIV element 1110 may be increased by the same distance. If there is not a line break (<br>) 605 at the end of the DIV element's 205HTML content 405, then no action may be taken. - If a user's cursor is moved upward and crosses above a distance equivalent to the distance between the bottom hidden DIV element's
lower boundary 820 and thezone DIV element 205, then a determination is made to stretch the zone DIV element's height. Accordingly, a line break <br> 605 may be appended to the end of the DIV element's 205HTML content 405, and the same distance may be removed from thepadding DIV element 1110. - It should be appreciated that a
padding DIV element 1110 is just one way to achieve a vertical padding effect. Various methods may be utilized to achieve the same effect. - According to another embodiment, a user may horizontally resize a
DIV element 205 utilizing a horizontal resize marker or handle. Current methods exist for horizontally resizing aDIV element 205 utilizingresize handles 1205 as illustrated inFIG. 12 . When a user selects and moves a left or aright resize handle 1205 of aDIV element 205, the width of the DIV element and the width of a space to its left or right may be adjusted. All widths may be maintained as a percentage of the total width of the content area of a Web page. If a user utilizes a mouse or other selection mechanism to move ahorizontal resize handle 1205, the distance the handle is moved in pixels is converted to an appropriate proportion of the total width of the content area. The proportion is used as an increment to the width of theDIV element 205, and as a decrement to the width of an adjacent space. If a user utilizes a keyboard to move ahorizontal resize handle 1205, each LEFT or RIGHT keystroke may be interpreted as a fixed percentage value to increment the width of aDIV element 205. - By combining embodiments of the present invention with embodiments of horizontal resizing methods, an eight-resize marker user interface (UI) may be achieved. As illustrated in
FIG. 13 , an eight-resize marker UI is shown. By combining embodiments of horizontal resizing with vertical resizing, full resizing in four directions may be achieved. According to an embodiment, a user may select and drag on any corner resizemarkers 1305 to resize both the width and height of aDIV element 205. - Having described embodiments of the present invention and an example logical flow illustrating a method for resizing the height of a DIV element while preserving its ability to dynamically size to Web content,
FIG. 14 is a block diagram illustrating example physical components on acomputing device 1400 with which embodiments of the invention may be practiced.Client system 110 andserver system 130 and/or electronic computing devices withinclient system 110 and/orserver system 130 may be implemented in the manner ofelectronic computing device 1400. As illustrated in the example ofFIG. 14 ,electronic computing device 1400 comprises amemory unit 1401.Memory unit 1401 is a computer-readable data storage medium that is capable of storing data and instructions.Memory unit 1401 may be a variety of different types of computer-readable data storage media including, but not limited to, dynamic random access memory (DRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), reduced latency DRAM, DDR SDRAM, DDR3 SDRAM, Rambus RAM, or other types of computer-readable data storage media. - In addition,
electronic computing device 1400 comprises aprocessing unit 1402. In a first example,processing unit 1402 may execute software instructions that causeprocessing unit 1402 to provide specific functionality. In this first example,processing unit 1402 may be implemented as one or more processing cores and/or as one or more separate microprocessors. For instance, in this first example,processing unit 1402 may be implemented as one or more Intel Corel microprocessors.Processing unit 1402 may be capable of executing instructions in an instruction set, such as the x86 instruction set, the POWER instruction set, a RISC instruction set, the SPARC instruction set, the IA-64 instruction set, the MIPS instruction set, or another instruction set. In a second example,processing unit 1402 may be implemented as an application specific integrated circuit (ASIC) that provides specific functionality. In a third example,processing unit 1402 may provide specific functionality by using an ASIC and by executing software instructions. -
Electronic computing device 1400 also comprises avideo interface 1404 that enables aclient system 110 or aserver system 130 to output video information to displaydevice 1406.Display device 1406 may be a variety of different types of display devices. For instance,display device 1406 may be a cathode-ray tube display, an LCD display panel, a plasma screen display panel, a touch-sensitive display panel, a LED array, or another type of display device. - In addition,
electronic device 1402 includes anon-volatile storage device 1408.Non-volatile storage device 1408 is a computer-readable data storage medium that is capable of storage data and/or instructions.Non-volatile storage device 1408 may be a variety of different types of different non-volatile storage devices. For example,non-volatile storage device 1408 may be one or more hard disk drives, magnetic tape drives, CD-ROM drives, DVD-ROM drives, Blu-Ray disc drives, or other types on non-volatile storage devices. -
Electronic computing device 1400 also includes anexternal component interface 1410 that enablesclient system 110 andserver system 130 to communicate with external components. As illustrated in the example ofFIG. 14 ,external component interface 1410 communicates with aninput device 1412 and anexternal storage device 1414. In one implementation ofelectronic computing device 1400,external component interface 1410 is a Universal Serial Bus (USB) interface. In other implementations ofelectronic computing device 1400,electronic computing device 1400 may include another type of interface that enableselectronic computing device 1400 to communicate with input device and/or output devices. For instance,electronic computing device 1400 may include a PS/2 interface.Input device 1412 may be a variety of different types of devices including, but not limited to, keyboards, mice, trackballs, stylus input devices, touch pads, touch-sensitive display devices, touch-sensitive display screens, or other types of input devices.External storage device 1414 may be a variety of different types of computer-readable data storage media including magnetic tape, flash memory modules, magnetic disk drives, optical disc drives, and other computer-readable data storage media. - In addition,
electronic computing device 1400 includes anetwork interface 1416 that enableselectronic computing device 1400 to send data to and receive data fromnetwork 120.Network interface 1416 may be a variety of different types of network interface. For example,network interface 1416 may be an Ethernet interface, a token-ring interface, a fiber optic interface, a wireless network interface (e.g. WiFi, WiMax, etc.), or another type of network interface. As should be appreciated,network interface 1416 may be operable to accessing and utilizing aremote application 140 stored on aremote server 130. -
Electronic computing device 1400 also includes a communications medium 1418 that facilitates communication among the various components ofelectronic computing device 1400. Communications medium 1418 may comprise one or more different types of communication media including, but not limited to, a PCI bus, a PCI Express bus, an accelerated graphics port (AGP) bus, an Infiniband interconnect, a serial Advanced Attachment (ATA) interconnect, a parallel ATA interconnect, a Fiber Channel interconnect, a USB bus, a Small Computer System Interface (SCSI) interface, or another type of communications medium. - Several computer-readable data storage media are illustrated in the example of
FIG. 14 (i.e.memory unit 1401,non-volatile storage device 1408, and external storage device 1414). Together, these computer-readable data storage media may constitute a single logical computer-readable data storage medium. This single logical computer-readable data storage medium may store instructions executable byprocessing unit 1402. Actions described in the above description may result from the execution of the instructions stored on this single logical computer-readable data storage medium. Thus, when this description says that a particular logical module performs a particular action, such a statement may be interpreted to mean that instructions of the software module cause a processing unit, such asprocessing unit 1402, to perform the action. - As described herein, an improved method is provided for resizing the height and/or width of a DIV element while preserving its ability to dynamically size to Web content. It will be apparent to those skilled in the art that various modifications or variations may be made in the present invention without departing from the scope or spirit of the invention. Other embodiments of the invention will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein.
Claims (19)
1. A browser configured to operate with a processor to:
use one or more resize markers for use in resizing one or more dimensions of an editable zone comprising a DIV element;
associate a first hidden DIV element and a second hidden DIV element with the editable zone comprising the DIV element in response to use of a resize marker;
replicate content contained in the DIV element into the first hidden DIV element including removing a line break tag from the end of the content replicated in the first hidden DIV element if a line break tag is at the end of the content or remove all content from the first hidden DIV element if a line break tag is not at the end of the content replicated in the first hidden DIV element;
replicate the content contained in the DIV element into the second hidden DIV element, and add a line break tag to the end of the content replicated into the second hidden DIV element;
remove one or more line break tags from the end of the content contained in the DIV element if the position of a resize marker crosses a boundary of the first hidden DIV element; and
append one or more line break tags to the end of the content contained in the DIV element if the position of the resize marker crosses a boundary of the second hidden DIV element.
2. The browser of claim 1 , further configured to control a positioning of the resize marker via a user input operation using an input type.
3. The browser of claim 1 , further configured to use a padded DIV element with the DIV element to achieve a padding effect.
4. The browser of claim 1 , further configured to reset one or more hidden DIV elements upon a completion of a vertical resizing of the DIV element.
5. The browser of claim 1 , further configured to:
use an upper resize marker as part of an upper border of the editable zone for vertically resizing the editable zone;
receive an indication of a selection of the upper resize marker for vertically resizing the editable zone;
associate a padded DIV element with the DIV element in response to receiving an indication of a selection of the upper resize marker for vertically resizing the editable zone;
remove a line break tag from the end of the content contained in the DIV element and increase a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the DIV element if a vertical position of the upper resize marker is moved downward a distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the DIV element; and
append a line break tag to the end of the content contained in the DIV element and decrease a height of the padding DIV element by the distance equivalent to a distance between the lower boundary of the top hidden DIV element and a lower boundary of the DIV element if a vertical position of the upper resize marker is moved upward a distance equivalent to the distance between the lower boundary of the bottom hidden DIV element and the DIV element.
6. The browser of claim 1 , further configured to use a horizontal resize marker along a right or left edge of the DIV element and one of expand or decrease a size of the DIV element horizontally in a direction of the movement of the horizontal resize marker.
7. The browser of claim 1 , further configured to use a corner resize marker associated with the DIV element and one of expand or decrease a size of the DIV element in a direction of the movement of the corner resize marker.
8. The browser of claim 1 , further configured as part of a computing device to provide browsing operations.
9. The browser of claim 1 , further configured to dynamically size to web content using a web authoring tool.
10. The browser of claim 1 , further configured to use a drag a drag-and-drop mechanism to resize DIV elements.
11. The browser of claim 1 , further configured to use touch and other input types to resize DIV elements.
12. The browser of claim 1 , further configured to use resizing operations to either increment or decrement line breaks in the DIV element content.
13. The browser of claim 1 , further configured to insert or remove a tag into or from an underlying document or a page as part of a resizing operation.
14. The browser of claim 1 , further configured to interact with a web server to using a distributed computer network.
15. A system comprising:
at least one processor and memory;
a browser component configured to:
provide a number of resize markers for use in resizing operations associated with an editable zone;
associate a first hidden element and a second hidden element with the editable zone based on use of a resize marker;
replicate content contained in the editable zone into the first hidden element including one of removing a line break tag from the end of the replicated content in the first hidden element if an line break tag is at the end of the content or removing all content from the first hidden element if an line break tag is not at the end of the content replicated to the first hidden element;
replicate the content contained in the editable zone into the second hidden element including adding a line break tag to the end of the content replicated into the second hidden element;
remove one or more line break tags from the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the first hidden element; and
append one or more line break tags to the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the second hidden element.
16. The system of claim 15 , wherein the browser component is further configured to control a pixel height of the editable zone based on a resize marker operation.
17. The system of claim 15 , further configured to use to click-and-drag operations, key and tabbing operations, and touch or multi-touch operations to resize the editable zone.
18. A user interface configured to:
display one or more resize markers for use in resizing one or more dimensions of an editable zone;
use a first hidden DIV element and a second hidden DIV element with the editable zone when a resize marker is in use;
replicate content contained in the editable zone into the first hidden DIV element including removing a line break tag from the end of the replicated content in the first hidden DIV element if a line break tag is at the end of the content or removing all content from the first hidden DIV element if a line break tag is not at the end of the content replicated to the first hidden DIV element;
replicate the content contained in the editable zone into the second hidden DIV element, and adding a line break tag to the end of the content replicated into the second hidden DIV element;
remove one or more line break tags from the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the first hidden DIV element; and
append one or more line break tags to the end of the content contained in the editable zone if the position of the resize marker crosses a boundary of the second hidden DIV element.
19. The user interface of claim 19 further configured to use a padded DIV element with the editable zone to achieve a padding effect.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US13/434,996 US20120210206A1 (en) | 2009-06-19 | 2012-03-30 | Resizing an editable area in a web page |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US12/487,859 US8171401B2 (en) | 2009-06-19 | 2009-06-19 | Resizing an editable area in a web page |
US13/434,996 US20120210206A1 (en) | 2009-06-19 | 2012-03-30 | Resizing an editable area in a web page |
Related Parent Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US12/487,859 Continuation US8171401B2 (en) | 2009-06-19 | 2009-06-19 | Resizing an editable area in a web page |
Publications (1)
Publication Number | Publication Date |
---|---|
US20120210206A1 true US20120210206A1 (en) | 2012-08-16 |
Family
ID=43355362
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US12/487,859 Expired - Fee Related US8171401B2 (en) | 2009-06-19 | 2009-06-19 | Resizing an editable area in a web page |
US13/434,996 Abandoned US20120210206A1 (en) | 2009-06-19 | 2012-03-30 | Resizing an editable area in a web page |
Family Applications Before (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US12/487,859 Expired - Fee Related US8171401B2 (en) | 2009-06-19 | 2009-06-19 | Resizing an editable area in a web page |
Country Status (1)
Country | Link |
---|---|
US (2) | US8171401B2 (en) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110252335A1 (en) * | 2010-04-12 | 2011-10-13 | Google Inc. | Zooming in a Web Browser |
CN106649348A (en) * | 2015-10-30 | 2017-05-10 | 北京国双科技有限公司 | Page table layout method and apparatus |
US9934208B2 (en) * | 2016-01-08 | 2018-04-03 | Adobe Systems Incorporated | Populating visual designs with web content |
Families Citing this family (47)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US7509588B2 (en) | 2005-12-30 | 2009-03-24 | Apple Inc. | Portable electronic device with interface reconfiguration mode |
US10313505B2 (en) | 2006-09-06 | 2019-06-04 | Apple Inc. | Portable multifunction device, method, and graphical user interface for configuring and displaying widgets |
US8519964B2 (en) | 2007-01-07 | 2013-08-27 | Apple Inc. | Portable multifunction device, method, and graphical user interface supporting user navigations of graphical objects on a touch screen display |
US8619038B2 (en) | 2007-09-04 | 2013-12-31 | Apple Inc. | Editing interface |
US9009612B2 (en) | 2009-06-07 | 2015-04-14 | Apple Inc. | Devices, methods, and graphical user interfaces for accessibility using a touch-sensitive surface |
US8832548B2 (en) | 2009-09-21 | 2014-09-09 | Google Inc. | System and method for selective control of zoom adjustments in an electronic publication |
EP2480957B1 (en) | 2009-09-22 | 2017-08-09 | Apple Inc. | Device, method, and graphical user interface for manipulating user interface objects |
US8438500B2 (en) * | 2009-09-25 | 2013-05-07 | Apple Inc. | Device, method, and graphical user interface for manipulation of user interface objects with activation regions |
US8832585B2 (en) | 2009-09-25 | 2014-09-09 | Apple Inc. | Device, method, and graphical user interface for manipulating workspace views |
US8421762B2 (en) * | 2009-09-25 | 2013-04-16 | Apple Inc. | Device, method, and graphical user interface for manipulation of user interface objects with activation regions |
US8780069B2 (en) | 2009-09-25 | 2014-07-15 | Apple Inc. | Device, method, and graphical user interface for manipulating user interface objects |
US8416205B2 (en) * | 2009-09-25 | 2013-04-09 | Apple Inc. | Device, method, and graphical user interface for manipulation of user interface objects with activation regions |
US8766928B2 (en) | 2009-09-25 | 2014-07-01 | Apple Inc. | Device, method, and graphical user interface for manipulating user interface objects |
US8799826B2 (en) | 2009-09-25 | 2014-08-05 | Apple Inc. | Device, method, and graphical user interface for moving a calendar entry in a calendar application |
US8793611B2 (en) * | 2010-01-06 | 2014-07-29 | Apple Inc. | Device, method, and graphical user interface for manipulating selectable user interface objects |
US9135223B2 (en) * | 2010-01-15 | 2015-09-15 | Apple Inc. | Automatically configuring white space around an object in a document |
US20110179350A1 (en) * | 2010-01-15 | 2011-07-21 | Apple Inc. | Automatically placing an anchor for an object in a document |
US8539386B2 (en) | 2010-01-26 | 2013-09-17 | Apple Inc. | Device, method, and graphical user interface for selecting and moving objects |
US8539385B2 (en) | 2010-01-26 | 2013-09-17 | Apple Inc. | Device, method, and graphical user interface for precise positioning of objects |
US8677268B2 (en) | 2010-01-26 | 2014-03-18 | Apple Inc. | Device, method, and graphical user interface for resizing objects |
US8209630B2 (en) * | 2010-01-26 | 2012-06-26 | Apple Inc. | Device, method, and graphical user interface for resizing user interface content |
US8473841B2 (en) * | 2010-03-10 | 2013-06-25 | Google Inc. | Independent visual element configuration |
US20110252349A1 (en) | 2010-04-07 | 2011-10-13 | Imran Chaudhri | Device, Method, and Graphical User Interface for Managing Folders |
US10788976B2 (en) | 2010-04-07 | 2020-09-29 | Apple Inc. | Device, method, and graphical user interface for managing folders with multiple pages |
US8707195B2 (en) | 2010-06-07 | 2014-04-22 | Apple Inc. | Devices, methods, and graphical user interfaces for accessibility via a touch-sensitive surface |
US8484562B2 (en) * | 2010-06-25 | 2013-07-09 | Apple Inc. | Dynamic text adjustment in a user interface element |
US8972879B2 (en) | 2010-07-30 | 2015-03-03 | Apple Inc. | Device, method, and graphical user interface for reordering the front-to-back positions of objects |
US9081494B2 (en) | 2010-07-30 | 2015-07-14 | Apple Inc. | Device, method, and graphical user interface for copying formatting attributes |
US9098182B2 (en) | 2010-07-30 | 2015-08-04 | Apple Inc. | Device, method, and graphical user interface for copying user interface objects between content regions |
US8869026B2 (en) * | 2010-10-29 | 2014-10-21 | Konica Minolta Laboratory U.S.A., Inc. | Using a layout engine to display an overflowed textbox |
US10789412B2 (en) | 2012-02-20 | 2020-09-29 | Wix.Com Ltd. | System and method for extended dynamic layout |
IL225016B (en) * | 2012-03-01 | 2020-03-31 | Wix Com Ltd | A method and system for the use of adjustment handles to facilitate dynamic layout editing |
US8881269B2 (en) | 2012-03-31 | 2014-11-04 | Apple Inc. | Device, method, and graphical user interface for integrating recognition of handwriting gestures with a screen reader |
US20130275873A1 (en) * | 2012-04-13 | 2013-10-17 | Qualcomm Incorporated | Systems and methods for displaying a user interface |
KR102069538B1 (en) | 2012-07-12 | 2020-03-23 | 삼성전자주식회사 | Method of composing markup for arranging multimedia component |
US20140164911A1 (en) * | 2012-12-11 | 2014-06-12 | Microsoft Corporation | Preserving layout of region of content during modification |
JP6295541B2 (en) * | 2013-08-09 | 2018-03-20 | オムロン株式会社 | Information processing apparatus, programmable display, data processing method, and program |
KR102405189B1 (en) | 2013-10-30 | 2022-06-07 | 애플 인크. | Displaying relevant user interface objects |
CN103970890B (en) * | 2014-05-23 | 2017-04-12 | 福建星网锐捷通讯股份有限公司 | Real-time webpage data generation method and device |
US9830047B2 (en) * | 2015-03-12 | 2017-11-28 | Apple | System and method for improved display of media assets in a layout |
DK201670595A1 (en) | 2016-06-11 | 2018-01-22 | Apple Inc | Configuring context-specific user interfaces |
US11816325B2 (en) | 2016-06-12 | 2023-11-14 | Apple Inc. | Application shortcuts for carplay |
CN106227709B (en) * | 2016-07-14 | 2019-03-29 | 北京小米移动软件有限公司 | Filament method for drafting, device and terminal |
KR101880507B1 (en) * | 2017-04-21 | 2018-07-20 | 주식회사 한글과컴퓨터 | Client terminal device that supports resizing of a figure embedded in a web document and operating method thereof |
KR101880508B1 (en) * | 2017-04-27 | 2018-07-20 | 주식회사 한글과컴퓨터 | Web document editing support apparatus and method for supporting list generation in web documents |
US11675476B2 (en) | 2019-05-05 | 2023-06-13 | Apple Inc. | User interfaces for widgets |
CN111177635B (en) * | 2020-01-06 | 2024-01-02 | 北京字节跳动网络技术有限公司 | Webpage display height determining method, device, storage medium and equipment |
Citations (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6603493B1 (en) * | 1999-04-13 | 2003-08-05 | International Business Machines Corporation | Method for arranging display elements |
US6760048B1 (en) * | 1999-06-15 | 2004-07-06 | International Business Machines Corporation | Display of occluded display elements on a computer display |
US6826727B1 (en) * | 1999-11-24 | 2004-11-30 | Bitstream Inc. | Apparatus, methods, programming for automatically laying out documents |
US20050071364A1 (en) * | 2003-09-30 | 2005-03-31 | Xing Xie | Document representation for scalable structure |
US7168038B2 (en) * | 2001-08-01 | 2007-01-23 | Microsoft Corporation | System and method for scaling and repositioning drawings |
US7222306B2 (en) * | 2001-05-02 | 2007-05-22 | Bitstream Inc. | Methods, systems, and programming for computer display of images, text, and/or digital content |
US20070162844A1 (en) * | 2006-01-12 | 2007-07-12 | Microsoft Corporation | Automatic layout of objects |
US20080052637A1 (en) * | 2006-07-26 | 2008-02-28 | Aol Llc, A Delaware Limited Liability Company | Window resizing in a graphical user interface |
US20080092076A1 (en) * | 2004-02-12 | 2008-04-17 | Bertram Randal L | Automatically scaling the information and controls in navigation tabs per available window area |
US20080168388A1 (en) * | 2007-01-05 | 2008-07-10 | Apple Computer, Inc. | Selecting and manipulating web content |
US20100146378A1 (en) * | 2008-12-04 | 2010-06-10 | International Business Machines Corporation | Optimize View Elements Sizes to Maximize Most Data Viewed in a Multiple View Elements GUI |
US20100201711A1 (en) * | 2009-02-12 | 2010-08-12 | Xerox Corporation | Resizing a digital document image via background content removal |
Family Cites Families (27)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US5227771A (en) * | 1991-07-10 | 1993-07-13 | International Business Machines Corporation | Method and system for incrementally changing window size on a display |
US5583981A (en) * | 1994-06-28 | 1996-12-10 | Microsoft Corporation | Method and system for changing the size of edit controls on a graphical user interface |
US6389437B2 (en) * | 1998-01-07 | 2002-05-14 | Ion Systems, Inc. | System for converting scrolling display to non-scrolling columnar display |
US6392673B1 (en) * | 1998-09-04 | 2002-05-21 | Microsoft Corporation | Method for resizing user interface elements for an operating system |
US7685514B1 (en) * | 2000-05-25 | 2010-03-23 | International Business Machines Corporation | Method and system for incorporation of graphical print techniques in a web browser |
US6966034B2 (en) * | 2000-06-30 | 2005-11-15 | Microsoft Corporation | Supplemental request header for applications or devices using web browsers |
US7028255B1 (en) * | 2000-08-14 | 2006-04-11 | Adobe Systems Incorporated | Self-sizing object placement |
US6948119B1 (en) * | 2000-09-27 | 2005-09-20 | Adobe Systems Incorporated | Automated paragraph layout |
US7240294B2 (en) * | 2000-10-20 | 2007-07-03 | Desknet Inc. | Method of constructing a composite image |
WO2002042929A1 (en) * | 2000-11-22 | 2002-05-30 | Adobe Systems Incorporated | Automated paragraph layout |
US6973627B1 (en) * | 2000-12-22 | 2005-12-06 | Automated Logic Corporation | Website display emulating a display of an application program |
JP3800524B2 (en) * | 2002-03-15 | 2006-07-26 | インターナショナル・ビジネス・マシーンズ・コーポレーション | Display control method, program using the same, and information processing apparatus |
US20030226113A1 (en) * | 2002-05-31 | 2003-12-04 | Microsoft Corporation | Automatic page size setting |
GB2418509A (en) * | 2003-06-03 | 2006-03-29 | Forbes Holton Norris Iii | Flexible, dynamic menu-based web-page architecture |
FI117951B (en) * | 2003-06-27 | 2007-04-30 | Nokia Corp | Method and system for presenting information and apparatus |
JP2005044279A (en) * | 2003-07-25 | 2005-02-17 | Canon Inc | Method, program and apparatus for business form processing |
US7676743B2 (en) * | 2004-11-30 | 2010-03-09 | Adobe Systems, Incorporated | Applying type fitting across grouped text frames in a page layout application |
US7516402B2 (en) * | 2005-02-28 | 2009-04-07 | Nokia Corporation | Presentation of large objects on small displays |
US7430712B2 (en) * | 2005-03-16 | 2008-09-30 | Ameriprise Financial, Inc. | System and method for dynamically resizing embeded web page content |
US20060218490A1 (en) * | 2005-03-24 | 2006-09-28 | Richard Fink | Method and apparatus for creating a web page |
US7552386B2 (en) * | 2005-06-10 | 2009-06-23 | Microsoft Corporation | Methods and systems for treating overflow conditions and for re-sizing printable content |
US7770106B2 (en) * | 2006-03-17 | 2010-08-03 | Microsoft Corporation | Dynamic generation of compliant style sheets from non-compliant style sheets |
US20070234195A1 (en) * | 2006-04-03 | 2007-10-04 | National Instruments Corporation | Simultaneous update of a plurality of user interface elements displayed in a web browser |
US20080270909A1 (en) * | 2007-04-25 | 2008-10-30 | Looksmart, Ltd. | Methods and Apparatuses to Provide Premium Contents over Internet |
US8111331B2 (en) * | 2007-07-09 | 2012-02-07 | Cisco Technology, Inc. | Image resizer and resizing method |
GB0801429D0 (en) * | 2008-01-25 | 2008-03-05 | Decisive Media Ltd | Media Annotation system, method and media player |
US8726164B2 (en) * | 2008-05-30 | 2014-05-13 | Microsoft Corporation | Mark-up extensions for semantically more relevant thumbnails of content |
-
2009
- 2009-06-19 US US12/487,859 patent/US8171401B2/en not_active Expired - Fee Related
-
2012
- 2012-03-30 US US13/434,996 patent/US20120210206A1/en not_active Abandoned
Patent Citations (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6603493B1 (en) * | 1999-04-13 | 2003-08-05 | International Business Machines Corporation | Method for arranging display elements |
US6760048B1 (en) * | 1999-06-15 | 2004-07-06 | International Business Machines Corporation | Display of occluded display elements on a computer display |
US6826727B1 (en) * | 1999-11-24 | 2004-11-30 | Bitstream Inc. | Apparatus, methods, programming for automatically laying out documents |
US7222306B2 (en) * | 2001-05-02 | 2007-05-22 | Bitstream Inc. | Methods, systems, and programming for computer display of images, text, and/or digital content |
US7168038B2 (en) * | 2001-08-01 | 2007-01-23 | Microsoft Corporation | System and method for scaling and repositioning drawings |
US20050071364A1 (en) * | 2003-09-30 | 2005-03-31 | Xing Xie | Document representation for scalable structure |
US20080092076A1 (en) * | 2004-02-12 | 2008-04-17 | Bertram Randal L | Automatically scaling the information and controls in navigation tabs per available window area |
US20070162844A1 (en) * | 2006-01-12 | 2007-07-12 | Microsoft Corporation | Automatic layout of objects |
US20080052637A1 (en) * | 2006-07-26 | 2008-02-28 | Aol Llc, A Delaware Limited Liability Company | Window resizing in a graphical user interface |
US20080168388A1 (en) * | 2007-01-05 | 2008-07-10 | Apple Computer, Inc. | Selecting and manipulating web content |
US20100146378A1 (en) * | 2008-12-04 | 2010-06-10 | International Business Machines Corporation | Optimize View Elements Sizes to Maximize Most Data Viewed in a Multiple View Elements GUI |
US20100201711A1 (en) * | 2009-02-12 | 2010-08-12 | Xerox Corporation | Resizing a digital document image via background content removal |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110252335A1 (en) * | 2010-04-12 | 2011-10-13 | Google Inc. | Zooming in a Web Browser |
CN106649348A (en) * | 2015-10-30 | 2017-05-10 | 北京国双科技有限公司 | Page table layout method and apparatus |
US9934208B2 (en) * | 2016-01-08 | 2018-04-03 | Adobe Systems Incorporated | Populating visual designs with web content |
US9959257B2 (en) * | 2016-01-08 | 2018-05-01 | Adobe Systems Incorporated | Populating visual designs with web content |
US10691875B2 (en) | 2016-01-08 | 2020-06-23 | Adobe Inc. | Populating visual designs with web content |
Also Published As
Publication number | Publication date |
---|---|
US8171401B2 (en) | 2012-05-01 |
US20100325529A1 (en) | 2010-12-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US8171401B2 (en) | Resizing an editable area in a web page | |
US11307750B2 (en) | Method and system for section-based editing of a website page | |
US9600447B2 (en) | Methods and systems for page layout using a virtual art director | |
US9330065B2 (en) | Generating variable document templates | |
JP4110105B2 (en) | Document processing apparatus, document processing method, and document processing program | |
US8739073B2 (en) | User interface for document table of contents | |
US6891551B2 (en) | Selection handles in editing electronic documents | |
US20150012818A1 (en) | System and method for semantics-concise interactive visual website design | |
US20110179350A1 (en) | Automatically placing an anchor for an object in a document | |
JP4059504B2 (en) | Document processing apparatus, document processing method, and document processing program | |
US7028256B2 (en) | Adding white space to a document generating adjusted page sizing | |
US8392819B2 (en) | Column selection, insertion and resizing in computer-generated tables | |
US7996765B1 (en) | System and method for style sheet language coding that maintains a desired relationship between display elements | |
US20070273895A1 (en) | Efficient Whole Page Printing | |
KR20120026053A (en) | Hierarchically-organized control galleries | |
US8504915B2 (en) | Optimizations for hybrid word processing and graphical content authoring | |
US20170308510A1 (en) | Display and selection of bidirectional text | |
JP2005243015A (en) | System and method that utilize dynamic digital zooming interface in connection with digital inking | |
US20080256484A1 (en) | Techniques for aligning and positioning objects | |
US20120278696A1 (en) | Rule-based grid independent of content | |
US20120032983A1 (en) | Information processing apparatus, information processing method, and program | |
CN110692060B (en) | Electronic text pen system and method | |
US20160299649A1 (en) | Content display device, content display program, and content display method | |
Doan | Practical Responsive Web Design | |
US20220357841A1 (en) | System and method for parallel multi-column text presentation and editing on a computer display |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
AS | Assignment |
Owner name: MICROSOFT TECHNOLOGY LICENSING, LLC, WASHINGTON Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:MICROSOFT CORPORATION;REEL/FRAME:034544/0541 Effective date: 20141014 |
|
STCB | Information on status: application discontinuation |
Free format text: EXPRESSLY ABANDONED -- DURING EXAMINATION |