201044252 六、發明說明: 【發明所屬之技術領域】 本發明係有關於頁面縮放技術,尤其是有關於在行動 裝置上縮放顯示文字的程式方法。 【先前技術】 手持式裝置已普遍具備瀏覽網頁的功能。一般而言, 網頁文件的内容包羅萬象,其排版方式以及頁面大小之變 化往往超過單一螢幕所能顯示。因此網頁劉覽界面例如微 軟的Internet Explorer®,〇pera公司的〇pera®劇覽器,頻果 (Apple )公司的Safari⑧戦器等,皆提供縮放或捲頁等人 機界面⑧以方便制者_網頁文f在韻果公司的產品 仍_上已存在一種多點觸控(隐町⑽⑻的技術,可 同夺偵/貝J螢幕上夕個碰觸點,並根據這些碰觸點的特定的 移動行為來控制瀏覽器的特效,包含放大、縮小、上下左 右捲動、晝面旋轉等°然:而在晝面放大的過程中,顯示在 畫面上的字體雖然變大了’但是所能顯示的字數卻變少 了。原本關注的特定文字可賴著放大而被擠出螢幕 見範圍之外。除此之外,一般文字是左往右橫向排列,而 使用者的_習慣是由逐行往下_。單行文字被放 超出橫向畫面的部份必須以橫向捲轴來移動 讀單一整行已放大敎字,必須不斷的往右捲動畫^^ 同-時間上下相鄰行的文字因為前後文接不上而益士 j讀^如此-來,對使用者而言,單—晝面顯示^ 子在冋-時間内只有一行是有意義的’缺代整體的效率性 HTC098150-0/0746-A42087TWf/Final/ 4 201044252 與方便性。 有鑑於此,一種可改善閱讀效果的人機界面是有待開 發的。 【發明内容】 本發明提出一種頁面顯示方法,可應用在具有一螢幕 的電子裝置上,用以顯示一文字區塊。首先接收一縮放指 令,接著根據該縮放指令決定該内容區塊中之一焦點内 容,並對該内容區塊中的内容進行縮放。最後排列該内容 〇 區塊中經縮放後的内容,使該内容區塊之寬度不超出該螢 幕之一顯示區域之寬度,並從内容經縮放後的該内容區塊 - 中,根據該焦點内容之位置決定該内容區塊被顯示在該顯 示區域上之部分。 本發明另一實施例是上述方法所應用的電子裝置,包含一 螢幕以及一人機界面。螢幕顯示一文字區塊。人機界面接 收一縮放指令。該縮放指令決定該内容區塊中之一焦點内 容,並對該内容區塊中的内容進行縮放。該人機界面排列 〇 該内容區塊中經縮放後的内容,使該内容區塊之寬度不超 出該螢幕之一顯示區域之寬度,並根據該焦點内容經縮放 與排列後之位置,決定該内容區塊被在該顯示區域之部分。 本發明另一實施例是一種程式產品,應用於包含上述 螢幕之裝置,以顯示一文字區塊。其中該程式產品可以是 上述人機界面中的軟體部份,被執行時接收一縮放指令以 決定該内容區塊中之一焦點内容,並對該内容區塊中的内 HTC098150-0/0746-A42087TWfiTinal/ 5 201044252 容進行縮放。該程式產品排列該内容區塊令經縮放後的内 容,使該内容區塊之寬度不超出該螢幕之一顯示區域之寬 度,並根據該焦點内容經縮放與排列後之位置,決 容區塊被在該顯示區域之部分。 、 【實施方式】 第1圖係為一電子裝置100包含一螢幕12〇之實施例。 該電子裝置100可以是手機,個人數位助理,可攜式多媒 體播放機,甚或是任何可用來瀏覽各式網頁和文件的電腦 產品。該螢幕120是主要的顯示設備,對應一顯示區域 110。在第1圖中,該顯示區域110的長寬可能小於等於該 螢幕120的長寬,在本發明實施例中大部份情況可視為相 同。該螢幕120可搭配鍵盤、滑鼠(未圖示)提供使用者 互動功能。在本實施例中,該螢幕12〇可以是一多點觸控 式的顯示器。使用者可同時在該螢幕12〇上接觸多個點, 並以特定的移動方式來直接觸發特定的功能。舉例來說, 接觸點102a和接觸點l〇2b代表該螢幕120上被使用者同 時碰觸的兩個點,其中該接觸點102a往箭頭方向1〇知拖 曳’而接觸點102b往箭頭方向104b拖曳。藉此該電子装 置100可將此行為解釋為一種「放大」(Zoom In)的指令。 其他各種功能例如縮小(Zoom Out)’上下左右捲頁 (Scrolling),翻轉晝面,選取文字等,都屬於多點觸控 可應用的範圍。在本例中文字106是顯示於接觸點i〇2a和 接觸點102b中間的焦點内容(如文字或圖示),該焦點内容 (即文字106)的座標可被利用來處理進一步可能的狀況,實 HTC098150-0/0746-A42087TWf/Finay 201044252 例於後詳述。 第2圖係為一網頁文件200被顯示在一顯示區域110 上之實施例。一傳統的網頁文件200可能是很多個不同内 容區塊的排列組合,以本例來說,網頁文件200中的内容 區塊主要包含了圖片區塊210和文字區塊220兩種。第2 圖的網頁文件200顯示了 一個圖片區塊210和一個文字區 塊220,以及與第1圖之顯示區域110的相對映射關係。 在本發明實施例中,該顯示區域110就是指第1圖中螢幕 0 120所提供的可視範圍。由於網頁文件200的長寬皆大於 顯示區域110,所以只有一部份可映射至該顯示區域110 .的範圍中而被顯示在螢幕120上,而其他部份則是沒有顯 示出來的。因此使用者必須透過上下左右捲動搭配縮小放 大功能才能完整的閱讀該網頁文件200中每一個角落。該 文字區塊220之内容主要是文字,也可能是符號圖示 (icon)。符號圖示一般而言是指大小與文字相近之小圖案, 可隨著文字一起被排版,用來突顯網頁效果。每個文字具 〇 有既定的大小,由左向右橫向排列,由上到下形成多個橫 行。舉例來說,該文字區塊220橫向可顯示Wx個字,縱 向可顯示Wy行。其中文字202表示位於顯示區域110中 的一文字,而文字204表示不在顯示區域110範圍中的一 文字。以下的說明皆以文字區塊為例,但本發明並不僅能 被用於顯示文字區塊。 第3a圖係為一文字區塊320被顯示在顯示區域110上 .之實施例。為了提供方便的瀏覽機制,本發明實施例顯示 文字區塊320時,對比於顯示第2圖所示之文字區塊220, HTC098150-0/0746-A42087TW£Tinal/ 7 201044252 會將文字區塊320的寬度限定在不大於顯示區域110寬度 之範圍。文字區塊320中的文字會透過自動換行的機制重 新排列,因此不會有任何文字超出顯示區域110的寬度, 避免了大量橫向捲動的缺點。因為文字具有逐行閱讀的特 性,本實施例尤其適合處理文字頁面。然而必要時本發明 也可應用於圖形頁面,技術上並無限定。舉例來說,第3a 圖中的文字區塊320寬度與顯示區域110的寬度一致,其 中裝滿了某一字級大小的文字,因此每一橫行可容納Wx 個字,而文字區塊320的高度視字數和字級大小而定,舉 例來說有Η晝素。該顯示區域110有如一個在文字區塊320 上縱向平移的視窗,所到之處的内容即被映射在實體的螢 幕120上。為了說明顯示區域110的相對位置,第3a圖的 顯示區域110以一橫向中軸112代表中心位置,將該顯示 區域110等分為上下兩半。由第3a圖可知,該橫向中軸 112的位置係座落於該文字區塊320的縱座標Y之處。 當該螢幕120被碰觸時,可能感應到接觸點302a和接 觸點302b兩個接觸點。通常使用者直覺地會去碰觸眼裏所 關注的焦點文字。這種操作習慣可以加以利用。舉例來說, 以使用者的角度來說,該使用者關注的焦點文字306會位 於該接觸點302a和接觸點302b的中間,因此,電子裝置 100可先定義出位於接觸點302a和接觸點302b的中間的 一焦點座標,再透過該焦點座標即可判斷出使用者所關注 的焦點文字306為何。其中焦點座標及焦點文字306之間 的對應關係可經過顯示區域.110和文字區塊320之間一些 既有的映射技術來推知。舉例來說,一般習知的系統核心 HTCO98150-0/0746-A42087TWf/Final/ 8 201044252 中會使用編碼樹(rendertree)來安排文字306在顯示區域 110中的位置關係。在本實施例中的文字306,是位於縱座 標y的地方。推斷出關注焦點文字306的位置,有助於進 一步決定顯示區域no需顯示文字區塊320之部分。 在本實施例中’如果該接觸點302a往箭頭方向304a 移動,而接觸點302b往箭頭方向304b移動,即代表放大 文字區塊320之内容之一放大指令。相對的,如果接觸點 302a和接觸點302b兩者往彼此方向靠近,則代表縮小文 Ο 子區塊320之内容之一縮小指令。不論是放大内容或是縮 小内容,縮放率皆可由接觸點302a和接觸點302b的移動 距離來決定。然而更進一步地說,其他決定縮放率的機制 也適用於本發明實施例,例如筆勢軌跡312。電子裳置1〇〇 可判斷該筆勢軌跡312的形狀以執行各種事先定義好的功 月b。舉例來說’如果該筆勢軌跡312大致上近似一圓圈, 則該電子裝置100判斷其執跡方向為順時針或逆時針,藉 此決定縮小或放大功能。而圓心314之位置,可進一步被 Ο 偵測出來做為選取焦點座標的依據。 該電子裝置1〇〇可能包含按鈕(未圖示),或是在顯 示區域no中實作一條縮放桿(未圖示)。然而若不是使 用多點觸控機制來進行縮放’關注焦點的文字306可能需 要透過其他的機制來決定’例如使用者手動選取,或是自 動取得顯示區域11 〇的中心座標C作為焦點座標,再經由 中心座標C取得焦點文字306。 第.3b〜3d圖係為文子區塊320之内容經縮放後成為文 字區塊330之實施例。在本發明實施例中,已將文字區塊 HTC098150-0/0746-A42087TWfiTinal/ 9 201044252 320的寬度限制為不大於顯示區域110。當文字區塊320之 内容被放大而成為第3b圖中的文字區塊330時,文字區塊 330寬度依然保持在不大於顯示區域110的位準,但文字 區塊330中字體的大小則以隨著縮放率而被放大,因此每 一橫行能容納的字數減為Wx’。此時文字區塊330中的文 字必需被重新排版,例如每一行中超過第Wx’字之文字就 自動換行而顯示在下一行。由此可知該文字區塊330雖然 寬度維持不變,但是整體高度H’卻會隨著縮放率而被拉 長。也就是說,第3b圖所示之高度H’會較第3a圖所示之 高度Η為長。另一方面來說,若是文字區塊320被縮小, 處理的方式亦是類似,在寬度保持不變的前提下,每行字 數增加,而文字區塊總長度隨著行數變少而減短。 第3a圖中原本出現的文字306,在文字區塊330中經 過了放大以及重新排版後變成了放大後的文字306’,出現 在文字區塊330之縱座標Y’的位置。由於文字區塊330的 長度超過顯示區域110的長度,該顯示區域110只能顯示 該文字區塊330的其中一部份。因此第3b圖說明了如何決 定文字區塊330顯示於顯示區域110中的部分。如前述, 該文字306’被認定為使用者關注的重點,因此在文字區塊 320被放大為文字區塊330後,仍然希望該文字306’出現 在顯示區域110中。因此在第3b圖中,顯示區域110基本 上可根據該文字306’的縱座標Y’而決定其位置,使該顯示 區域110能顯示該文字306’。更具體的說,本發明實施例 將橫向中軸112的縱座標y’指派為與文字306’的縱座標Y’ 相等,使得顯示區域110顯示在螢幕120上的時候,該文 HTC098150-0/0746-A42087TWf/Final/ 10 201044252 予306是位於該橫向中軸U2上。但在另一實施例中,該 文字306’未必一定要安排在橫向中軸112上。為了更方便 閱讀後續文字,也可以將文字3〇6,安排在顯示區域11〇的 中間偏上,或是顯示區域i 1〇的第一行。橫向中軸丨12的 縱座標y’的安排方式完全可依據文字306,的縱座標Y,來決 定。 在一些特別的例子中,文字306,的位置可能無法完全 適用於第3b圖中對齊橫向中軸112的做法,因此需要另外 ❹考慮。舉例來說,在第3c圖中,文字區塊34〇係為内容已 被放大(或縮小)後的文字區塊,而顯示區域11〇的高度 為h。假設本例中的文字3〇6,經過自動換行之重新排版後 出現在縱座標y,之處,其巾y,的值小於h/2。也因為y,小 於h/2 ’即使顯不區域11〇已經移到文字區塊携的最頂 點,仍然無法將文字306,安排在縱座標為h/2的橫向中軸 112上。此時則不需勉強,只需將顯示區域HQ對齊該文 字區塊340的頂端即可。 〇 第3 d圖是另—個特例。文字區塊3 5 G係為内容已被放 大(或縮小)後的文字區塊’其高度為H,。假設本例中的 文字306,出現在非常接近文字區塊35〇底部之處,文字 306’的縱座標是y,,即文字3〇6,出現在橫向中轴ιΐ2和文 子區塊350的底部之間,H-y,<h/2。換言之,即使顯示區 域110已經移到文字區塊350的最底部,仍然無法將文字 306安排在縱座標為(jj-h/2)的橫向中軸112上。此時只需 將顯示區域11〇對齊該文字區塊35()的底部即可。 第4a圖係為本發明實施例之頁面顯示方法之流程圖。 HTC098150-0/0746-A42087TWOTinal/ 11 201044252 上述實施例可以整理為下列步驟。首先在步驟401中啟動 第1圖的電子裝置100。在步驟403中,透過觸控螢幕120 接收一個縮放指令。在步驟405中根據接收的縮放指令決 定一焦點座標,並決定該焦點座標所對應之一焦點内容 106(如文字或圖示)。舉例而言,若該觸控螢幕120是多點 觸控螢幕,該縮放指令為接觸點l〇2a和接觸點102b之間 的距離變化,則該焦點座標可以是位於接觸點102a和接觸 點102b中間的座標。該縮放指令亦可以是觸控螢幕120上 所形成之筆勢(gesture)軌跡312,而該筆勢軌跡312經過辨 認可能近似於一圓形而具有一圓心座標314。故該圓心座 標314即可用來作為該焦點座標。關於筆勢軌跡辨認,現 今已存在有許多技術,在此不詳細討論,但是本發明實施 例不同處在於,可進一步利用辨認而得的圓心座標來當做 焦點座標。取得焦點座標後,可進一步取得其所對應之焦 點内容106以做為進一步調整顯示區域110之位置的參 考。舉例而言,藉由系統核心的編碼樹或其他映射機制, 可查得焦點座標所對應之焦點内容106。在步驟407中, 根據步驟403所接收的縮放指令,調整内容區塊320中内 容的大小並將該些内容重新排版,以產生一内容區塊330, 此排版動作使内容區塊330之寬度不大於顯示區域110之 寬度。其中原本内容區塊320中的焦點内容106,經縮放 及排版後成為内容區塊330中縮放後的焦點内容306’。在 步驟409中,找出該焦點内容306’在該文字區塊330中的 縱座標y’。在步驟411中,根據該焦點内容306.’的縱座標 y’,決定顯示區域110的位置,而最重要目的之一是將焦 HTC098150-0/0746-A42087TW£/Final/ 12 201044252 點内容306’涵蓋在顯示區域㈣的顯示範圍内。 第朴圖係為本發明實施例之選擇顯示區域 110之流程 圖。步驟411的實際做法可以歸納為下列步驟。在步驟423 中,判斷焦點内容306,的縱座標y,是否小於h/2。其中h 是顯示區域110的高度。如果是的話,表示焦點内容獅, 位置非常接近内容區塊33〇 了頁端。於是進行步驟,直 接將橫向中轴112放在縱座標h/2處,使顯示區域ιι〇對 齊内容區塊330的頂端,如此可使内容3〇6,保持在顯示區 Ο域110的範圍内。另一方面’步驟427檢查H,-y,是否小於 h/2’其中H’是内容區塊33〇的高度。如果是,表示焦點内 容306,位置非常接近内容區塊33〇的底端,於是進行步驟 429’直㈣顯示區域㈣的橫向中轴ιΐ2放在縱座標 H’-h/2處,使顯示區域110直接對齊内容區塊33〇的底部, 如此可確保焦點内容306,出現在顯示區域n〇的範圍内。 另-方面,如果步驟423和427皆不符合,則進行步驟431。 在步驟431中,將橫向中轴112的縱座標指派為焦點内容 〇 306,的縱座標y,’藉此焦點时306,即會出現在顯示區域 110範圍的中間行。 本發明的應用裝置可以是任何具有人機界面的網頁文 件顯示裝置,例如手機,個人數位助理,電腦,或文字處 理器。第4a圖和第4b圖的方法步驟適用於放大頁面,也 適用於縮小頁面。這些方法可以實作於裝置裏的作業系統 或應用軟體中,搭配硬體上的輸出輸入界面例如多點觸控 螢幕,觸控螢幕,按鈕’滾拎或鍵盤等整合成一人機界面。 本發明也可以是一種程式產品,安裝於任何現有硬體中而 HTC098150-0/0746-A42087TWf/Finay 13 201044252 產生功效。 雖然本發明以較佳實施例說明如上,但可以理解的是 本發明的範圍未必如此限定。相對的,任何基於相同精神 或對本發明所屬技術領域中具有通常知識者為顯而易見的 改良皆在本發明涵蓋範圍内。因此專利要求範圍必須以最 廣義的方式解讀。 【圖式簡單說明】 第1圖係為一電子裝置100包含一觸控螢幕120之實 施例; 第2圖係為一網頁文件200被顯示在一顯示區域110 上之實施例; 第3a圖係為一内容區塊320被縮放之實施例; 第3b〜3d圖係為縮放内容區塊320成為内容區塊330 之實施例; 第4a圖係為本發明實施例之頁面顯示方法之流程圖; 以及 第4b圖係為本發明實施例之選擇顯示區域110之流程 圖。 【主要元件符號說明】 100電子裝置 104a,104b箭頭方向 110顯示區域 120觸控螢幕 202,204 文字 102a, 102b接觸點 106内容 112橫向中轴 200網頁文件 210圖片 HTC098150-0/0746-A42087TWf/Finay 14 201044252 220,320,330,340,350 内容區塊 302a,302b 接觸點 306,306’文字 304a,304b箭頭方向 312筆勢軌跡 314圓心201044252 VI. Description of the Invention: [Technical Field of the Invention] The present invention relates to page zooming techniques, and more particularly to a program method for scaling displayed text on a mobile device. [Prior Art] Handheld devices have generally been able to browse web pages. In general, the content of web pages is all-encompassing, and the layout and page size changes often exceed the single screen display. Therefore, the web page interface such as Microsoft Internet Explorer®, 〇pera's 〇pera® projector, Apple's Safari8 device, etc., all provide human-machine interface 8 such as zoom or page-rolling to facilitate the makers. _Webpage f in the product of the rhyme company still has a multi-touch (Hidden Town (10) (8) technology, can be touched with the Detective / Bayer J screen, and according to the specific touch The movement behavior to control the browser's special effects, including zooming in, zooming out, scrolling up and down, scrolling, etc.: While zooming in, the font displayed on the screen becomes larger, but it can The number of words displayed is reduced. The specific text that was originally focused on can be pushed out of the screen by zooming in. In addition, the general text is arranged horizontally from left to right, and the user's habit is Line by line _. The part of the single-line text that is placed beyond the horizontal picture must be moved by the horizontal scroll to read a single line of enlarged characters. The animation must be continuously scrolled to the right ^^ Same-time up and down adjacent lines of text Because before and after the text can not be connected to Yi Shi j read ^ so - come, for the user, the single - face display ^ ^ in the time - only one line is meaningful 'missing the overall efficiency HTC098150-0/0746-A42087TWf/Final/ 4 201044252 and In view of the above, a human-machine interface capable of improving the reading effect is to be developed. SUMMARY OF THE INVENTION The present invention provides a page display method that can be applied to an electronic device having a screen for displaying a text block. First receiving a zoom instruction, then determining a focus content in the content block according to the zoom instruction, and scaling the content in the content block. Finally, arranging the scaled content in the content block, so that The width of the content block does not exceed the width of one of the display areas of the screen, and from the content block that is scaled by the content, the content block is displayed on the display area according to the position of the focus content. Another embodiment of the present invention is an electronic device to which the above method is applied, comprising a screen and a human-machine interface. The screen displays a text block. Receiving a zoom instruction, the zoom instruction determines a focus content in the content block, and scaling the content in the content block. The human machine interface arranges the scaled content in the content block to enable the The width of the content block does not exceed the width of one of the display areas of the screen, and the content block is determined to be part of the display area according to the position of the focus content after being scaled and arranged. Another embodiment of the present invention is a The program product is applied to the device including the above screen to display a text block, wherein the program product may be a software part of the human-machine interface, and when executed, receives a zoom instruction to determine a focus in the content block. Content and scale the inner HTC098150-0/0746-A42087TWfiTinal/ 5 201044252 in the content block. The program product arranges the content block to make the scaled content so that the width of the content block does not exceed the width of one of the display areas of the screen, and according to the position of the focus content after being scaled and arranged, the decision block is determined. Is part of the display area. [Embodiment] FIG. 1 is an embodiment in which an electronic device 100 includes a screen 12A. The electronic device 100 can be a cell phone, a personal digital assistant, a portable multimedia player, or even any computer product that can be used to browse various web pages and files. The screen 120 is the primary display device and corresponds to a display area 110. In Fig. 1, the length and width of the display area 110 may be less than or equal to the length and width of the screen 120, and most of the cases may be considered the same in the embodiment of the present invention. The screen 120 can be used with a keyboard and a mouse (not shown) to provide user interaction. In this embodiment, the screen 12A can be a multi-touch display. The user can simultaneously touch a plurality of points on the screen 12 and directly trigger a specific function in a specific movement manner. For example, the contact point 102a and the contact point l〇2b represent two points on the screen 120 that are simultaneously touched by the user, wherein the contact point 102a is dragged in the direction of the arrow 1 and the contact point 102b is in the direction of the arrow 104b. Drag. Thereby the electronic device 100 can interpret this behavior as a "Zoom In" command. Various other functions such as Zoom Out, scrolling, flipping, selecting text, etc. are all applicable to multi-touch. In this example, the text 106 is the focus content (such as a text or a graphic) displayed between the contact point i〇2a and the contact point 102b, and the coordinates of the focus content (ie, the text 106) can be utilized to handle further possible conditions. The actual HTC098150-0/0746-A42087TWf/Finay 201044252 examples will be detailed later. 2 is an embodiment in which a web page file 200 is displayed on a display area 110. A conventional web page file 200 may be a permutation combination of a plurality of different content blocks. In this example, the content block in the web page file 200 mainly includes two types of picture blocks 210 and text blocks 220. The web page file 200 of Fig. 2 shows a picture block 210 and a text block 220, and a relative mapping relationship with the display area 110 of Fig. 1. In the embodiment of the present invention, the display area 110 refers to the visible range provided by the screen 0 120 in FIG. Since the length and width of the webpage file 200 are both larger than the display area 110, only a portion can be mapped to the display area 110 and displayed on the screen 120, while other portions are not shown. Therefore, the user must scroll through the top, bottom, left, and right to zoom in and out to complete the reading of each corner of the webpage file 200. The content of the text block 220 is mainly text or a symbol icon (icon). The symbol illustration generally refers to a small pattern of similar size to the text, which can be typeset along with the text to highlight the effect of the web page. Each character has a predetermined size, arranged horizontally from left to right, forming multiple rows from top to bottom. For example, the text block 220 can display Wx words horizontally and Wy lines in the vertical direction. The text 202 represents a character located in the display area 110, and the text 204 represents a character not in the range of the display area 110. The following description uses text blocks as an example, but the present invention can be used not only for displaying text blocks. Figure 3a is an embodiment in which a text block 320 is displayed on the display area 110. In order to provide a convenient browsing mechanism, when the text block 320 is displayed in the embodiment of the present invention, the text block 320 will be compared with the text block 220 shown in FIG. 2, HTC098150-0/0746-A42087TWTinal/ 7 201044252 The width is limited to a range not greater than the width of the display area 110. The text in the text block 320 is rearranged by the automatic line feed mechanism, so that no text is beyond the width of the display area 110, and a large number of lateral scrolling defects are avoided. Since the text has the characteristics of progressive reading, this embodiment is particularly suitable for processing text pages. However, the present invention is also applicable to graphic pages as necessary, and is not technically limited. For example, the width of the text block 320 in FIG. 3a coincides with the width of the display area 110, which is filled with text of a certain word size, so each horizontal line can accommodate Wx words, and the text block 320 The height depends on the number of words and the size of the word, for example, there are morphemes. The display area 110 has a window that is vertically translated on the text block 320, and the content where it is located is mapped on the physical screen 120. To illustrate the relative position of the display area 110, the display area 110 of Fig. 3a represents a center position with a lateral center axis 112, and the display area 110 is equally divided into upper and lower halves. As can be seen from Fig. 3a, the position of the lateral center axis 112 is located at the ordinate Y of the text block 320. When the screen 120 is touched, two contact points of the contact point 302a and the contact 302b may be sensed. Usually the user intuitively touches the focus text of the eye. This operational habit can be utilized. For example, from the perspective of the user, the focus text 306 of the user's attention may be located between the contact point 302a and the contact point 302b. Therefore, the electronic device 100 may first define the contact point 302a and the contact point 302b. A focus coordinate in the middle of the focus can be used to determine the focus text 306 of the user's attention. The correspondence between the focus coordinates and the focus text 306 can be inferred by some existing mapping techniques between the display area .110 and the text block 320. For example, a conventional tree core HTCO98150-0/0746-A42087TWf/Final/ 8 201044252 will use a rendertree to arrange the positional relationship of the text 306 in the display area 110. The character 306 in this embodiment is located at the ordinate y. Inferring the position of the focus of focus text 306 helps to further determine the portion of the display area no where the text block 320 needs to be displayed. In the present embodiment, 'if the contact point 302a moves in the arrow direction 304a, and the contact point 302b moves in the arrow direction 304b, that is, one of the contents of the enlarged text block 320 is enlarged. In contrast, if both the contact point 302a and the contact point 302b are close to each other, it represents a reduction instruction of one of the contents of the reduced document sub-block 320. Whether zoomed in or down, the zoom ratio can be determined by the distance traveled by contact 302a and contact 302b. Still further, other mechanisms for determining the scaling rate are also applicable to embodiments of the present invention, such as gesture track 312. The electronic skirt is set to determine the shape of the gesture track 312 to perform various predefined power cycles b. For example, if the gesture track 312 is substantially approximately a circle, the electronic device 100 determines that the direction of the tracking is clockwise or counterclockwise, thereby determining the zoom-out or zoom-in function. The position of the center 314 can be further detected by Ο as the basis for selecting the focus coordinates. The electronic device 1 may include a button (not shown) or a zoom lever (not shown) in the display area no. However, if the multi-touch mechanism is not used for zooming, the focus 306 may need to be determined by other mechanisms, such as the user manually selecting, or automatically obtaining the center coordinate C of the display area 11 as the focus coordinate. The focus text 306 is obtained via the center coordinate C. The third to third figures are the embodiment in which the content of the text block 320 is scaled to become the text block 330. In the embodiment of the present invention, the width of the text block HTC098150-0/0746-A42087TWfiTinal/ 9 201044252 320 has been limited to be no larger than the display area 110. When the content of the text block 320 is enlarged to become the text block 330 in FIG. 3b, the width of the text block 330 remains at a level not greater than the display area 110, but the size of the font in the text block 330 is The magnification is scaled up, so the number of words that can be accommodated per horizontal row is reduced to Wx'. At this time, the text in the text block 330 must be re-formatted. For example, the text exceeding the Wx' word in each line is automatically wrapped and displayed on the next line. It can be seen that although the width of the character block 330 remains unchanged, the overall height H' is elongated in accordance with the zoom ratio. That is to say, the height H' shown in Fig. 3b is longer than the height Η shown in Fig. 3a. On the other hand, if the text block 320 is reduced, the processing manner is similar. Under the premise that the width remains unchanged, the number of words per line increases, and the total length of the text block decreases as the number of lines decreases. short. The text 306 originally appearing in Fig. 3a is enlarged and re-formatted in the text block 330 to become the enlarged character 306', appearing at the position of the ordinate Y' of the text block 330. Since the length of the text block 330 exceeds the length of the display area 110, the display area 110 can only display a portion of the text block 330. Thus, Figure 3b illustrates how to determine the portion of text block 330 that is displayed in display area 110. As previously mentioned, the text 306' is considered to be the focus of the user's attention, so that after the text block 320 is enlarged to the text block 330, it is still desirable for the text 306' to appear in the display area 110. Therefore, in Fig. 3b, the display area 110 can basically determine its position based on the ordinate Y' of the character 306', so that the display area 110 can display the character 306'. More specifically, the embodiment of the present invention assigns the ordinate y' of the lateral center axis 112 to be equal to the ordinate Y' of the text 306' such that when the display area 110 is displayed on the screen 120, the text HTC098150-0/0746 -A42087TWf/Final/ 10 201044252 The 306 is located on the transverse central axis U2. In yet another embodiment, the text 306' does not necessarily have to be arranged on the lateral center axis 112. In order to make it easier to read the subsequent text, it is also possible to arrange the text 3〇6 in the middle of the display area 11〇 or the first line of the display area i 1〇. The arrangement of the ordinate y' of the transverse center axis 丨 12 can be determined entirely by the ordinate Y of the character 306. In some particular examples, the position of the text 306 may not be fully applicable to the alignment of the lateral center axis 112 in Figure 3b, and therefore requires additional consideration. For example, in Figure 3c, the text block 34 is a text block whose content has been enlarged (or reduced), and the height of the display area 11 is h. Assume that the text 3〇6 in this example appears in the ordinate y after re-typing by automatic line-feeding, and the value of the towel y is less than h/2. Also because y, less than h/2', even if the visible area 11〇 has moved to the topmost point carried by the text block, the text 306 cannot be arranged on the horizontal central axis 112 with the ordinate of h/2. At this time, it is not necessary to reluctantly, and it is only necessary to align the display area HQ with the top of the text block 340. 〇 The third d picture is another special case. The text block 3 5 G is a text block whose content has been enlarged (or reduced), and its height is H. Suppose the text 306 in this example appears very close to the bottom of the text block 35〇, and the ordinate of the text 306' is y, that is, the text 3〇6, appearing at the bottom of the horizontal axis ΐ2 and the text block 350. Between, Hy, <h/2. In other words, even if the display area 110 has moved to the bottom of the text block 350, the text 306 cannot be arranged on the lateral center axis 112 of the ordinate (jj-h/2). In this case, simply align the display area 11〇 with the bottom of the text block 35(). Figure 4a is a flow chart of a page display method according to an embodiment of the present invention. HTC098150-0/0746-A42087TWOTinal/ 11 201044252 The above embodiment can be organized into the following steps. First, in step 401, the electronic device 100 of Fig. 1 is activated. In step 403, a zoom command is received through the touch screen 120. In step 405, a focus coordinate is determined based on the received zoom instruction, and a focus content 106 (such as a text or a graphic) corresponding to the focus coordinate is determined. For example, if the touch screen 120 is a multi-touch screen, the zoom command is a change in the distance between the contact point 102a and the contact point 102b, and the focus coordinate may be located at the contact point 102a and the contact point 102b. The coordinates in the middle. The zoom command can also be a gesture track 312 formed on the touch screen 120, and the gesture track 312 can be approximated by a circle and has a center coordinate 314. Therefore, the center coordinates 314 can be used as the focus coordinates. Regarding the recognition of gesture trajectories, many techniques exist today, which are not discussed in detail herein, but the difference in the embodiment of the present invention is that the center coordinates of the recognition can be further utilized as the focus coordinates. After the focus coordinates are obtained, the corresponding focal point content 106 can be further obtained as a reference for further adjusting the position of the display area 110. For example, the focus content 106 corresponding to the focus coordinate can be found by the coding tree of the system core or other mapping mechanism. In step 407, according to the scaling instruction received in step 403, the size of the content in the content block 320 is adjusted and the content is reformatted to generate a content block 330. The layout action makes the width of the content block 330 not It is larger than the width of the display area 110. The focus content 106 in the original content block 320 is scaled and typeset to become the zoomed focus content 306' in the content block 330. In step 409, the ordinate y' of the focus content 306' in the text block 330 is found. In step 411, the position of the display area 110 is determined according to the ordinate y' of the focus content 306. ', and one of the most important purposes is to focus 306 HTC098150-0/0746-A42087TW/Final/ 12 201044252 point content 306 'Included in the display range of the display area (4). The first diagram is a flow chart of the selection display area 110 of the embodiment of the present invention. The actual practice of step 411 can be summarized as the following steps. In step 423, it is determined whether the ordinate y of the focus content 306 is less than h/2. Where h is the height of the display area 110. If it is, it means that the focus content lion is located very close to the content block 33 and the page end. Then, the step is performed to directly place the horizontal central axis 112 at the ordinate h/2, so that the display area is aligned with the top end of the content block 330, so that the content 3〇6 can be kept within the range of the display area 110. . On the other hand, 'Step 427 checks if H, -y is less than h/2' where H' is the height of the content block 33〇. If yes, the focus content 306 is displayed, the position is very close to the bottom end of the content block 33〇, and then the horizontal axis ιΐ2 of the straight (four) display area (4) is placed at the ordinate H'-h/2 to make the display area 110 directly aligns the bottom of the content block 33, thus ensuring that the focus content 306 appears within the range of the display area n〇. On the other hand, if both steps 423 and 427 do not match, then step 431 is performed. In step 431, the ordinate of the lateral center axis 112 is assigned as the ordinate y of the focus content 〇 306, whereby the focus 306 will appear in the middle row of the range of the display area 110. The application device of the present invention may be any web page file display device having a human machine interface, such as a cell phone, a personal digital assistant, a computer, or a word processor. The method steps of Figures 4a and 4b are for magnifying pages and for reducing pages. These methods can be implemented in the operating system or application software in the device, with hardware input and output interfaces such as multi-touch screen, touch screen, button 'rolling or keyboard' integrated into a human-machine interface. The invention may also be a program product that is installed in any existing hardware and HTC098150-0/0746-A42087TWf/Finay 13 201044252 produces efficacy. While the invention has been described above by way of a preferred embodiment, it is understood that the scope of the invention is not necessarily limited. In contrast, any modifications that are obvious to those skilled in the art and which are obvious to those of ordinary skill in the art to which the invention pertains are within the scope of the invention. Therefore, the scope of patent claims must be interpreted in the broadest sense. BRIEF DESCRIPTION OF THE DRAWINGS FIG. 1 is an embodiment in which an electronic device 100 includes a touch screen 120; FIG. 2 is an embodiment in which a web page file 200 is displayed on a display area 110; An embodiment in which the content block 320 is scaled; the 3b to 3d is an embodiment in which the content block 320 is the content block 330; and FIG. 4a is a flowchart of the page display method in the embodiment of the present invention; And Figure 4b is a flow chart of the selection display area 110 of the embodiment of the present invention. [Main component symbol description] 100 electronic device 104a, 104b arrow direction 110 display area 120 touch screen 202, 204 text 102a, 102b contact point 106 content 112 horizontal center axis 200 web file 210 picture HTC098150-0/0746-A42087TWf/Finay 14 201044252 220, 320, 330, 340, 350 content block 302a, 302b contact point 306, 306' text 304a, 304b arrow direction 312 gesture track 314 center
HTC098150-0/0746-A42087TWfTinay 15HTC098150-0/0746-A42087TWfTinay 15