KR101494285B1

KR101494285B1 - 전자 문서의 선택 영역 표시 시 텍스트의 동적 래핑 방법 및 장치

Info

Publication number: KR101494285B1
Application number: KR1020147013081A
Authority: KR
Inventors: 칼 앤더스 오이가드
Original assignee: 오페라 소프트웨어 에이에스에이
Priority date: 2008-04-15
Filing date: 2009-04-15
Publication date: 2015-02-23
Also published as: US20090319888A1; KR20100135854A; EP2279473A1; JP2014170563A; EP2279473B1; CN102057369B; CN102057369A; JP5941093B2; WO2009128728A1; KR20140147136A; KR20140075016A; US9378188B2; JP2011520180A

Abstract

전자 문서의 표시 시 제1 줌 레벨로부터 제2 줌 레벨로 변경될 때 텍스트를 재래핑하는 방법이 제공된다. 텍스트의 재래핑 시 수평 스크롤링이 필요없도록 하는 라인 길이가 선택된다. 재래핑이 문서의 레이아웃을 변경시킬 수 있기 때문에, 상기 방법은 전자 문서 내의 요소를 식별하고 줌인 작동 혹은 줌아웃 작동 이후 반드시 상기 요소가 디스플레이 내에 포함되도록 하는 단계를 더 포함할 수 있다. 또한 상기 방법을 수행하도록 구현된 장치 및 컴퓨팅 장치에서 실행될 때 상기 방법을 수행하기 위한 명령어를 포함하는 컴퓨터 프로그램이 개시된다.

Description

전자 문서의 선택 영역 표시 시 텍스트의 동적 래핑 방법 및 장치{Method and device for dynamically wrapping text when displaying a selected region of an electronic document}

본 발명은 장치의 디스플레이에 전자 문서를 표시하는 것에 관한 것이다. 특히, 본 발명은 그러한 문서 내에서 특정 영역을 선택하고 선택된 영역 내의 텍스트를 동적으로 래핑(wrapping)하거나 리플로우잉(reflowing)하는 방법에 관한 것이다. 또한 본 발명은 상기 방법에 따라 작동하도록 구현된 장치 및 이 장치 내에 있는 하나 이상의 프로세싱 유닛(processing unit)에 의해 실행될 때 상기 방법을 수행하는 명령어를 포함하는 컴퓨터 프로그램에 관한 것이다.

웹페이지와 같은 전자 문서는 많은 경우에 표준 사이즈의 디스플레이를 가진 정규 데스크탑 컴퓨터 상에서 표시되도록 설계된다. 그러한 문서가 예를 들어 핸드헬드 장치, 모바일 폰, 텔레비전 세트 혹은 게임 콘솔과 같은 다른 장치에서 표시될 때, 디스플레이의 사이즈 및 레이아웃이 사용자에게 편리한 방식으로 문서를 표현하지 못할 수 있다. 이를 처리하기 위해 다양한 방법들이 제안되어 왔다. 보통 이러한 방법들은 문서가 스크린에 맞춰지도록 하기 위해 표시되기 이전에 문서에 수정을 가한다. 이는 전형적으로 스크린의 사이즈 혹은 고유 특성(inherent properties)에 적합하지 않는 콘텐츠나 레이아웃의 제거를 수반한다. 이러한 해결책들이 가지는 공통된 문제점은 그 페이지가 사용자에 의해 사용될 수 없거나 인식될 수 없도록 표현되거나 사용자가 문서 내에서 탐색(navigate)하는데 어려움을 가질 수 있다는 것이다.

다른 접근은 이미지 사이즈를 줄이거나, 문서의 레이아웃을 변경함으로써 세로단(column)의 개수를 줄이거나, 색상, 콘트라스트, 밝기 및 폰트 사이즈를 변경하는 것과 같은 문서 일부분의 리사이징 혹은 이동을 수반한다.

최근에 인기를 얻고 있는 접근으로는 처음에는 주로 저자에 의해 원래 설계된 대로 문서를 표시하고, 페이지 상의 특정 영역(region)이나 요소(element)를 표시하기 위해 줌인하거나 줌아웃하는 방법을 제공하는 것이 있다. 이러한 방법들은 보통 직관적이고 사용자 친화적이지만, 특히 텍스트를 처리할 때 문제점이 없는 것은 아니다. 예를 들어, 텍스트 블록이 매우 넓다면 텍스트를 읽기 위해서 수평으로 스크롤할 필요가 있을 수 있다. 이를 피하기 위해서 줌인 이후에 장치의 스크린 내에 들어맞도록 모든 텍스트를 좁은 폭의 세로단 내에 재래핑(rewarp)하는 것이 제안되었다. 물론 이는 페이지 저자에 의해 창작된 원본 레이아웃을 변경시키며, 수직 방향으로 상당히 더 길어진 문서를 가져올 수 있다.

결과적으로 이러한 문제점들을 극복하고 작은 스크린 장치 상에서 보다 부드럽고 사용자 친화적인 방식으로 문서를 표시할 수 있는 방법이 필요하다.

본 발명에 따르면, 전자 문서의 선택 영역을 표시할 때 디스플레이의 능력에 알맞은 방식으로 텍스트를 동적 래핑하는 방법이 제공된다.

상기 방법은 문서를 로드하는 단계, 문서의 레이아웃을 결정하고 결정된 레이아웃에 상응하여 문서의 텍스트를 래핑하는 단계(여기서, 상기 레이아웃은 상기 문서의 저자(document's author)에 의해 창작된 디자인 및 마크업 언어(Markup language)와 CSS(Cascading Styles Sheets)를 포함하는 표준의 스펙(specification)에 부합됨), 결정된 레이아웃에 상응하여 제1 해상도로 문서의 적어도 일부분을 디스플레이 스크린에 표시하는 단계, 상기 문서를 전체적으로 줌인(zoom-in) 또는 줌아웃(zoom-out)하기 위해 제2 해상도로 문서를 표시하는 명령을 나타내는 사용자 입력을 수신하는 단계, 만일 상기 제2 해상도에 의할 때 표시될 텍스트 라인이 최대 라인 길이를 초과하는 경우 최대 라인 길이에 기초하여 문서의 적어도 일부 텍스트를 제2 해상도에 연관되도록 재래핑하는 단계, 적절한 텍스트가 재래핑된 후 문서의 레이아웃을 결정하는 단계 및 제2 해상도로 재래핑된 텍스트를 포함하는 문서의 적어도 일부분을 디스플레이 스크린에 표시하는 단계를 포함할 수 있다.

최대 라인 길이는 장치의 디스플레이 스크린의 너비에 의해 정의되거나 구성 파일 내에 저장된 정보로부터 정의되거나 문서가 표시되는 윈도우의 너비에 기초할 수 있다. 일부 실시예에 따르면, 최대 라인 길이는 일차원에 따른 하드웨어 디스플레이 픽셀과 원본 문서 픽셀의 비율로 정의될 수 있으며, 원본 문서 해상도 면에서 최대 라인 길이는 (하드웨어 픽셀 면에서) 디스플레이 윈도우의 너비를 상기 비율로 나는 값으로 결정된다.

본 발명에 부합하는 일부 실시예에 따르면, 제2 해상도로 문서를 표시하는 명령을 나타내는 사용자 입력은 문서 내의 요소(예를 들어 텍스트의 특정 단어 또는 글자)를 식별하는데 이용될 수 있는 정보를 포함하며, 제2 해상도로 문서를 표시하는 단계는 디스플레이 내에 미리 정의된 위치에 식별된 요소를 위치시키는 단계를 포함한다. 이는 텍스트의 재래핑에 의해 레이아웃이 실질적으로 변경될지라도 사용자가 문서 콘텐츠의 동일한 부분을 보는 것을 보장하기 위해 해상도 비율을 증가(줌인)시키거나 그 비율을 감소(줌아웃)시킬 때 이용될 수 있다.

본 발명에 따르면, 컴퓨팅 장치는 장치의 디스플레이에 전자 문서의 관심 영역을 선택하고 표시하기 위해 전자 문서를 표시하도록 구현될 수 있으며, 디스플레이, 사용자 입력 인터페이스, 전자 문서의 수신이 가능한 통신 인터페이스, 수신된 문서가 로드될 수 있는 메모리 장치 및 다음의 각 단계들을 수행하도록 구현된 모듈을 포함한다. 여기서, 모듈에 의해 수행되는 단계는, 문서를 로드하는 단계, 문서의 레이아웃을 결정하는 단계, 결정된 레이아웃에 상응하여 제1 해상도로 디스플레이 스크린에 문서의 적어도 일부분을 표시하되 문서의 텍스트가 결정된 레이아웃에 상응하여 래핑되도록 하는 단계, 제2 해상도로 문서를 표시하는 명령을 나타내는 사용자 입력을 수신하는 단계, 제2 해상도에 연관된 최대 라인 길이에 기초하여 문서의 적어도 일부 텍스트를 재래핑하는 단계, 적절한 텍스트가 재래핑된 후 문서의 레이아웃을 결정하는 단계, 제2 해상도로 재래핑된 텍스트를 포함하는 문서의 적어도 일부분을 디스플레이 스크린에 표시하는 단계를 포함한다.

또한 이 장치는 본 발명의 상기 방법의 추가적인 단계들을 수행하도록 구현될 수 있다.

마지막으로, 본 발명에 따르면, 컴퓨터 판독가능 기록매체에 저장된 컴퓨터 프로그램은 컴퓨팅 장치에 로드되고 실행될 때 본 발명의 원리에 부합하도록 텍스트를 동적으로 래핑하는 방법의 수행이 가능한 명령어를 포함할 수 있다.

도 1은 본 발명의 다양한 측면을 구현하기 위해 이용될 수 있는 컴퓨팅 장치의 다이어그램;
도 2는 본 발명에 관련하여 이용될 수 있는 사용자 에이전트의 다양한 모듈;
도 3a 내지 3c는 전자 문서의 레이아웃 및 브라우저 윈도우 내에서의 디스플레이;
도 4a 및 4b는 어떻게 전자 문서의 레이아웃이 수많은 레이아웃 박스의 결과인지를 보여주는 도면;
도 5는 본 발명에 기초하여 관심 영역이 식별되고 표시될 수 있는 방법을 보여주는 도면; 및
도 6은 본 발명의 방법을 설명하는 순서도.

이제 본 발명은 첨부된 도면을 참조하여 보다 상세히 설명될 것이다. 본 발명은 많은 다른 형태로 구현될 수 있으며, 여기에서 제시하는 실시예에 한정되는 것으로 해석되지 않아야 한다. 오히려 이 실시예들은 해당 기술분야의 기술자에게 본 발명에 대한 완전한 이해를 제공하기 위한 예시로서 제공된다.

특히 예시들이 인터넷 및 월드 와이드 웹(World Wide Web) 상에서 콘텐츠를 생성, 포맷, 전송 및 표시하기 위한 특정 표준 및 포맷에 대하여 언급하고 있지만, 본 발명은 여기에서 언급된 특정 표준에 한정되는 것으로 해석되지 않아야 함이 이해되어야 할 것이다.

도 1은 본 발명의 다양한 측면을 시행하기 위한 환경으로서 이용될 수 있는 일반 컴퓨팅 장치(100)를 설명하고 있다. 도 1에서, 장치(100)는 중앙처리장치(CPU)(101), 메모리(102), 통신 포트(들) 혹은 입출력 포트들(I/O ports)(103), 비디오 인터페이스(104) 및 네트워크 인터페이스(105)를 포함한다. 이 유닛들은 시스템 버스(106)를 경유하여 서로 간에 통신한다.

ROM, RAM, 플래시 메모리, 하드 드라이브, 혹은 고정식 및 탈착식 메모리의 그 밖의 조합을 포함할 수 있는 메모리는 기본 입출력 시스템(BIOS)(141), 운영체제(operating system)(142), 어플리케이션과 장치 드라이버를 포함하는 다양한 컴퓨터 프로그램(143), 다양한 타입의 데이터(144) 및 매크로 및 스크립트와 같은 다른 실행가능한 파일 혹은 명령어(145)와 같은 시스템의 다양한 소프트웨어 컴포넌트들(software components)를 저장한다.

입출력 포트(103)는 사용자 입력 장치(예를 들어, 키보드, 마우스 혹은 리모컨(remote control)), 프린터, 미디어 플레이어, 외부 메모리 장치, 및 예를 들면 위성 항법 장치 수신기(GPS) 혹은 텔레비전 셋탑박스와 같은 특수 용도 장치와 같은 하나 이상의 로컬 장치(110)에 연결될 수 있다. 입출력 포트(103)는 USB, PS/2, RS-232, 적외선(IR), 블루투스, 프린터 포트, 혹은 로컬 장치(110)를 위한 그 밖의 표준화 전용의 통신 인터페이스와 같은 포트의 조합일 수 있다.

비디오 인터페이스 장치(104)는 외부 모니터 혹은 LCD 디스플레이와 같은 통합 디스플레이(integrated display)일 수 있는 디스플레이 유닛(120)에 연결된다. 디스플레이 유닛(120)은 터치 감응 스크린을 포함할 수 있으며, 이 경우 디스플레이 유닛(120)은 사용자 입력 장치의 역할도 겸할 수 있다. 이러한 디스플레이 유닛(120)의 사용자 입력 장치 측면은 통신 포트(103)를 통해 통신하는 로컬 장치(110) 중 하나로서 고려될 수 있다.

네트워크 인터페이스 장치(105)는 장치(100)에 원격 장치(130)와 통신하기 위해 네트워크에 연결하는 능력을 제공한다. 도 1에서 단지 네트워크 인터페이스(105)와 원격 장치(130)를 연결하는 라인으로서 도시된 통신 네트워크는 예를 들어 로컬 영역 네트워크(local area network) 혹은 인터넷일 수 있다. 원격 장치(130)는 원칙적으로는 장치(100)와 유사한 통신 능력을 가지는 임의의 컴퓨팅 장치일 수 있지만, 전형적으로는 서버 혹은 네트워크 서비스를 제공하는 일부 다른 유닛일 수도 있다. 통신 네트워크가 임의의 공중 액세스 가능한 네트워크, 혹은 인터넷, GSM과 같은 셀룰러 모바일 네트워크, 공중 전화 네트워크, 케이블 네트워크, 혹은 아날로그 또는 디지털 방송 혹은 위성을 포함하는 네트워크의 조합일 수 있음이 해당 기술분야에서 통상의 기술자에 의해 이해될 것이다.

도 1에 도시된 장치(100)는 사이즈(size) 혹은 리소스(resources)에 관하여 특정 구현이나 실시예에 제한되지 않음이 이해될 것이다. 도시된 다양한 구성요소는 장치(100)에서 하나 이상의 통합된 유닛으로 구현되거나 몇 개의 유닛으로 분산되어 구현될 수 있다. 물론 다른 유닛이나 능력이 존재할 수 있다. 더구나, 장치(100)는 예를 들어 PC와 같은 범용 컴퓨터, PDA(personal digital assistant), 셀폰 혹은 스마트폰, 혹은 게임 콘솔, 텔레비전 셋탑박스 혹은 미디어 센터일 수 있다.

본 발명의 다양한 측면은 장치(100)에 어플리케이션으로 설치될 수 있는 사용자 에이전트나 브라우저의 구성요소 및/또는 기능으로서 구현될 수 있다. 도 2는 이러한 사용자 에이전트에 존재할 수 있는 수많은 모듈의 예시를 보여준다. 모듈은 전형적으로 CPU(101)에 의해 시행될 수 있는 소프트웨어 모듈, 혹은 소프트웨어에서의 일부 다르게 구현된 것일 수 있다.

도 2의 사용자 에이전트(user agent)(200)는 사용자에게 도 1에 도시된 디스플레이 유닛(120) 상에 표시될 수 있는 사용자 인터페이스(201)를 제공한다. 사용자 인터페이스(201)는 사용자가 입력장치를 사용하여 사용자 에이전트(200)로 검색하기 원하는 문서 혹은 서비스의 URI를 입력할 수 있는 주소 필드(202)를 포함할 수 있다. 주소 필드(202)는 마우스, 스크롤링 장치 혹은 표시된 아이템을 선택하기 위한 기타 수단과 같은 포인팅 장치를 이용하는 사용자에 의해 활성화될 수 있는 표시 링크일 수도 있다. 그 대신에 URI는 사용자 에이전트(200)에 의해 이미 로드된 문서 혹은 스크립트의 코드 내에 특정되어 있을 수 있다.

어느 경우에서든 URI는 사용자 에이전트(200)에 연관되거나 그 일부분인 된 사용자 인터페이스(201)의 입력 부분을 나타내는 윈도우 및 입력 매니저(203)에 의해 수신될 수 있다. 그 후 URI는 URI에 의해 식별되는 문서의 일부분으로서, 수신된 데이터를 관리하는 문서 매니저(204)로 포워딩될 수 있다.

문서 매니저(204)는 URI를 URI 매니저(205)로 포워딩하고, URI 매니저(205)는 다시 통신 모듈(206)이 식별된 리소스로의 액세스를 요청하도록 한다. 통신 모듈(206)은 HTTP(hypertext transfer protocol) 혹은 HTTPS(HTTP over Secure Socket Layer) 혹은 FTP(File Transfer Protocol) 같은 타 프로토콜을 이용하는 네트워크를 통해 서버 같은 원격 장치(130)에 액세스하고 데이터를 검색할 수 있다. 통신 모듈(206)은 로컬 메모리(102)에 저장된 데이터를 액세스할 수도 있다.

장치(100) 외부에서의 통신이, 예를 들어 URI를 액세스하기 위해 사용되는 프로토콜에 의해 특정되는 것처럼 암호화되도록 요청된다면, 암호화/복호화 모듈(207)은 URI 매니저(205)와 통신 모듈(206) 사이의 통신을 처리한다.

요청에 대한 응답으로 통신 모듈(206)에 의해 수신된 데이터는 URI 매니저(205)로 포워딩된다. 그 후 URI 매니저(205)는 문서 및 이미지 캐시(209)를 관리하는 캐시 매니저(208)를 이용하여 로컬 메모리(102) 내에 수신된 콘텐츠의 사본을 저장할 수 있다. 이후에 동일한 URI가 요청된다면, URI 매니저(205)는 캐시 매니저(208)로부터 그것을 요청할 수 있으며, 캐시된 사본이 삭제되지 않았다면 캐시 매니저(308)는 캐시(209)로부터 데이터를 검색하고 URI 매니저(205)로 포워딩할 것이다. 이 경우에 동일한 URI가 두번째 요청될 때 원격 장치(130)로부터 데이터를 다시 검색할 필요가 없을 것이다.

URI 매니저(205)는 HTML, XML 및 CSS와 같은 콘텐츠를 파싱(parsing)할 수 있는 파서(parser)(210)로 수신된 데이터를 포워딩한다. 그 후 콘텐츠는 그 타입 및 성질(nature)에 따라 ECMA스크립트 엔진(211), 문서 객체 모듈(DOM, document object model) 구조를 다루기 위한 모듈(212) 및/또는 레이아웃 엔진(213)에 의해 추가적으로 처리될 수 있다.

검색된 콘텐츠의 이러한 처리는 문서 매니저(204)에 의해 관리되며, 또한 문서 매니저(204)는 검색된 콘텐츠의 처리 결과로서 추가적인 URI 요청을 URI 매니저(205)로 포워딩할 수 있다. 이러한 추가적인 URI는 원본 URI에 의해 특정된 문서 내에 내장되어야 하는, 예를 들면 이미지 혹은 다른 추가적인 파일을 지정할 수 있다.

지정된 문서의 콘텐츠를 나타내는 데이터가 처리되었으면, 렌더링 엔진(214)에 의해 표현되고 사용자 인터페이스(201) 상에 표시되도록 문서 매니저(204)로부터 포워딩된다.

그러므로 설명된 다양한 모듈이 도 1의 장치(100)의 CPU(101)에 의해 실행될 수 있으며, 프로세서는 시스템 버스(들)(106)를 통해 명령어와 데이터를 수신한다. 통신 모듈(206)은 장치(100)의 네트워크 인터페이스(105)를 이용하여 원격 장치(130)와 통신할 수 있다. 물론 다양한 모듈의 기능은 더 적은 수의 큰 모듈로 통합되거나 몇몇 모듈로 분산되거나 복제될 수 있다.

또한 전술한 사용자 에이전트(200)는 어플리케이션 프로그램(143)으로 구현될 수 있지만, 일부 기능은 운영 시스템(142)의 일부분이거나 심지어는 장치(100)의 BIOS(141)의 일부분일 수도 있음이 이해되어야 할 것이다. URI 요청에 대한 응답으로 수신한 콘텐츠는 이하 설명될 데이터(144), 스크립트(145) 혹은 이들의 조합일 수 있다.

도 1 및 2는 한정하려는 의도가 없는 점에 주의해야 한다. 여기에 도시된 장치(100) 및 사용자 에이전트(200)는 해당 기술분야에서 통상의 기술을 가진 자에 의해 고려되는 일부 모듈이나 기능의 생략 및/또는 다른 모듈이나 기능의 추가에 의해 수정될 수 있다.

웹페이지와 같은 전자 문서는 전형적으로 HTML, XHTML 혹은 XML과 같은 마크업 언어(markup language)를 이용하여 생성되며, 이들은 보통 표준 컴퓨터 디스플레이를 위해 설계된 레이아웃이 정해져 있다. 하지만, 브라우저와 같은 사용자 에이전트가 점점 더 PDA, 셀폰, 텔레비전 셋탑박스 및 게임 콘솔과 같은 다른 타입의 장치에 설치되고 있다. 이러한 장치는 다른 사이즈, 형태 및 해상도를 가진 다양한 디스플레이를 가지고 있다. 이러한 장치들은 유의미한 방식으로 웹페이지를 표현하고 표시할 수 없을 수도 있다. 문서는 읽을 수 없을 정도로 사이즈가 감소되거나, 한번에 문서의 매우 작은 일부분만이 표시되거나, 문서의 레이아웃이 결코 그 문서의 창작자가 의도하지 않은 방식으로 변경될 수 있다.

이제 도 3a 내지 3c를 참조하여 설명한다. 도 3a는 일 예에 따른 웹페이지(문서)(300)의 전체 레이아웃을 보여준다. 웹페이지(300)는 좌측 여백(left margin)(301)과 메인 콘텐츠 영역(main content area)(302)을 포함한다. 메인 콘텐츠 영역(302)은 텍스트(text)(305)가 뒤따르는 제1 헤드라인(303)으로 시작하는 기사(article)와, 추가 텍스트(307)가 뒤따르는 제2 헤드라인(306)을 포함한다. 좌측 여백(301)은 동일 웹사이트의 다른 부분에 대한 하이퍼링크일 수 있는 수많은 메뉴 항목(menu entries)을 가지는 탐색 메뉴(navigation menu)(304)를 포함한다. 도 3a에 도시된 것과 같이, 텍스트(305)의 래핑(wrapping)은 웹페이지(300)의 원본 레이아웃에 상응하도록 이미 구현되어 있을 수 있다.

도 3b는 브라우저 윈도우 혹은 사용자 에이전트 윈도우에 표시된 도 3a의 웹페이지(300)의 일부분을 보여준다. 도 2를 참고하여 전술하였던 사용자 에이전트(200)가 웹페이지(300)를 표시하는데 이용될 수 있으며, 도 1을 참고하여 전술하였던 장치(100)의 디스플레이(120) 상에 윈도우가 표시될 수 있다. 전체 문서(300)에 대한 뷰포트(viewport)의 사이즈는 단순히 문서를 표시하는데 이용되는 장치 및/또는 사용자 에이전트(200)의 속성(property)에 의해 결정되거나, 예를 들면 편안한 읽기를 위해 텍스트(305)를 충분히 큰 글자로 표시하도록 사용자에 의해 유발된 문서를 확대하는 줌 작동(zoom operation)의 결과일 수도 있다.

윈도우는 탐색 버튼(311), 요구되는 문서(300)의 URL이 입력될 수 있는 주소 필드(312), 및 수직 스크롤바(313)를 포함한다. 브라우저 윈도우의 나머지 부분은 문서(300)의 일부분을 표시하기 위해 이용된다. 이러한 윈도우의 나머지 부분은 뷰포트라 칭하기로 한다. 도 3b의 뷰포트는 도 3a에 점선으로 표시되어 있다. 도 3b에 도시된 예시에서 뷰포트는 웹페이지(300)의 전체 너비를 표시하기에 충분한 폭을 가지지 못함에 주의해야 할 것이다. 또한, 문서(300)의 상부 부분만이 보여질 수 있고 제2 기사(306)는 뷰포트 아래에서 있어 보이지 않게 된다.

뷰포트 아래에 있어 보이지 않는 문서(300)의 일부분을 보기 위해서 수직 스크롤바(313)가 제공되었다. 이 스크롤바(313)는 문서(300)에 대하여 아래로 뷰포트를 움직이는 것이 가능하도록 한다. 보통 이는 사용자에게 크게 불편하지는 않은데, 텍스트가 문서의 상단으로부터 하단으로 읽혀지며, 스크롤링(scrolling)은 단지 한 방향, 즉 아래 방향으로만 필요할 것이기 때문이다. 텍스트가 몇 개의 세로단에 존재하는 경우, 페이지의 상단으로 스크롤 후진할 필요가 있을 수 있다. 하지만 이것이 용납할 수 없는 불편함으로 경험될 필요는 없는데, 이는 하나의 페이지가 거의 둘 혹은 셋 이상의 세로단을 포함하지 않을 것이며, 문서의 상단으로 스크롤링 후진(scrolling back up)하는 것은 단지 한번 혹은 기껏해야 몇번, 그리고 전체 세로단을 완전히 읽은 후에만 필요할 것이기 때문이다.

또한 도 3b에서는 뷰포트가 문서(300)의 전체 너비를 표시할 정도로 충분한 폭을 가지고 있지 않기 때문에 수평 스크롤바(314)가 제공되어 있음을 주의해야 할 것이다. 텍스트(305)를 읽기 위해서는 반복적으로 양방향으로 이 스크롤바(314)를 이용할 필요가 있을 것이다. 아래쪽 방향으로 주로 이용되고 위쪽 방향으로는 매우 드물게 이용되는 수직 스크롤바(313)와는 반대로, 뷰포트의 우측 가장자리(right edge)를 넘어서까지 연장된 텍스트의 각 라인에 대해서 수평 스크롤바(314)가 양방향으로 이용되어야 한다. 이는 사용자에게 용납할 수 없는 불편함을 나타낸다.

도 3c는 디스플레이(120) 상에 표시된 웹페이지(300)의 일부분을 보여준다. 디스플레이(120)의 뷰포트는 도 3b에 도시된 것과 동일할 수 있지만, 이 경우에 텍스트(305)는 텍스트(305)의 각 라인이 뷰포트 내에 적합하도록 (도 3a의 레이아웃에 의해 제한된 원본 텍스트 래핑에 관해서) 재래핑(rewrap) 되어 있다. 사용자 에이전트 윈도우는 탐색 버튼(311) 및 수직 스크롤바(313)와 같이 도 3b에 도시된 브라우저 윈도우와 동일한 특징을 포함할 수 있지만, 텍스트(305)의 재래핑 결과 폭이 좁아진 문서(300)가 생성되고 수평 스크롤바(314)의 필요성이 제거될 수 있다. 이 예시에서 수평 스크롤바(314)는 탐색 메뉴(304)를 보기 위해 좌측으로 스크롤 가능하도록 하지만, 스크롤바(314)의 길이 및 위치는 현재 뷰포트의 우측에 콘텐츠가 없으며 텍스트(305)를 읽기 위해 수평 스크롤링이 필요없음을 나타낸다. 스크롤바(313)가 뷰포트의 높이에 비해 많이 짧아졌기 때문에 수직 스크롤바(313)는 문서(300)가 더 길어졌음을 나타낸다.

재래핑이 전체 문서(300)를 뷰포트 내로 가져옴을 의미할 필요는 없음이 이해될 것이다. 재래핑의 용도는 주로 뷰포트 내에 하나의 텍스트 블록 혹은 텍스트의 한 세로단이 있도록 함일 수 있다. 이미지, 탐색 메뉴(304), 혹은 텍스트(305)의 추가 세로단과 같은 추가 요소는 여전히 뷰포트 밖에 위치할 수 있으며 수평 스크롤링이 필수적일 수 있다. 하지만, 텍스트의 특정 세로단을 읽는 동안 수평 스크롤링이 더 이상 필요하지 않을 수 있다.

또한 텍스트(305)의 재래핑이 다른 규칙이나 방법에 상응하도록 문서(300)에 제한될 수 있으며, 도 3c에 도시된 결과가 다른 방법의 최종 결과일 수 있음이 이해되어야 할 것이다. 이는 도 3a 및 도 3c의 예시와 유사하지만, 두 개의 이미지가 추가된 도 4a 및 4b에 도시된 예시를 참조하여 간단히 논의될 것이다.

제1 대안은 도 4a 및 4b에 도시된 것과 같이 문서가 로드될 때 모든 텍스트를 재래핑하는 것이다. 이 전략에 따르면 전체 문서의 레이아웃이 변경된다. 도 4a는 탐색 메뉴(404)를 포함하는 좌측 여백(401)과, 제1 헤드라인(403), 제1 텍스트(405), 제2 헤드라인(406) 및 제2 텍스트(407)을 포함하는 메인 콘텐츠 영역(402)을 포함하는 문서(400)의 레이아웃을 보여준다. 또한 제1 이미지(408) 및 제2 이미지(409)가 포함된다.

도 4b는 동일한 문서(400)가 텍스트(405, 407)의 재래핑 후에 어떻게 나타날 수 있는지를 보여준다. 텍스트 세로단이 더 좁고 길어지지만 레이아웃의 나머지는 보호되고 있음을 주목해야 할 것이다. 이는 여백(whitespace)의 양을 증가시키고 전체 문서(400)가 상당히 길어지도록 한다. 정상 모드(normal mode)에서 표시된 문서(400)가 체계적이지 못한 것으로 보일 수 있으며, 서로 근접하도록 의도된 요소들(예를 들면, 기사 및 삽화)이 연결되지 않은 것처럼 보일 수 있다. 줌인 방식으로 표시된 텍스트(405, 407)는 도 3c에 도시된 것과 유사하게, 편안한 방식으로 알아보기 쉬울 수 있지만, 텍스트에 동반되는 삽화를 보기 위해서는 상당한 수평 스크롤링이 필요할 수 있다.

이러한 불편함은 다양한 요소들 사이의 관계를 유지시키기 위해 모든 블록의 폭을 더 좁게 함으로써 극복할 수 있다. 하지만, 더 복잡한 페이지 레이아웃을 가지게 되면 이러한 접근이 바람직하지 않거나 심지어는 불가능할 수 있으며, 페이지의 저자에 의해 고려된 대로의 원본 레이아웃에서 급진적인 변경을 야기하는 추가적인 조치(예를 들면, 이미지의 리사이징)를 수반해야 할 수 있다.

본 발명에 부합하는 원리에 따르면, 사용자 에이전트(200)에 의해 로드된 문서가 파싱되고, 그 레이아웃은 그 문서의 저자의 원래 의도(original intent)에 부합하는 방식으로 결정된다.

도 4a에 도시된 예시는 http://www.w3.org/TR/CSS21/에 있는 월드 와이드 웹 컨소시엄(W3C)에 의해 공표되고 참조로서 포함된 CSS(Cascading Styles Sheets) 레벨 2 개정 1에 기초하고 있다. 하지만, 본 발명은 CSS의 이번 버전 혹은 특히 CSS에 제한되지 않는다.

도 2에 도시된 것과 같은 사용자 에이전트(200)에 의해 마크업 언어 문서가 수신되면 문서는 전형적으로 전술한 것과 같이 처리된다. 문서의 DOM 구조에 기초하여 레이아웃 엔진(213)은 DOM 트리 내에 있는 요소들(elements)에 기초한 많은 박스들(boxes)을 생성한다.

"요소(elements)"라는 용어는 해당 기술분야에서 통상의 지식을 가진 자에 의해 마크업 언어 문서 지시 구조(markup language document indicating structure) 내의 구문 구조물(syntactic constructs)을 언급하는 것으로 인식된다. 이러한 요소는 콘텐츠(예를 들면, 텍스트나 이미지)를 포함하는 구조적 유닛을 정의할 수 있다. "박스(box)"라는 용어는 해당 기술분야 내에서 특정 요소의 콘텐츠에 의해 차지되어 있는, 문서의 레이아웃 내에 있는 사각형 공간을 언급하는 것으로 인식된다.

CSS 2.1 박스 모델의 일반적인 접근에 따르면, 블록 박스로 정의된 박스는 후손 박스(descendant box)를 위한 컨테이닝 블록(containing block)을 설정(establish)한다. (인라인 박스(inline box)와 같은 일부 다른 타입의 블록은 블록 박스가 아니다.) 또한, 다양한 테이블 요소(table element)와 같이 박스로 정의되지 않은 일부 다른 타입의 요소도 컨테이닝 블록을 설정한다.

페이지 상의 요소의 크기(dimensions) 및 위치(position)는 그 요소를 포함하는 블록 박스의 가장자리(edge)를 계산함으로써 결정된다. 도 4a에서 최상위 레벨 박스는 전체 페이지에 대한 컨테이닝 블록이다. 전형적으로 좌측 여백(401)은 전체 페이지에 대한 컨테이닝 블록의 후손 중 하나에 포함될 수 있으며, 메인 콘텐츠는 다른 후손 박스에 포함된다. 그리고 메뉴(404)의 위치는 컨테이닝 블록의 가장자리에 기초하여 계산될 수 있다. 헤드라인(403), 이미지(408) 및 텍스트(405)는 메인 콘텐츠에 대한 박스를 그것의 컨테이닝 블록으로 가지는 박스 내에 포함될 수 있다. 또한 헤드라인(403), 이미지(408) 및 텍스트(405)는 각자 개별적인 컨테이닝 블록을 가질 것이며, 이 컨테이닝 블록들은 세 개의 요소 모두를 포함하는 블록의 후손일 것이다. 유사한 구조가 참조번호 406, 407 및 409의 요소에 대해서도 이용될 수 있다.

도면에 도시된 레이아웃에 대해서 컨테이닝 블록의 다른 구조도 가능함이 해당 기술분야에서 통상의 기술을 가진 자에 의해 이해될 것이다.

헤드라인(403)의 위치는 그것의 컨테이닝 블록의 가장자리에 기초하여 레이아웃 엔진(213)에 의해 계산될 수 있다. 텍스트(405)의 경우에도 동일하며, 그 라인은 그 컨테이닝 블록의 박스의 우측 가장자리 및 이미지 박스의 가장자리에 대해 래핑될 것이며, 이는 만약 저자가 디폴트 텍스트 래핑보다 더 우선시하는 명령어를 포함하지 않은 경우일 것이다.

이미 설명한 것과 같이, 예를 들면 작은 스크린을 가지는 장치(100) 상에서, 수평으로 스크롤할 필요없이 텍스트를 줌인하고 읽는 것이 가능하도록 텍스트를 더 짧은 라인으로 래핑하는 것이 바람직할 수 있다. 도 4b는 텍스트가 더 짧은 라인으로 래핑된 후 동일한 페이지(400)의 레이아웃이 보일 수 있는 형태를 보여준다. 줌인 작동이 수행된 이후 브라우저 윈도우의 뷰포트에 적합하도록 라인이 래핑될 것이기 때문에 이러한 레이아웃이 바람직할 수 있다. 하지만, 예를 들면 너무 많은 여백을 제공하고 문서(400)를 불필요하게 길게 만들기 때문에, 줌인 작동에 우선하여 도 4b에 도시된 레이아웃이 사용자에게 불편할 수 있음은 도면으로부터 명확할 것이다.

본 발명의 원리에 부합하도록 사용자 에이전트(200)는 줌인 작동에 대한 응답으로 텍스트를 동적으로 재래핑하도록 구현될 수 있다. 그러면 도 4a에 예시된 것과 같이 문서(400)는 줌인 작동 이전에 저자에 의해 원래 의도된 레이아웃에 부합하도록 디스플레이될 수 있고, 도 4b에 예시된 것과 같이 줌인 작동의 일부분으로서 텍스트가 동적으로 재래핑된다.

도 5는 본 발명의 일 실시예에 따른 방법의 단계를 보여주는 순서도이다.

우선 단계 501에서 문서(300, 400)가 사용자 에이전트(200)에 의해 로드된다. 그리고 다음으로 단계 502에서 그 문서의 저자에 의해 창작된 디자인 및 HTML과 CSS와 같은 표준의 스펙(specification)에 부합하도록 문서(300, 400)가 파싱되고 레이아웃이 생성된다. 이러한 레이아웃은 사용자 에이전트(200)가 설치된 장치(100)의 메모리(102) 상에 존재할 수 있다. 이 메모리(102)는 가상 디스플레이(virtual display)를 제공하는 것으로 고려될 수 있다. 이 가상 디스플레이의 해상도(resolution)는 픽셀 면에서 원본 문서의 크기에 부합할 것이다.

이제 단계 503에서 문서(300, 400)는 장치 디스플레이(100) 상에 표시될 수 있다. 이는 렌더링 엔진(214)에 의해 다뤄질 수 있으며, 디스플레이(120)가 상대적으로 저해상도를 가질 수 있기 때문에 페이지(300, 400)의 재설계(rescaling)가 필수적일 수 있다. 장치 디스플레이(120)의 해상도에 기초하여 줌 레벨(zoon level)이 결정될 수 있다. 예시로서, 장치(100)는 480 픽셀의 수평 해상도를 가지는 디스플레이(120)를 포함할 수 있다. 800 픽셀의 수평 해상도를 가지는 웹페이지(300, 400)를 표시하는데 수평 스크롤링을 피하기 위해서 30%의 줌 레벨로 페이지(300, 400)를 표시하는 것이 필수적일 것이다. 얼마간의 수평 스크롤링을 용인함으로써 예를 들면 헤드라인의 더 나은 가독성을 획득하도록 타협하고 이미지를 식별하기 쉽도록 하는 것이 바람직할 수 있다. 60%의 줌 레벨은 예를 들면, 480 픽셀의 수평 해상도를 가지는 디스플레이(120) 상에 685 픽셀의 수평 해상도를 가지는 뷰포트를 야기할 것이다.

이제 사용자는 문서(300, 400)가 수평 혹은 수직으로 스크롤되는 것을 볼 수 있으며, 포인팅 장치를 가지고 스크린(120) 주위를 움직일 수 있다. 단계 504에서 줌 레벨을 변경하는 명령어(instruction)를 기다리는 동안, 사용자 에이전트(200)는 사용자로부터의 다른 명령어에 반응할 수 있다.

단계 505에서 사용자 에이전트(200)는 줌 레벨을 변경하는 명령어가 수신된 것으로 판단하면, 줌인 될 영역을 결정할 필요가 있을 것이다. 사용자의 이러한 선택에 도움이 되는 다양한 방법이 제안되어 왔다. 본 발명은 어느 하나의 방법에 한정되지 않는다. 사용자로부터 줌인 요청을 수신하였을 때, 사용자 에이전트(200)는 단순히 문서의 좌상단 코너(upper left corner) 상에 줌인할 수 있다. 다른 대안은 사용자가 디스플레이(120) 상에서 돌아다니는 줌인된 뷰포트를 나타내는 사각형을 움직이도록 허용하는 사용자 인터페이스를 포함한다. 줌인 작동은 사각형에 의해 대표되는 영역 상에서 수행될 것이다. 다른 대안은 스크린(120) 상의 어딘가를 사용자가 클릭 혹은 더블클릭하도록 하는 것을 포함하며, 이에 의해 사용자 에이전트(200)는 사용자에 의해 클릭된 위치를 포함하는 영역 상에서 줌인할 것이다. 이 영역은 클릭된 위치가 그 영역의 중심에 있도록 선택되거나 혹은 더 복잡한 방법이 이용될 수 있다. 이러한 방법 중 하나가 미국특허출원 US 11/525,177에 설명되어 있으며, 그 전체가 참조로서 포함된다.

문서(300, 400)가 줌되도록 하는 줌 레벨은 편안한 읽기가 가능하도록 하는 정도, 예를 들어 150%로 결정될 수 있다. (100%의 줌 레벨이 데스크탑 모니터에서 편안할 수 있지만, 장치의 픽셀 사이즈가 작아질수록 추가적인 주밍(zooming)이 필요할 수 있다.)

결과적으로, 150%의 줌 레벨에서는 320 픽셀에 상응하는 디스플레이(120) 상에 480 픽셀보다 더 긴 텍스트 라인이 없도록 텍스트를 래핑하는 것이 바람직할 수 있다. 이러한 재래핑은 단계 506에서 수행될 수 있다.

텍스트가 재래핑된 후, 전체 문서(300, 400)의 레이아웃이 다시 생성되어야 한다. 이는 단계 507에서 수행될 수 있으며, 메모리(102)의 가상 디스플레이에서 도 4b에 예시된 것과 같은 문서 레이아웃을 생성하기 위함이다. 그리고 단계 503으로 되돌아간 후 이러한 가상 레이아웃은 장치의 디스플레이(120) 상에 문서(300, 400)를 다시 표시하기 위해서 이용될 수 있다. 물론 이번에 줌인 된 뷰포트에 기초하여 문서(300, 400)가 표시된다.

줌 레벨이 다시 변경될 때, 즉 사용자가 다시 줌아웃(혹은 실시예에 따라 다른 가능한 줌 레벨로 변경)할 때, 단계 506에서 텍스트는 다시 재래핑되고, 새로운 레이아웃이 생성되며, 문서(300, 400)가 다시 단계 503에서 표시된다.

도 5에 도시되고 앞서 설명한 예시는 사용자 에이전트(200)가 단지 2개의 줌 레벨 사이에서 전환되고 뷰포트가 항상 스크린의 전체 너비를 가득 채우는 것을 가정하고 있다. 본 발명은 이러한 사항에 한정되지 않으며, 본 발명의 원리에 부합하는 다양한 실시예에 따라 사용자는 다른 줌 레벨로 줌(zoom)하거나 뷰포트가 디스플레이(120)의 전체 너비를 가득 채우지 않도록 뷰포트의 너비를 변경할 수 있다. 후자의 특별한 경우로서 사용자 에이전트(200)는 사용자가 세로방향 뷰(portrait view)와 가로방향 뷰(landscape view) 사이에서 전환하는 것을 허용한다. 예시로서, 480x640 픽셀 크기를 가지는 디스플레이는 세로방향 모드(portrait mode)일 때 685 픽셀 폭(줌아웃의 경우)과 320 픽셀 폭(줌인의 경우)을 가지고, 가로방향 모드(landscape)일 때 914 픽셀 폭과 426 픽셀 폭을 가지는 뷰포트 사이에서 전환될 수 있다. (물론 디스플레이(120)의 해상도는 장치 하드웨어에 의해 결정된다. 뷰포트에 관하여 이야기하자면, 원본 문서(300, 400)에 대한 픽셀 수가 참조된다.) 장치(100) 상에서 줌인 될 때 텍스트 래핑은 세로방향 모드에서는 320 픽셀, 가로방향 모드에서는 426 픽셀로 강제될 것이다. 이는 구성 파일(configuration file) 내에 파라미터로서 설정되어 있을 수 있거나, 예를 들면 렌더링 엔진(213) 혹은 윈도우 매니저(203)로부터 리포트된 장치(100)에 관한 정보에 기초하여 사용자 에이전트(200)에 의해 결정될 수도 있다.

사용자가 줌 레벨 및 뷰포트의 사이즈를 동적으로 변경하도록 허용하는 본 발명의 일 실시예가 도시된 도 6을 참조하여 설명한다. 줌 레벨의 변경은 전형적으로 윈도우 혹은 전체 디스플레이(120)에 관련된 슬라이더(slider)를 통해 이루어질 수 있으며, 뷰포트의 사이즈는 예를 들면 포인팅 장치를 이용하여 윈도우의 가장자리를 드래그 앤 드롭(drag and drop)함으로써 조작할 수 있다.

우선 단계 601에서 문서(300, 400)가 로드된다. 다음 단계 602에서 레이아웃이 결정된다. 다음 단계 603에서 문서(300, 400)는 장치 디스플레이 상에 표시된다. 그리고 사용자 에이전트(200)는 대기 단계 604에서 줌 레벨 혹은 뷰포트 너비(viewport width)를 변경하도록 하는 명령어를 기다리는 동안 다른 기능을 수행할 수 있다. 이 단계들은 도 5를 참조하여 설명한 실시예에 상응하여 수행되는 단계 501, 502, 503, 504에 대응될 수 있다.

그리고 다음 단계 605에서 줌 레벨이나 뷰포트 너비가 변경된 것으로 판단되면, 프로세스는 새로운 뷰포트 너비가 계산될 다음 단계 606으로 이동할 것이다. 줌 레벨은 사용자 입력으로부터 결정될 수 있다. 뷰포트 너비는 사용자 입력이나 렌더링 엔진(213) 혹은 윈도우 매니저(203)로부터 획득된 정보에 기초하여 결정될 수 있다. 우선 하드웨어 해상도 면에서 뷰포트 너비가 결정된다. 장치(100)가 480 픽셀의 수평 해상도를 가지는 디스플레이(120)를 포함하는 예시에서 전체 스크린(120)이 사용된다면 하드웨어 기반의 뷰포트는 앞서 도 5를 참조하여 설명한 예시에서와 같이 480 픽셀이 된다. 하지만, 사용자가 문서(300, 400)가 표시되는 윈도우의 사이즈를 감소시키거나 다른 콘텐츠(예를 들면, 수직 스크롤바 혹은 탐색 아이콘 같은 콘텐츠)가 수평 방향으로 일정 개수의 픽셀을 차지하면, 뷰포트는 수평 방향으로 예를 들어 400 픽셀로 감소될 수 있다.

뷰포트의 하드웨어 해상도에 기초하여, 원본 문서(300, 400)의 해상도 면에서 뷰포트의 실제 사이즈가 결정될 수 있다. 이전 예시에서 설명한 것과 같이 만약 줌 레벨이 150%라면, 텍스트 래핑은 266 픽셀로 강제될 수 있다. 하지만, 예를 들어 사용자가 180%로 줌인 하기로 결정한다면, 텍스트 래핑은 수평 스크롤링을 피하기 위해 222 픽셀로 강제되어야 할 것이다.

이제 사용자가 계속 뷰포트를 더 좁게 하거나 줌 레벨을 증가시킨다면 더 짧은 라인 길이로 텍스트를 재래핑하더라도 더 이상 의미가 없는 지점에 이르게 될 것임을 인식해야 할 것이다. 결과적으로 텍스트 재래핑을 위한 하한(lower limit)이 강제될 수 있다. 만약 뷰포트가 이 한계점보다 더 좁게 된다면, 텍스트는 한계점 픽셀값(threshold pixel value)으로 재래핑될 수 있으며, 수평 스크롤링이 필요하게 될 수 있다.

유사하게 사용자가 줌인을 시작하자마자 재래핑을 강제하기 보다는 문서 저자 혹은 정상적인 CSS 규칙에 의해 결정된 것을 제외하고는 텍스트 래핑이 강제되지 않도록 상한 한계점(upper threshold)이 설정되어 있을 수 있다. 예를 들어 어떤 줌 레벨 아래에서는 텍스트가 편안히 읽힐 수 없을 정도로 매우 작아짐을 추정할 수 있으며, 텍스트 라인을 가로지르는 수평 스크롤링이 필요하게 될지라도 전체로서의 문서(300, 400)의 콘텐츠의 인상(impression)을 획득하기 위해 저자가 창작한 레이아웃으로 문서(300, 400)를 보는 것이 보다 중요하기 때문에 이러한 설정이 이루어질 수 있다.

단계 607에서는 (단계 606에서 결정된 것과 같은) 뷰포트 너비의 변화 및 텍스트 재래핑을 위한 최대 혹은 최소 한계점을 고려하여 텍스트 재래핑이 필요한지 여부를 결정할 수 있다. 재래핑이 필요하지 않다면, 프로세스는 단계 603으로 되돌아가서 이미 이루어진 변화에 상응하도록, 하지만 텍스트의 재래핑은 강제되지 않고서 문서(300, 400)를 표시할 수 있다.

반면에 재래핑이 필요한 것으로 단계 607에서 결정된다면, 프로세스는 단계 608로 이동하여 계산된 뷰포트 너비에 대하여 텍스트가 재래핑되도록 한다. 이 단계는 단계 506에 대응될 수 있다. 그리고 단계 609에서 재래핑된 텍스트를 가지는 페이지의 레이아웃이 생성되며, 이는 단계 507에 대응될 수 있다.

그리고 프로세스는 단계 603으로 되돌아가 새로운 레이아웃에 따른 콘텐츠를 표시한다.

이미 언급한 바와 같이 줌인 하기 위한 영역을 선택하는 다양한 방법이 존재할 수 있다. 하지만, 재래핑의 결과 문서(400)의 크기가 변경될 수 있음이 도 4a 및 4b로부터 용이하게 인식될 것이다. 결과적으로 문서(300, 400) 내에서 선택된 영역 내에서 발생된 줌 레벨에서의 변경에 우선하는 위치를 계속 파악하고, 이에 상응하여 문서(300, 400)를 표시하는 것이 바람직할 것이다. 예시로서, 만약 사용자가 문서(300, 400)의 상단으로부터 몇 픽셀 떨어진 위치에 줌인 및 아웃하고 텍스트 재래핑이 문서(300, 400)의 길이를 상당히 변경하였다면, 줌인 후에 표시될 텍스트가 줌인 작동이 수행되기 이전에 선택된 텍스트가 아닐 것이다. 원래 줌인 된 텍스트가 문서(300, 400)의 상단에서 더 가까운 위치에 있을 것이다.

본 발명의 원리에 부합하는 일부 실시예에 따르면, 텍스트 재래핑 이후 문서(300, 400)의 레이아웃 내에서 줌인된 영역은 줌인 프로세스의 일부분으로서 사용자에 의해 선택되거나 타 기준에 의해 선택된 요소의 위치에 기초하여 선택된다.

제1 실시예에 따르면, 사용자는 장치(100)의 스크린(120) 상에 어딘가를 더블클릭함(혹은 그렇지 않다면 포인팅 장치로 위치를 선택함)으로써 줌인 기능을 작동시킨다. 그 위치는 필요에 의해 적어도 하나의 박스 내에 있어야 하며, 여기서 적어도 하나의 박스는 전체 문서의 컨테이닝 블록이다. 더구나 그 위치는 예를 들면 몇 개의 텍스트 요소 혹은 하나의 단락을 포함하는 기사의 박스 내에 있을 수 있다. 또한 그 위치는 이미지, 테이블 셀(table cell), 혹은 다른 타입의 요소를 식별할 수 있다.

텍스트의 재래핑을 뒤따라서 새로운 레이아웃이 생성된 이후에, 만약 사용자에 의해 선택된 위치가 몇 개의 박스 내에 있다면 (예를 들면, 텍스트를 포함하는 테이블 셀보다는 텍스트 단락이 선택되도록 하며, 전체 테이블보다는 테이블 셀이 선택되도록 하여) DOM 트리의 가장 하부에 있는 박스가 선택되도록 줌인 된 문서(300, 400)의 영역이 선택될 수 있다. 하지만, 추가적인 규칙이 예를 들면 일부 타입의 요소가 타 요소보다 선호되도록 하는 이러한 규칙(예를 들면, 텍스트가 이미지보다 선호되도록 함)보다 우선시되거나 대신 이용되도록 할 수 있다.

그리고 줌인된 영역(region)은 식별된 요소가 뷰포트의 좌상단 코너에 위치하도록 선택될 수 있다. (물론 뷰포트의 중심(center)과 같은 다른 대안이 본 발명의 원리에 부합할 수 있다.)

제2 실시예에 따르면, 포인팅 장치를 드래그함으로써 사각형을 정의하거나 줌인 이후의 뷰포트를 나타내는 사각형을 위치시키도록 포인팅 장치를 이용함으로써 사용자는 위치보다 영역을 선택하게 된다. 그리고 선택된 요소는 선택된 영역 내에 있는 요소로서, 수많은 기준 중 하나에 따라 선택되며, 문서(300, 400)의 DOM 구조 내에서의 위치, 요소 타입, 줌인 이전의 사각형 내에서의 위치(예를 들면, 사각형의 좌상단 코너에 가장 가까운 요소, 사각형의 좌측 가장자리에 가장 가까운 요소 혹은 문서(300, 400)의 중심에 가장 가까운 요소)를 포함할 수 있다.

본 발명의 원리에 부합하도록, 줌인되는 요소 뿐만 아니라 그 요소의 위치도 선택하는 것이 가능하다. 텍스트 내의 특정 단어 혹은 글자, 혹은 이미지 내의 위치의 좌표에 관한 정보가 입력 매니저(203)로부터 획득될 수 있으며, 이 정보는 줌인될 영역(region)을 결정하는데 이용될 수 있다.

CSS 박스 모델에 기초한 요소의 선택에 관한 추가적인 정보는, 참조로 포함되고 있으며 앞서 언급된 미국특허출원 US 11/525,177에서 찾을 수 있다.

그렇지만 예를 들면 아무 위치도 선택되지 않고 단순히 슬라이더를 이용하거나 임의의 값(예를 들면, 백분율(percentage)) 면에서 줌 레벨을 선택하거나 줌아웃과 줌인 사이에서 토글(toggle)됨으로써 줌 레벨이 선택된다면, 이용될 수 있는 다른 대안은 뷰포트의 좌측 가장자리의 위치를 유지하고, 줌인 이후에 뷰포트의 상측 가장자리를 따라 정렬된 뷰포트의 상측 가장자리에 보다 근접한 요소를 선택하는 것이다.

줌아웃 과정 혹은 어느 두 개의 줌 레벨 혹은 뷰포트 너비 사이에서 변경시켜 텍스트를 재래핑하는 과정에서 동일한 문제가 해결되어야 한다. 줌인 과정에서는 전술한 방법 중 하나에 따라 영역이 선택될 수 있다. 줌아웃도 실질적으로 다를 필요는 없다. 만약 더블클릭 혹은 다른 요소를 식별하는 방법에 의해 줌아웃이 작동된다면, 줌아웃 작동에 대한 응답으로 표시된 영역은 선택된 요소가 줌아웃된 뷰포트에서 미리 정의된 위치, 예를 들면 좌상단 코너를 획득하도록 선택될 수 있다. 만약 줌아웃이 단지 다른 줌 레벨을 선택하는 문제라면, 줌인된 뷰포트 내의 요소가 일부 미리 정의된 규칙에 따라 선택되고, 선택된 요소가 줌아웃되고 재래핑된 문서의 특정 위치를, 예를 들면 뷰포트의 좌상단 코너 혹은 중심을 받아들이도록 줌아웃된 뷰포트가 위치하도록 영역이 선택될 수 있다.

다시, 다른 대안은 뷰포트의 좌측 가장자리의 위치를 유지하고, 줌아웃된 이후에 뷰포트의 상측 가장자리를 따라 정렬된 뷰포트의 상측 가장자리에 근접한 요소를 선택하는 것이다.

물론 줌인 이전에 활성화된 뷰포트 위치로 되돌아가는 것도 가능할 것이다. 하지만, 이것은 줌인된 뷰(zoomed in view) 동안에 사용자가 문서(300, 400)의 완전히 다른 위치에서 스크롤할 수 있고, 문서(300, 400) 내에서의 모든 스크롤링에 우선하는 위치에 부합하는 줌아웃된 뷰(zoomed out view)로 되돌아가는 것은 사용자 친화적이지 않은 것으로 판단될 수 있기 때문에 바람직하지 않다.

물론 줌아웃의 가장 간단한 방법은 줌인된 뷰포트의 중심을 새로운 줌아웃된 뷰포트의 중심으로 유지하거나, 줌인된 뷰포트 내의 다른 위치(예를 들면, 좌상단 코너)를 동일한 방식으로 처리하는 것이다.

이제 도 4로 돌아가면, 박스(410, 411)는 줌아웃된 뷰 및 줌인된 뷰에서 뷰포트 위치가 선택될 수 있는 방법을 보여준다. 도 4a에서, 문서(400)는 문서 저자에 의해 정의된 대로 원본 레이아웃을 가지는 것으로 표시된다. 박스(410)는 줌아웃 모드에서 장치의 뷰포트를 도시한다. 도 4B는 텍스트(405, 407)의 재래핑 이후의 동일 문서를 나타내고 있다. 박스(411)는 줌인 이후의 뷰포트의 위치를 나타낸다. 줌인 작동은 예를 들어 텍스트(407) 상에서의 사용자의 더블클릭에 의해 유발되었을 수 있다. 이는 연관된 컨테이닝 요소의 박스를 선택했을 수 있으며, 박스(411)에 의해 도시된 것과 같이 줌인 뷰포트의 좌상단 코너에 위치할 수 있다.

반대 작동은 좌상단 코너에서 텍스트(407)를 가지는 줌아웃 영역을 야기한다. 하지만, 이 예시에 따르면 문서(400)는 줌아웃 모드에서 디스플레이의 뷰포트보다 더 넓을 수 없다. 결과적으로 코너에 텍스트(407)를 포함하는 박스를 위치시키는 것은 실제 뷰포트 외부에 좌측 여백(401)을 위치시키고 뷰포트의 우측 및 하단을 여백으로 채우는 것을 의미할 것이다. 이는 매우 유용하지 않을 수 있다. 따라서 이 경우 뷰포트는 박스(412)에 의해 도시된 것과 같이 위치될 수 있으며, 텍스트(407)가 가능한 한 뷰포트 내에서 높이 위치하도록 하지만, 문서(400)의 전체 너비가 보여지게 된다. 만약 문서(400)가 줌아웃 모드에서조차 뷰포트보다 넓다면, 텍스트(407)가 뷰포트의 좌측 가장자리에서 시작하도록 뷰포트가 위치되었을 수 있다.

전술한 예시에서 문서(300, 400) 내의 모든 텍스트는 재래핑이 강제되는 때마다 재래핑되어야 하는 것으로 가정되었지만, 줌 레벨의 변경이 강제될 때 문서(300, 400) 내의 텍스트 일부만이 재래핑되는 것이 본 발명의 원리에 부합된다. 일부 실시예에 따르면, 뷰포트 내부에 있는 텍스트만이 재래핑된다. 다른 실시예에 따르면, 적어도 부분적으로 뷰포트 내에 있는 박스를 가지는 컨테이닝 블록 내부에 있는 텍스트만이 재래핑된다. 또한 다른 대안도 고려될 수 있다.

본 발명은 전술한 실시예에 한정되지 않음이 해당 기술분야에서 통상의 기술을 가진 자에 의해 이해될 것이다. 예를 들어, 포인터 타입의 입력 장치 없으면 요소의 선택이 보다 복잡할 수 있지만, 일 요소로부터 타 요소로 이동하는 키보드 혹은 조이스틱 입력과 같은 수많은 대안이 구현될 수 있다.

페이지(300, 400) 내의 어딘가가 위치, 영역(region) 혹은 요소로 번역되거나 연관될 수 있는 한 사용자 입력 장치의 정확한 성질과 입력 장치로부터 수신한 데이터가 본 발명의 필수적인 부분은 아님이 이해되어야 한다.

문서(300, 400)의 레이아웃 내에서의 위치를 대표하는 사용자 입력이 수신되고 줌인 작동 혹은 줌아웃 작동을 유발하는 사용자 시도로서 식별될 때, 수신된 위치는 관심 영역(region of interest)을 선택하는데 이용될 수 있다. 본 발명에 부합하는 많은 실시예에서 사용자 입력은 줌 작동을 유발하기보다는 하이퍼링크를 클릭하거나 입력 필드 같은 특정 요소에 포커스를 주는 것과 같은 다른 용도를 위해 수신될 수 있다. 사용자 입력을 줌 작동을 수행하는 시도로서 식별하기 위해 다양한 방법이 이용될 수 있다. 일부 실시예에 따르면, 포인팅 장치의 위치를 나타내는 사용자 입력 및 마우스 클릭은 포인팅 장치의 위치가 예를 들어 하이퍼링크, 버튼, 입력 필드, 혹은 드롭다운 메뉴와 같은 활성 요소(active element)에 연관되어 있지 않음을 규정하는 입력으로서 식별될 수 있다. 다른 실시예는 포인팅 장치 위치와 제2 마우스 버튼의 클릭 혹은 키보드 키의 눌림과 결합된 클릭(예를 들면, shift + 클릭), 포인팅 장치의 클릭 및 드래그, 지정된 키보드 키의 눌림에 따라 적절한 요소가 선택될 때까지 반복적으로 타뷸레이터(tabulator) 키의 누름, 혹은 설계자에 의해 특정되고 지점, 요소 혹은 영역(region) 같은 위치를 식별하는 것이 가능한 기타 사용자 입력을 포함한다.

라인을 래핑하는 최대 라인 길이를 결정하는데 이용되는 다양한 파라미터는 사용자 에이전트(200)의 네이티브 코드(native code)의 일부분이거나, 구성 파일 내에 저장되어 있거나, 이들의 조합일 수 있다. 이러한 구성 파일은 타 장치(100)의 설치를 위해 준비될 수 있으며, 각 장치의 하드웨어 성능(예를 들어, 디스플레이 해상도)에 따라 하나의 구성 파일은 일부 장치들(100)을 위해 이용가능하도록 하며, 타 구성 파일은 다른 장치들(100) 등을 위해 이용가능하도록 할 수 있다. 일부 장치(100)를 위한 파라미터가 사용자 에이전트(200)(예를 들어, 브라우저)의 렌더링 엔진 및 입력 매니저로부터 수신된 디스플레이(120)에 관한 정보로부터 파생될 수 있다.

마지막으로, 본 발명은 많은 하드웨어/소프트웨어 조합으로 구현될 수 있으며, 특정 하드웨어 혹은 소프트웨어 플랫폼, 운영 시스템, 프로그래밍 언어, 통신 프로토콜, 마크업 언어, 및 레이아웃 정의 및 렌더링 스펙에 종속되지 않음이 해당 기술분야에서 통상의 지식을 가진 자에 의해 이해될 것이다.

Claims

장치의 디스플레이 스크린에 전자 문서의 선택 영역을 표시할 때 동적 텍스트 래핑을 수행하는 방법으로서,
메모리 장치 내로 문서를 로드하는 단계;
프로세서에 의해 상기 문서의 레이아웃을 결정하는 단계-여기서, 상기 레이아웃은 상기 문서 내에서 마크업 언어(Markup language)와 CSS(Cascading Styles Sheets)에 의해 정의된 저자의 원래 의도(original intent of author)에 부합됨-;
상기 결정된 레이아웃에 상응하여 제1 해상도로 상기 문서의 적어도 일부분을 상기 디스플레이 스크린에 표시하는 단계-여기서, 상기 문서의 텍스트는 상기 결정된 레이아웃에 상응하여 래핑됨-;
제2 해상도로 상기 문서를 표시하여 위해, 줌 작동(zoom operation)을 실행하기 위한 명령을 나타내는 사용자 입력을 수신하는 단계;
재래핑(rewarp)의 결과로서 상기 문서의 길이가 변경되도록 하기 위해, 상기 제2 해상도에 연관된 최대 라인 길이에 기초하여 상기 문서의 적어도 일부 텍스트를 재래핑(rewrap)하는 단계;
상기 텍스트의 적어도 일부가 재래핑된 후 상기 프로세서에 의해 상기 문서의 레이아웃을 결정하는 단계; 및
상기 제2 해상도로 재래핑된 텍스트를 포함하는 상기 문서의 적어도 일부분을 상기 디스플레이 스크린에 표시하는 단계를 포함하되,
상기 제2 해상도로 상기 문서를 표시하는 명령을 나타내는 상기 사용자 입력은 상기 문서의 상기 텍스트의 특정 단어 또는 글자를 식별하기 위한 정보를 생성하는 포인팅 장치 조작(pointing device operation)을 포함하고,
상기 제2 해상도로 상기 문서의 적어도 일부분을 표시하는 단계는 상기 정보에 의해 식별된 상기 특정 단어 또는 상기 글자를 상기 디스플레이 스크린 내에서의 미리 정의된 위치에 위치시키는 단계를 포함하는 동적 텍스트 래핑 수행 방법.
제1항에 있어서,
상기 최대 라인 길이는 상기 장치의 디스플레이 스크린의 너비(width)에 의해 정의되는 것을 특징으로 하는 동적 텍스트 래핑 수행 방법.
제1항에 있어서,
상기 최대 라인 길이는 구성 파일(configuration file) 내에 정의되어 있는 것을 특징으로 하는 동적 텍스트 래핑 수행 방법.
제1항에 있어서,
상기 최대 라인 길이는 상기 문서가 표시되는 윈도우의 너비(width)에 의해 정의되는 것을 특징으로 하는 동적 텍스트 래핑 방법.
제1항에 있어서,
상기 제2 해상도는 일차원에 따른 하드웨어 디스플레이 픽셀과 원본 문서 픽셀의 비율로 정의되며, 원본 문서 해상도 면에서 상기 최대 라인 길이는 하드웨어 픽셀 내의 디스플레이 윈도우의 너비를 상기 비율로 나눈 값으로 결정되는 것을 특징으로 하는 동적 텍스트 래핑 방법.
전자 문서 내의 관심 영역(region of interest)을 선택하고 표시하기 위해 전자 문서를 표시하도록 구현된 컴퓨팅 장치로서,
디스플레이 스크린;
사용자 입력 인터페이스;
전자 문서를 수신하도록 구현된 통신 인터페이스;
수신된 문서가 로드될 수 있는 메모리;
처리부를 포함하되,
상기 처리부는,
문서를 로드하고,
상기 문서의 레이아웃을 결정하며-여기서, 상기 레이아웃은 상기 문서 내에서 마크업 언어(Markup language)와 CSS(Cascading Styles Sheets)에 의해 정의된 저자의 원래 의도(original intent of author)에 부합됨-,
상기 결정된 레이아웃에 상응하여 제1 해상도로 상기 문서의 적어도 일부분을 상기 디스플레이 스크린에 표시하고-여기서, 상기 문서의 텍스트는 상기 결정된 레이아웃에 상응하여 래핑됨-,
제2 해상도로 상기 문서를 표시하여 위해, 줌 작동(zoom operation)을 실행하기 위한 명령을 나타내는 사용자 입력을 수신하며,
재래핑(rewarp)의 결과로서 상기 문서의 길이가 변경되도록 하기 위해, 상기 제2 해상도에 연관된 최대 라인 길이에 기초하여 상기 문서의 적어도 일부 텍스트를 재래핑(rewrap)하고,
상기 텍스트의 적어도 일부가 재래핑된 후 상기 문서의 레이아웃을 결정하며,
상기 제2 해상도로 재래핑된 텍스트를 포함하는 상기 문서의 적어도 일부분을 상기 디스플레이 스크린에 표시하되,
상기 제2 해상도로 상기 문서를 표시하는 명령을 나타내는 상기 사용자 입력은 상기 문서의 상기 텍스트의 특정 단어 또는 글자를 식별하기 위한 정보를 생성하는 포인팅 장치 조작(pointing device operation)을 포함하고,
상기 제2 해상도로 상기 문서의 적어도 일부분을 표시하는 것은 상기 정보에 의해 식별된 상기 특정 단어 또는 상기 글자를 상기 디스플레이 스크린 내에서의 미리 정의된 위치에 위치시키는 것을 포함하는 컴퓨팅 장치.
제6항에 있어서,
상기 최대 라인 길이는 상기 장치의 디스플레이 스크린의 너비에 의해 정의되는 것을 특징으로 하는 컴퓨팅 장치.
제6항에 있어서,
상기 최대 라인 길이는 구성 파일 내에 정의되어 있는 것을 특징으로 하는 컴퓨팅 장치.
제6항에 있어서,
상기 최대 라인 길이는 상기 문서가 표시되는 윈도우의 너비에 의해 정의되는 것을 특징으로 하는 컴퓨팅 장치.
제6항에 있어서,
상기 제2 해상도는 일차원에 따른 하드웨어 디스플레이 픽셀과 원본 문서 픽셀의 비율로 정의되며, 원본 문서 해상도 면에서 상기 최대 라인 길이는 하드웨어 픽셀 내의 디스플레이 윈도우의 너비를 상기 비율로 나눈 값으로 결정되는 것을 특징으로 하는 컴퓨팅 장치.
메모리 장치 내로 문서를 로드하는 단계;
상기 문서의 레이아웃을 결정하는 단계-여기서, 상기 레이아웃은 상기 문서 내에서 마크업 언어(Markup language)와 CSS(Cascading Styles Sheets)에 의해 정의된 저자의 원래 의도(original intent of author)에 부합됨-;
상기 결정된 레이아웃에 상응하여 제1 해상도로 상기 문서의 적어도 일부분을 디스플레이 장치에 표시하는 단계-여기서, 상기 문서의 텍스트는 상기 결정된 레이아웃에 상응하여 래핑됨-;
제2 해상도로 상기 문서를 표시하여 위해, 줌 작동(zoom operation)을 실행하기 위한 명령을 나타내는 사용자 입력을 수신하는 단계;
재래핑(rewarp)의 결과로서 상기 문서의 길이가 변경되도록 하기 위해, 상기 제2 해상도에 연관된 최대 라인 길이에 기초하여 상기 문서의 적어도 일부 텍스트를 재래핑(rewrap)하는 단계;
상기 텍스트의 적어도 일부가 재래핑된 후 상기 문서의 레이아웃을 결정하는 단계; 및
상기 제2 해상도로 재래핑된 텍스트를 포함하는 상기 문서의 적어도 일부분을 상기 디스플레이 장치에 표시하는 단계를 수행하되,
상기 제2 해상도로 상기 문서를 표시하는 명령을 나타내는 상기 사용자 입력은 상기 문서의 상기 텍스트의 특정 단어 또는 글자를 식별하기 위한 정보를 생성하는 포인팅 장치 조작(pointing device operation)을 포함하고,
상기 제2 해상도로 상기 문서의 적어도 일부분을 표시하는 단계는 상기 정보에 의해 식별된 상기 특정 단어 또는 상기 글자를 상기 디스플레이 스크린 내에서의 미리 정의된 위치에 위치시키는 단계를 포함하는 것을 특징으로 하는 컴퓨터에서 실행되는 명령어를 포함하는 컴퓨터 프로그램으로 구현되는 컴퓨터 판독가능 기록매체.
제11항에 있어서,
상기 최대 라인 길이는 상기 디스플레이 장치의 너비에 의해 정의되는 것을 특징으로 하는 컴퓨터 판독가능 기록매체.
제11항에 있어서,
상기 최대 라인 길이는 구성 파일 내에 정의되어 있는 것을 특징으로 하는 컴퓨터 판독가능 기록매체.
제11항에 있어서,
상기 최대 라인 길이는 상기 문서가 표시되는 윈도우의 너비에 의해 정의되는 것을 특징으로 하는 컴퓨터 판독가능 기록매체.
제11항에 있어서,
상기 제2 해상도는 일차원에 따른 하드웨어 디스플레이 픽셀과 원본 문서 픽셀의 비율로 정의되며, 원본 문서 해상도 면에서 상기 최대 라인 길이는 하드웨어 픽셀 내의 디스플레이 윈도우의 너비를 상기 비율로 나눈 값으로 결정되는 것을 특징으로 하는 컴퓨터 판독가능 기록매체.