Abstract:
Identification and correction of rendering problems that occur when a document (e.g., a web page) is displayed by a document viewer (e.g., web browser) are described. In one exemplary embodiment, a web page has a first element written in a markup language and a second element written in a style sheet language. A method includes receiving a command at a development environment, analyzing a structure of an electronic document responsive to the command, the electronic document having a first element written in a first computer language and a second element written in a second computer language, identifying a relationship between the first and second elements, wherein the relationship causes a rendering problem associated with a document viewer, and presenting information to the user about the rendering problem via the development environment.

Description:
TECHNICAL FIELD 
     The present invention relates, in general, to computer software, and, more specifically, to solving rendering compatibility problems across electronic document viewers. 
     BACKGROUND 
     The World Wide Web (WWW) contains web pages that use both Hyper-Text Markup Language (HTML) and Cascading Style Sheets (CSS). Over the past several years, HTML has become the predominant markup language for the creation of web pages. It describes the structure and style of text-based information in a document and supplements that text with forms, embedded images, and other objects. Meanwhile, CSS is a popular style sheet language used to describe the presentation (e.g., colors, fonts, layout, etc.) of documents written in markup language. By using HTML and CSS together, web designers are able to advantageously separate a document&#39;s structure and content (written in markup language) from its presentation formatting (written in style sheet language). 
     Generally speaking, web pages are viewed using web browsers. Web browsers interpret HTML and CSS elements of a web page, and render the web page to a user. There are many web browsers available today, including, for example, Microsoft Corp.&#39;s INTERNET EXPLORER®, Mozilla Corp.&#39;s FIREFOX®, Opera Software ASA&#39;s OPERA®, Netscape Communications Corp.&#39;s NETSCAPE®, and Apple Computer Corp.&#39;s SAFARI®, among others. When creating web pages, designers frequently use validation tools that automatically check HTML and CSS code for invalid tags, attributes, or values. Such validation tools are sometimes included in application development environments such as, for example, Adobe Systems Inc.&#39;s DREAMWEAVER® and GOLIVE®. 
     Unfortunately, the lack of coding errors does not guarantee pixel-perfect rendering across all browsers. In fact, certain rendering problems involve complex relationships between HTML elements and CSS properties. As a result, even after HTML and CSS code is otherwise validated, different web browsers may still render or display the same web page differently. 
     BRIEF SUMMARY 
     Various representative embodiments of the present invention are related to systems, methods, and computer program products for identifying and correcting rendering problems that occur when an electronic document is displayed on different viewing platforms. As such, embodiments of the present invention allow users operating different document viewers to have similar or identical experiences when viewing the same document. For instance, an electronic document may comprise a first element written in a first computer language and a second element written in a second computer language. According to one exemplary embodiment of the present invention, a method may comprise parsing the document to identify rendering problems or bugs caused by a particular relationship between the first and second elements when the document is processed by a specific document viewer. Some of the embodiments described herein may be implemented as stand-alone software or may be integrated within other software, such as, for example, a document editor or a software development environment. 
     In another representative embodiment, an electronic document may be a web page and a document viewer may be a web browser. The web page may contain both markup and style sheet elements. Markup elements may be written in any markup language now existing or yet to be developed, including, for example, HTML, Extensible HTML (XHTML), Standard Generalized Markup Language (SGML), Extensible Markup Language (XML), or the like. Style sheet elements may be written in any style sheet language, such as, for example, CSS, Document Style Semantics and Specification Language (DSSSL), Formatted Output Specification Instance (FOSI), or the like. 
     Thus, a method may comprise parsing the web page to find combinations of markup structures and style sheet formatting that may result in rendering bugs when the web page is viewed using a specific web browser. The method may also comprise alerting a web designer about the rendering problem and/or providing the designer with information about how to fix the problem. The method may further comprise providing a link to an external information service or site that contains information about the rendering bug. At least some of these steps may be implemented as stand-alone software or may be integrated, for example, within a web page editor such as Adobe Systems Inc.&#39;s DREAMWEAVER®. 
     One of the many advantages of the various representative embodiments of the present invention is that they allow a document author or web designer to assure the uniform presentation of documents or web pages across different document viewers or web browsers. The present invention also allows authors and designers to refine existing compatibility checks and to define new checks. Furthermore, by performing the compatibility procedures described herein, the invention allows authors and designers to shorten development time and reduce costs. 
     The foregoing has outlined rather broadly certain features and technical advantages of the present invention so that the detailed description that follows may be better understood. Additional features and advantages are described hereinafter. As a person of ordinary skill in the art will readily recognize in light of this disclosure, specific embodiments disclosed herein may be utilized as a basis for modifying or designing other structures for carrying out the same purposes of the present invention. Such equivalent constructions do not depart from the spirit and scope of the invention as set forth in the appended claims. Several inventive features described herein will be better understood from the following description when considered in connection with the accompanying figures. It is to be expressly understood, however, the figures are provided for the purpose of illustration and description only, and are not intended to limit the present invention. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
       For a more complete understanding of the present invention, reference is now made to the following descriptions taken in conjunction with the accompanying drawings, in which: 
         FIG. 1  is a flowchart of a method for identifying browser rendering problems according to one embodiment of the present invention; 
         FIG. 2  is a screenshot illustrating a browser selection window according to one embodiment of the present invention; 
         FIG. 3  is a screenshot illustrating a presentation of results according to one embodiment of the present invention; 
         FIG. 4  is a diagram of a system for checking browser compatibility according to one embodiment of the present invention; and 
         FIG. 5  illustrates a computer system adapted for use with embodiments of the present invention. 
     
    
    
     DETAILED DESCRIPTION 
     In the following description, reference is made to the accompanying drawings that form a part hereof, and in which exemplary embodiments of the invention may be practiced by way of illustration. These embodiments are described in sufficient detail to enable any person of ordinary skill in the art to practice the invention, and it is to be understood that other embodiments may be utilized, and that changes may be made, without departing from the spirit of the present invention. The following description is, therefore, not to be taken in a limited sense, and the scope of the present invention is defined only by the appended claims. 
     Turning now to  FIG. 1 , a flowchart of method  100  for identifying browser rendering problems is depicted according to one exemplary embodiment of the present invention. In step  101 , a user is allowed to define a set of browsers of interest. In one exemplary embodiment, the user may interact with method  100  via a graphical user interface (GUI) of an application development environment. For instance, as illustrated in screenshot  200  of  FIG. 2 , the user may select a set of browsers to be checked from list  201 , and also the minimum version of each browser using drop-down boxes  202 . As such, method  100  may check browser compatibility for each supported browser, starting from the selected version up until the latest available version. In one embodiment, each browser presented in list  202  may have an associated profile within a configuration folder. In this manner, users may extend and add other browsers to be checked by method  100 , by creating or setting different profiles in the configuration folder. 
     After the user has selected at least one browser of interest, method  100  accesses a database to determine possible rendering bugs associated with the selected browser in step  102 . As described below with respect to  FIGS. 3 and 4 , the database of step  102  may be a local database, a remote database, or a combination of local and remote databases. Next, method  100  parses a document to find a relationship between two or more of the document&#39;s elements that may cause a rendering bug in the browsers previously selected in step  103 . In the case where the document is a web page, method  100  may look for relationships between HTML elements and CSS properties that cause rendering issues, rather than merely identifying the lack of support for individual CSS properties or HTML elements alone. Particularly, rendering bugs may be caused by any combination of elements such as HTML tag names, HTML tag attribute values, CSS declared or computed property values, and the like. Further, these conditions may exist on the element itself or on a parent, child, sibling, ancestor, or descendent of the element. Therefore, step  103  analyzes the interaction between HTML structures or relationships (e.g., consecutive block-level elements, inline replaced elements inside block-level elements, nested containers, etc.) and combinations of CSS properties or values wherever they may appear in the cascaded page code. As a result, step  103  is capable of discovering combinations of elements that may trigger browser rendering issues. 
     The parsing algorithm used in step  103  may be coded, for example, in Netscape Communications Corp.&#39;s JAVASCRIPT® using application program interface (API) calls. However, as a person of ordinary skill in the art will readily recognize in light of this disclosure, the algorithms and functions disclosed herein may be written in any other programming language, such as, for example, C, C++, Sun Microsystems Inc.&#39;s JAVA®, Perl, etc. In one embodiment, a parsing algorithm defines combinations of CSS declarations and computed properties of specific page elements, as well as their parents, children, siblings, etc. Detection of particular combinations of structure and formatting may be handled, for example, in a JAVASCRIPT® extensibility layer. As such, a JAVASCRIPT® function may search the user&#39;s document or web page for bug-triggering relationships between HTML elements and CSS properties by examining the document object model (DOM) to extract the computed and/or declared styles of each element. 
     According to certain embodiments of the present invention, a set of JAVASCRIPT® API calls may be created to search within a document for relationships among elements that may result in a rendering bug. Thus, a JAVASCRIPT® routine may be coded for each rendering bug with instructions about where to look for particular issues. For example, some rendering bugs may require parsing of the entire structure of a document, including the root document, all children elements, and all the children&#39;s children. Meanwhile, other bugs may only apply, for example, to image tags. In that case, the JAVASCRIPT® code may retrieve a list of all the images in the document and then go through the list linearly checking any properties that may cause the rendering bug. For example, a set of JAVASCRIPT® functions may define each rendering bug, have a short name, a long description, a list of browsers that can be affected, and may further include a “find issue” function that actually parses through the structure of the HTML and the CSS definitions. 
     In one embodiment, additional and/or missing properties or other conditions that may prevent a rendering bug from occurring may also be considered to reduce the chance of false positives. In another embodiment, step  103  may further employ style filtering, for example, in the core C++ code, thus causing styles that are visible to the JAVASCRIPT® layer to change based upon how a browser would parse the particular style sheets and interpret values given to each property. Style filtering emulates or mimics an individual browser&#39;s understanding of style values and may allow method  100  to view CSS code, thus allowing the user to determine whether rendering bugs associated with that browser have been eliminated. 
     Table I, depicted below, illustrates an exemplary, non-limiting list of rendering issues or bugs that may be identified using method  100 . Table I also shows, for each rendering bug, a description of the combination of HTML and CSS elements that causes the bug, the browsers (and versions) affected by the problem, and a proposed solution. 
     
       
         
               
               
               
               
             
           
               
                 TABLE I 
               
               
                   
               
               
                 Rendering Bug 
                 Description 
                 Browsers 
                 Solution(s) 
               
               
                   
               
             
             
               
                 Expanding box 
                 Any content that does not fit 
                 Internet 
                 Use “word-wrap: break- 
               
               
                   
                 in a fixed-width or height box 
                 Explorer 
                 word” inside IE- 
               
               
                   
                 may cause the box to expand 
                 (IE)/Windows 
                 conditional comments 
               
               
                   
                 to fit the content (the content  
                 (Win) 
                 (works on text only) or 
               
               
                   
                 should overflow instead). 
                   
                 “overflow: hidden” (works 
               
               
                   
                 Boxes with no specific width 
                   
                 on text, images, etc. but 
               
               
                   
                 also expand. 
                   
                 causes content to be 
               
               
                   
                 In this case, the “overflow: 
                   
                 clipped). 
               
               
                   
                 hidden” workaround does not 
                   
                   
               
               
                   
                 apply. If the expansion is 
                   
                   
               
               
                   
                 desirable, the same effect can 
                   
                   
               
               
                   
                 be achieved in standards- 
                   
                   
               
               
                   
                 compliant browsers by 
                   
                   
               
               
                   
                 applying “display: table-cell” 
                   
                   
               
               
                   
                 to the container. 
                   
                   
               
               
                 Disappearing 
                 If a list (dl, ol, ul) with a 
                 IE/Win 
                 Relatively-position all lists. 
               
               
                 list/background 
                 background is placed within a 
                   
                 Add “ul, ol, dl {position: 
               
               
                 bug 
                 floated, relatively-positioned 
                   
                 relative; }” to the style 
               
               
                   
                 div, the background may not 
                   
                 sheet. 
               
               
                   
                 render as specified. 
                   
                   
               
               
                 Guillotine bug 
                 If a container element has both 
                 IE/Win 
                 Two options: [1] Use a 
               
               
                   
                 a float that is not cleared and 
                   
                 clearing div outside the 
               
               
                   
                 links that use an “a:hover” rule 
                   
                 container when the float 
               
               
                   
                 to change certain properties 
                   
                 should not be contained; or 
               
               
                   
                 (e.g., background, padding, 
                   
                 [2] use a combination of  
               
               
                   
                 text style, and border;  not  text 
                   
                 “:after” a hack to create a 
               
               
                   
                 color) in non-floated content 
                   
                 clearing element within the 
               
               
                   
                 after the float, hovering over 
                   
                 container when the float 
               
               
                   
                 the links may cause the bottom 
                   
                 should be contained. 
               
               
                   
                 of the floated content to 
                   
                   
               
               
                   
                 disappear. 
                   
                   
               
               
                 Doubled float 
                 When a margin is applied to a 
                 IE/Win 
                 Specify “display: inline;” 
               
               
                 margin bug 
                 floated box on the same side 
                   
                 for the affected float. 
               
               
                   
                 as the direction the box is 
                   
                   
               
               
                   
                 floated and the floated box is 
                   
                   
               
               
                   
                 the first one inside its 
                   
                   
               
               
                   
                 containing box, the margin is 
                   
                   
               
               
                   
                 doubled. 
                   
                   
               
               
                 Buttons lose 
                 float applied to “&lt;button&gt;” 
                 Opera versions 7 
                 Use “&lt;input 
               
               
                 button shape 
                 causes the button background 
                 and 8 
                 type = “button”&gt;” instead. 
               
               
                 when floated 
                 to disappear, leaving only the 
                   
                   
               
               
                   
                 text. 
                   
                   
               
               
                 Disappearing 
                 When a floated list with 
                 Firefox version 1 
                 Do not set both “overflow” 
               
               
                 dropdown in lists 
                 overflow: auto contains a 
                 and IE/Mac 
                 and “float” on the list. 
               
               
                   
                 “&lt;select&gt;” dropdown, the 
                   
                 Rather, wrap list in 
               
               
                   
                 dropdown disappears when 
                   
                 container and apply one of 
               
               
                   
                 changing its value (Mozilla) or 
                   
                 the properties to the 
               
               
                   
                 never appears at all (Explorer 
                   
                 container. 
               
               
                   
                 Macintosh). 
                   
                   
               
               
                 “COL” and “COLGROUP” 
                 If the “&lt;caption&gt;” tag is 
                 Safari version 2.0.3 
                 Move the “&lt;caption&gt;” tag 
               
               
                 captured by “CAPTION” 
                 placed directly after the  
                   
                 after the “&lt;col&gt;” and 
               
               
                   
                 opening “&lt;table&gt;” tag as 
                   
                 “&lt;colgroup&gt;” tags, though 
               
               
                   
                 required by the HTML spec, 
                   
                 this will cause the page to 
               
               
                   
                 “COL” and “COLGROUP” 
                   
                 fail validation. 
               
               
                   
                 are no longer accessible 
                   
                   
               
               
                   
                 selectors. 
               
               
                   
               
             
          
         
       
     
     Again, the list of rendering issues or bugs presented in Table I above are provided by means of example only, and do not limit the scope of the present invention. As a person of ordinary skill in the art will readily recognize in light of this disclosure, an unlimited number of rendering issues other than those explicitly discussed herein may be discovered and/or corrected using the systems and methods of the present invention. 
     For each web browser selected by the user, step  103  may re-cascade styles according to style filters available for that browser. As step  103  calls each find issue function, each call may return a different style for a different browser. Accordingly, if certain rendering issues affect more than one browser, step  103  may call the same find issue function more than once. After the proper style filter is applied to the web page, a find issue function then searches for specific a combination of HTML and CSS elements that may cause a rendering bug in that browser. 
     If step  104  confirms that rendering bug has been detected, the user is notified in step  105 . Finally, method  100  provides information regarding any rendering bugs found in step  106 . For example, the user may be notified through an interface such as the one depicted in  FIG. 3 , which shows a screenshot of parsing results  300  according to one exemplary embodiment of the present invention. File tree window  306  shows a list of folders and files that may be tested for rendering issues. Browser compatibility check tab  301  comprises window  302  having a list of instances of potential bugs discovered along with a reference to each line of the page&#39;s underlying code that may be causing the bug. In one embodiment, different confidence levels are also reported (e.g., 100%, 75%, 50%, 25%) indicating the accuracy of the bug detection. Browser compatibility check tab  301  also shows a short description  303  of the of the rendering bug selected in window  302  along with link  305 , which provides more information about the selected rendering bug in window  304 . 
     In one embodiment, a user may follow link  305  to a remote knowledge database that provides more details about the problem and possible solutions. The remote knowledge database may be, for example, a collaborative web site set up to allow user editing and adding of content (often referred to as a “wild”), so that other users may identify new issues and provide more information about the rendering problem and possible solutions or workarounds. Authors and designers may check a web page after problems are reported, or proactively check the web page before posting it to the web. Authors and designers may also code new rendering conditions as new web browsers and updated versions are released, and may check for conditions that have been added by other users. 
       FIG. 4  shows a diagram of system  400  for checking browser compatibility according to one exemplary embodiment of the present invention. A web designer or document author creates a web page or document using workstation  401 , which is connected to network  406 . Network  406  may be, for example, the Internet. After creating the web page or document, the web designer or document author executes a software program that implements method  100  as described above. Workstation  401  receives software updates from remote server  402  having remote database of rendering issues  403  through network  406 . Alternatively or additionally, a software program of workstation  401  provides a connection to wild server  404  having a wild database of rendering problems and suggested workarounds  405 . 
     As previously noted, some of the functions and/or algorithms described above may be implemented, for example, in software or as a combination of software and human implemented procedures. Software may comprise computer executable instructions stored on computer readable media such as memory or other type of storage devices. Further, functions may correspond to modules, which may be software, hardware, firmware or any combination thereof. Multiple functions may be performed in one or more modules as desired, and the embodiments described are merely examples. Software may be executed on a digital signal processor, ASIC, microprocessor, or other type of processor operating on a computer system, such as a personal computer, server or any other computer system. 
     The software, computer program, or code segments making up the various embodiments of the present invention may be stored in a computer readable medium. The term “computer readable medium” includes any medium that can store information. Examples of the computer readable medium include an electronic circuit, a semiconductor memory device, a ROM, a flash memory, an erasable ROM (EROM), a floppy diskette, a compact disk CD-ROM, an optical disk, a hard disk, and the like. Code segments may be downloaded via computer networks such as the Internet, Intranet, or the like. 
       FIG. 5  illustrates computer system  500  adapted to use embodiments of the present invention (e.g., storing and/or executing software associated with the embodiments). Central processing unit (CPU)  501  is coupled to system bus  502 . CPU  501  may be any general purpose CPU. However, embodiments of the present invention are not restricted by the architecture of CPU  501  as long as CPU  501  supports the inventive operations as described herein. Bus  502  is coupled to random access memory (RAM)  503 , which may be SRAM, DRAM, or SDRAM. ROM  504  is also coupled to bus  502 , which may be PROM, EPROM, or EEPROM. 
     Bus  502  is also coupled to input/output (I/O) controller card  505 , communications adapter card  511 , user interface card  508 , and display card  509 . I/O adapter card  505  connects storage devices  506 , such as one or more of a hard drive, a CD drive, a floppy disk drive, a tape drive, to computer system  500 . I/O adapter  505  is also connected to a printer (not shown), which would allow the system to print paper copies of information such as documents, photographs, articles, and the like. The printer may be a printer (e.g., dot matrix, laser, and the like), a fax machine, scanner, or a copier machine. Communications card  511  is adapted to couple the computer system  500  to network  512 , which may be one or more of a telephone network, a local (LAN) and/or a wide-area (WAN) network, an Ethernet network, and/or the Internet. User interface card  508  couples user input devices, such as keyboard  513 , pointing device  507 , and the like, to computer system  500 . Display card  509  is driven by CPU  501  to control the display on display device  510 . 
     Although certain embodiments of the present invention and their advantages have been described herein in detail, it should be understood that various changes, substitutions and alterations can be made without departing from the spirit and scope of the invention as defined by the appended claims. Moreover, the scope of the present invention is not intended to be limited to the particular embodiments of the process, machine, manufacture, means, methods, and steps described herein. As a person of ordinary skill in the art will readily appreciate from this disclosure, other processes, machines, manufacture, means, methods, or steps, presently existing or later to be developed that perform substantially the same function or achieve substantially the same result as the corresponding embodiments described herein may be utilized according to the present invention. Accordingly, the appended claims are intended to include within their scope such processes, machines, manufacture, means, methods, or steps.