專利名稱：一種在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法
技術(shù)領(lǐng)域：
本發(fā)明涉及一種屏幕顯示的布局方法，特別是一種為方便瀏覽者在 窄屏幕設(shè)備上瀏覽寬網(wǎng)頁，將寬網(wǎng)頁的顯示內(nèi)容進(jìn)行重新布局的方法， 屬于互聯(lián)網(wǎng)應(yīng)用技術(shù)領(lǐng)域。
背景技術(shù)：
隨著網(wǎng)絡(luò)技術(shù)和應(yīng)用的快速發(fā)展，目前互聯(lián)網(wǎng)日益普及，己經(jīng)從傳 統(tǒng)的電腦擴(kuò)展到了包括手機(jī)、電視機(jī)、機(jī)頂盒、衛(wèi)星接收機(jī)、手持式游 戲機(jī)、便攜式媒體播放器等多種設(shè)備上。在不遠(yuǎn)的將來，使用這些非電 腦設(shè)備上網(wǎng)的用戶數(shù)量甚至有可能超過使用電腦上網(wǎng)的用戶數(shù)量。
用戶能夠訪問的互聯(lián)網(wǎng)網(wǎng)站主要分為兩類web網(wǎng)站以及wap網(wǎng)站。 其中的wap網(wǎng)站主要是針對手機(jī)這一類小屏幕設(shè)備而設(shè)計(jì)的，其功能、 表現(xiàn)力、網(wǎng)站和網(wǎng)頁的數(shù)量也遠(yuǎn)遠(yuǎn)比不上web網(wǎng)站。Web網(wǎng)站是互聯(lián)網(wǎng) 的最主要的組成部分，也是未來互聯(lián)網(wǎng)發(fā)展的趨勢，web網(wǎng)站的網(wǎng)頁(以 后簡稱web網(wǎng)頁)是互聯(lián)網(wǎng)內(nèi)容的最主要的存儲形式。
但是，目前的web網(wǎng)頁大部分是針對電腦設(shè)計(jì)的，在手機(jī)等屏幕比 較窄的設(shè)備上來看這些網(wǎng)頁會產(chǎn)生問題手機(jī)屏幕的寬度比web網(wǎng)頁的 寬度窄，那么在手機(jī)上瀏覽這些網(wǎng)頁時(shí)就需要反復(fù)的左右移動(dòng)屏幕上的 內(nèi)容才能看到所有的內(nèi)容，這會給用戶的閱讀造成很大的不方便。如附 圖1所示，要想閱讀網(wǎng)頁中的文字，必須多次左右移動(dòng)內(nèi)容才能夠看清 楚，文字越多，這種不方便性就越突出。
針對這個(gè)問題，有一些瀏覽器采用了一種比較簡單的解決辦法就 是將網(wǎng)頁的所有內(nèi)容都按照屏幕的寬度進(jìn)行重新布局，這樣子用戶不需 要左右移動(dòng)就可以閱讀所有的文字內(nèi)容。但是，這種簡單的解決辦法在 解決文字閱讀方便性的同時(shí)，卻引來了另外一個(gè)問題，那就是有可能造 成圖片顯示的混亂。目前，許多網(wǎng)站為了加速網(wǎng)頁的加載速度，往往將 一幅大的圖片分割成多幅小的圖片，也就是說看起來好像是一幅圖，實(shí) 際上是多幅圖拼湊出來的，但是各個(gè)圖片之間的相對位置關(guān)系必須嚴(yán)格 按照網(wǎng)頁設(shè)計(jì)者的本意才能正確顯示，否則顯示出來的圖片就可能完全
4無法表達(dá)網(wǎng)頁設(shè)計(jì)者的本意。在采用了按照屏幕寬度進(jìn)行布局的算法后， 圖片也需要重新進(jìn)行布局，這樣就可能導(dǎo)致圖片之間的相對位置與網(wǎng)頁 設(shè)計(jì)者的本意不一致，造成頁面的混亂，無法正確表達(dá)網(wǎng)頁作者的本意。 如附圖2所示，按照屏幕寬度布局之后，閱讀文字不需要左右移動(dòng)了， 但是兩幅圖片的顯示已經(jīng)錯(cuò)位，看不出原來圖片的原貌了，如果有更多 幅圖片，這種失真效果就更加突出。
針對上面這些問題，本發(fā)明設(shè)計(jì)了一種在窄屏幕設(shè)備上顯示寬網(wǎng)頁 的智能布局方法。

發(fā)明內(nèi)容
本發(fā)明的目的在于解決現(xiàn)有技術(shù)中存在的不足，提供一種在窄屏幕 設(shè)備上顯示寬網(wǎng)頁的智能布局方法，以方便瀏覽者在窄屏幕設(shè)備上瀏覽 寬網(wǎng)頁。
本發(fā)明的發(fā)明目的是通過下述技術(shù)方案予以實(shí)現(xiàn)的
一種在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法，其特征在于具 體包括如下步驟
(1) 顯示設(shè)備將所接收的網(wǎng)頁數(shù)據(jù)解析為節(jié)點(diǎn)樹形結(jié)構(gòu)；
(2) 顯示設(shè)備根據(jù)所解析的網(wǎng)頁數(shù)據(jù)節(jié)點(diǎn)樹形結(jié)構(gòu)，自根節(jié)點(diǎn)起依 次對各個(gè)節(jié)點(diǎn)進(jìn)行處理；
(3) 顯示設(shè)備判斷所處理的節(jié)點(diǎn)類型；如果該節(jié)點(diǎn)為文本節(jié)點(diǎn)，則 采用視口寬度顯示算法處理；如果該節(jié)點(diǎn)為非文本節(jié)點(diǎn)，則采用網(wǎng)頁布 局寬度顯示算法處理；
(4) 當(dāng)所述網(wǎng)頁數(shù)據(jù)的各個(gè)節(jié)點(diǎn)均被處理完成后，該布局方法結(jié)束。 所述視口寬度顯示算法具體包括如下步驟
(11) 所述顯示設(shè)備獲取所述文本節(jié)點(diǎn)樣式限制寬度及視口寬度；
(12) 顯示設(shè)備獲取文本節(jié)點(diǎn)的尚未被布局的文本內(nèi)容；
(13) 顯示設(shè)備根據(jù)步驟(11)所得到的樣式限制寬度和視口寬度， 計(jì)算得出當(dāng)前行的樣式剩余寬度和視口剩余寬度，并以其中的較小值， 作為該文本內(nèi)容在當(dāng)前行的布局實(shí)際允許寬度；
(14) 顯示設(shè)備根據(jù)所述布局實(shí)際允許寬度，計(jì)算當(dāng)前行所能夠容 納的文字?jǐn)?shù)目，并判斷是否能夠容納步驟(12)中所獲得的尚未被布局 的文本內(nèi)容；如果能夠全部容納，則布局所有文本內(nèi)容在當(dāng)前行，并結(jié) 束對本節(jié)點(diǎn)的布局處理；如果不能夠全部容納，則執(zhí)行步驟(15);
5(15) 顯示設(shè)備在能夠被容納于當(dāng)前行的文字中，從后向前查找分行點(diǎn)；如果査找到分行點(diǎn)，則將查到的第一個(gè)分行點(diǎn)以前的內(nèi)容布局在當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后返回步驟(12);如果未查到分行點(diǎn)，則執(zhí)行步驟(16);
(16) 顯示設(shè)備判斷當(dāng)前行文本的布局起點(diǎn)是否在該文本節(jié)點(diǎn)允許布局的最左邊位置；如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟
(13);如果在，則從所述能夠被容納于當(dāng)前行的文字之后，從前向后查找分行點(diǎn)；如果查找到分行點(diǎn)，則將査到的第一個(gè)分行點(diǎn)以前的內(nèi)容布局到當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后返回步驟(12);如果未査找到分行點(diǎn)，則將該文本節(jié)點(diǎn)的全部內(nèi)容都布局在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理。
所述視口寬度顯示算法還可以為如下步驟
(21) 所述顯示設(shè)備獲取所述文本節(jié)點(diǎn)樣式限制寬度及視口寬度；
(22) 顯示設(shè)備獲取文本節(jié)點(diǎn)尚未布局的文本內(nèi)容；如果沒有未布局的文本內(nèi)容，則結(jié)束對本節(jié)點(diǎn)的布局處理；
(23) 顯示設(shè)備從步驟(22)所獲得的尚未布局的文本內(nèi)容起點(diǎn)處開始查找分行點(diǎn)；如果未找到分行點(diǎn)則以該文本內(nèi)容結(jié)束位置為分行點(diǎn)；計(jì)算在第一個(gè)分行點(diǎn)以前文本內(nèi)容的寬度；
(24) 顯示設(shè)備根據(jù)步驟(21)所得到的樣式限制寬度和視口寬度，計(jì)算得出當(dāng)前行的樣式剩余寬度和視口剩余寬度，并以其中的較小值，作為該文本內(nèi)容在當(dāng)前行的布局實(shí)際允許寬度；
(25) 如果步驟(23)所計(jì)算得到的分行點(diǎn)以前文本內(nèi)容的寬度小于或者等于所述布局實(shí)際允許寬度，則該分行點(diǎn)以前文本內(nèi)容布局在當(dāng)前行，并返回步驟(22);否則，執(zhí)行步驟(26);
(26) 顯示設(shè)備判斷當(dāng)前行文本的布局起點(diǎn)是否在該文本節(jié)點(diǎn)允許布局的最左邊位置；如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟
(24);如果當(dāng)前行文本的布局起點(diǎn)已經(jīng)在允許布局的最左邊位置，則將
分行點(diǎn)以前的文本內(nèi)容布局在當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后
返回步驟(22)。
所述網(wǎng)頁布局寬度顯示算法具體包括如下步驟
(31) 所述顯示設(shè)備獲得所述非文本節(jié)點(diǎn)的寬度及樣式限制寬度；
(32) 顯示設(shè)備根據(jù)所述樣式限制寬度，計(jì)算當(dāng)前行的樣式剩余寬
6度；
(33) 比較所述非文本節(jié)點(diǎn)的寬度和當(dāng)前行樣式剩余寬度；如果當(dāng)前行的樣式剩余寬度大于或者等于節(jié)點(diǎn)寬度，則布局該節(jié)點(diǎn)在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理；否則，執(zhí)行步驟(34);
(34) 顯示設(shè)備判斷當(dāng)前行非文本節(jié)點(diǎn)的布局起點(diǎn)是否在該非文本節(jié)點(diǎn)允許布局的最左邊位置；如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟(32);否則，將該節(jié)點(diǎn)布局在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理。
本發(fā)明的有益效果是通過該智能布局方法處理的網(wǎng)頁可以使瀏覽者獲得適合于在窄屏幕上瀏覽的文本內(nèi)容布局，同時(shí)也不會影響網(wǎng)頁中非文本內(nèi)容的準(zhǔn)確顯示。


圖1為通過現(xiàn)有技術(shù)在窄屏幕設(shè)備上顯示寬網(wǎng)頁的布局示例一；圖2為通過現(xiàn)有技術(shù)在窄屏幕設(shè)備上顯示寬網(wǎng)頁的布局示例二；圖3為在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法的流程圖；圖4為視口寬度顯示算法的一種具體實(shí)施流程圖；圖5為視口寬度顯示算法的另一種具體實(shí)施流程圖；圖6為網(wǎng)頁布局寬度顯示算法的具體實(shí)施流程圖；圖7為樣式限制寬度及視口寬度說明示意圖。
具體實(shí)施例方式
下面結(jié)合附圖和實(shí)施例對本發(fā)明作進(jìn)一步描述。
由前述可知，現(xiàn)有技術(shù)中在窄屏幕設(shè)備上顯示寬網(wǎng)頁通常有兩種布局方法。 一種方法是直接在窄屏幕設(shè)備上按照寬網(wǎng)頁的布局格式顯示。這種方法的缺點(diǎn)在于瀏覽者在瀏覽這些網(wǎng)頁時(shí)就需要反復(fù)的左右移動(dòng)屏幕上的內(nèi)容才能看到所有的內(nèi)容，這給瀏覽者的閱讀造成很大的不方便。另一種方法就是將寬網(wǎng)頁的內(nèi)容都按照窄屏幕設(shè)備的屏幕寬度進(jìn)行重新布局，這樣用戶不需要左右移動(dòng)就可以閱讀所有的網(wǎng)頁內(nèi)容。但是，這種方法的缺點(diǎn)在于經(jīng)過這種方法重新布局的網(wǎng)頁往往會使網(wǎng)頁中的圖片信息等非文字內(nèi)容的顯示變得混亂。
可見，現(xiàn)有在窄屏幕設(shè)備上顯示寬網(wǎng)頁內(nèi)容的布局方法中所存在的問題，其關(guān)鍵在于無法對網(wǎng)頁中文字內(nèi)容和非文字內(nèi)容通過統(tǒng)一的顯示處理方法進(jìn)行布局，以獲得便于瀏覽者瀏覽的網(wǎng)頁顯示布局狀態(tài)。本發(fā)明即是針對這一點(diǎn)，設(shè)計(jì)了一種對網(wǎng)頁內(nèi)容中文本內(nèi)容和非文本內(nèi)容采用不同的顯示布局方法進(jìn)行分別處理的智能布局方法。
圖3為本發(fā)明所設(shè)計(jì)布局方法的流程圖。如圖所示，該在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法具體包括如下步驟-
(1) 顯示設(shè)備將所接收的網(wǎng)頁數(shù)據(jù)解析為節(jié)點(diǎn)樹形結(jié)構(gòu)；
(2) 顯示設(shè)備根據(jù)所解析的網(wǎng)頁數(shù)據(jù)節(jié)點(diǎn)樹形結(jié)構(gòu)，自根節(jié)點(diǎn)起依次對各個(gè)節(jié)點(diǎn)進(jìn)行處理；
(3) 顯示設(shè)備判斷所處理的節(jié)點(diǎn)類型；如果該節(jié)點(diǎn)為文本節(jié)點(diǎn)，則采用視口寬度顯示算法處理；如果該節(jié)點(diǎn)為非文本節(jié)點(diǎn)，則采用網(wǎng)頁布局寬度顯示算法處理；
(4) 當(dāng)所述網(wǎng)頁數(shù)據(jù)的各個(gè)節(jié)點(diǎn)均被處理完成后，該布局方法結(jié)束。由上可知，本發(fā)明所設(shè)計(jì)的智能布局方法主要是針對網(wǎng)頁中的文本
內(nèi)容和非文本內(nèi)容分別進(jìn)行不同的顯示算法處理，以為瀏覽者提供最便
于瀏覽的網(wǎng)頁布局狀態(tài)。這一點(diǎn)正是本發(fā)明與現(xiàn)有窄屏幕設(shè)備的網(wǎng)頁顯示布局技術(shù)的最大區(qū)別。通過這種布局方法可以使瀏覽者獲得適合于在窄屏幕上瀏覽的文本內(nèi)容布局，同時(shí)也不會影響網(wǎng)頁中非文本內(nèi)容的準(zhǔn)確顯示。
圖4為所述視口寬度顯示算法的一種具體實(shí)施流程圖。圖4所示視
口寬度顯示算法的具體步驟如下
(ll)顯示設(shè)備獲取該文本節(jié)點(diǎn)樣式限制寬度及視口寬度。
參見圖7，所述樣式限制寬度是指節(jié)點(diǎn)所在的塊類容器上設(shè)置的寬度。網(wǎng)頁設(shè)計(jì)者通過對塊類節(jié)點(diǎn)上設(shè)置寬度樣式，以限制塊類節(jié)點(diǎn)的內(nèi)容的呈現(xiàn)范圍。所述視口寬度是指屏幕或者瀏覽器窗口的寬度。
(12) 顯示設(shè)備獲取文本節(jié)點(diǎn)的尚未被布局的文本內(nèi)容。
(13) 顯示設(shè)備根據(jù)步驟11所得到的樣式限制寬度和視口寬度，計(jì)算得出當(dāng)前行的樣式剩余寬度和視口剩余寬度，并以其中的較小值，作為該文本內(nèi)容在當(dāng)前行的布局實(shí)際允許寬度。
參見圖7，所述樣式剩余寬度就是前述樣式限制寬度減去當(dāng)前行已有內(nèi)容占用的寬度。同樣，視口剩余寬度是指前述視口寬度減去當(dāng)前行已有內(nèi)容占用的寬度。
(14) 顯示設(shè)備根據(jù)所述布局實(shí)際允許寬度，計(jì)算當(dāng)前行所能夠容納的文字?jǐn)?shù)目，并判斷是否能夠容納步驟12中所獲得的尚未被布局的文本內(nèi)容。如果能夠全部容納，則布局所有文本內(nèi)容在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理。如果不能夠全部容納，則執(zhí)行步驟15。
(15) 顯示設(shè)備在能夠被容納于當(dāng)前行的文字中，從后向前査找分行點(diǎn)。如果查找到分行點(diǎn)，則將査到的第一個(gè)分行點(diǎn)以前的內(nèi)容布局在當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后返回步驟12。如果未查到分行
點(diǎn)，則執(zhí)行步驟16。
所述分行點(diǎn)是指文字之間允許進(jìn)行折行處理的位置。這里，文字之間是否被允許進(jìn)行折行處理是根據(jù)文字的折行性質(zhì)來判斷。有的文字允
許從自身的前面折行，比如前括號；有的文字允許從自身的后面折行，比如后括號。有的文字需要根據(jù)相鄰文字來判斷，比如字母。對于分行點(diǎn)的判斷以為現(xiàn)有技術(shù)，并不在本發(fā)明的設(shè)計(jì)范圍之內(nèi)。因此，此處不再詳述分行點(diǎn)的具體判斷過程。
(16) 顯示設(shè)備判斷當(dāng)前行文本的布局起點(diǎn)是否在該文本節(jié)點(diǎn)允許布局的最左邊位置。如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟13;如果在，則從所述能夠被容納于當(dāng)前行的文字之后，從前向后査找
分行點(diǎn)。如果查找到分行點(diǎn)，則將查到的第一個(gè)分行點(diǎn)以前的內(nèi)容布局
到當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后返回步驟12;如果未査找到
分行點(diǎn)，則將該文本節(jié)點(diǎn)的全部內(nèi)容都布局在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理。
所述允許布局的最左邊位置是指當(dāng)前節(jié)點(diǎn)所在的塊類容器的最左側(cè)，即表示當(dāng)前行沒有容納其他任何內(nèi)容。
通過上述圖4所示的視口寬度顯示算法處理后的文本節(jié)點(diǎn)內(nèi)容被布
局在顯示設(shè)備的視口寬度以內(nèi)，這樣瀏覽者僅需使用上下鍵即可瀏覽文本內(nèi)容，方便了瀏覽者瀏覽。
但應(yīng)指出的是，圖4所示流程僅為視口寬度顯示算法的一種實(shí)施方
式。事實(shí)上，上述的文本顯示布局效果并不僅限于上述一種視口寬度顯
示算法得到。圖5即為視口寬度顯示算法的另一種具體實(shí)施流程圖。圖5所示視口寬度顯示算法的具體步驟如下
(21) 顯示設(shè)備獲取該文本節(jié)點(diǎn)樣式限制寬度及視口寬度。
(22) 顯示設(shè)備獲取文本節(jié)點(diǎn)尚未布局的文本內(nèi)容；如果沒有未布
局的文本內(nèi)容，則結(jié)束對本節(jié)點(diǎn)的布局處理。
(23) 顯示設(shè)備從步驟22所獲得的尚未布局的文本內(nèi)容起點(diǎn)處開始
9查找分行點(diǎn)。如果未找到分行點(diǎn)則以該文本內(nèi)容結(jié)束位置為分行點(diǎn)。計(jì)算在第一個(gè)分行點(diǎn)以前文本內(nèi)容的寬度。
(24) 顯示設(shè)備根據(jù)步驟21所得到的樣式限制寬度和視口寬度，計(jì)算得出當(dāng)前行的樣式剩余寬度和視口剩余寬度，并以其中的較小值，作為該文本內(nèi)容在當(dāng)前行的布局實(shí)際允許寬度。
(25) 如果步驟23所計(jì)算得到的分行點(diǎn)以前文本內(nèi)容的寬度小于或者等于所述布局實(shí)際允許寬度，則該分行點(diǎn)以前文本內(nèi)容布局在當(dāng)前行，并返回步驟22。否則，執(zhí)行步驟26。
(26) 顯示設(shè)備判斷當(dāng)前行文本的布局起點(diǎn)是否在該文本節(jié)點(diǎn)允許布局的最左邊位置。如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟24;如果當(dāng)前行文本的布局起點(diǎn)已經(jīng)在允許布局的最左邊位置，則將分行點(diǎn)以前的文本內(nèi)容布局在當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后返回步驟22。
圖6為所述網(wǎng)頁布局寬度顯示算法的具體實(shí)施流程圖。圖6所示網(wǎng)頁布局寬度顯示算法的具體步驟如下
(31) 顯示設(shè)備獲得該非文本節(jié)點(diǎn)的寬度及樣式限制寬度。
(32) 顯示設(shè)備根據(jù)所述樣式限制寬度，計(jì)算當(dāng)前行的樣式剩余寬度。
(33) 比較所述非文本節(jié)點(diǎn)的寬度和當(dāng)前行樣式剩余寬度。如果當(dāng)前行的樣式剩余寬度大于或者等于節(jié)點(diǎn)寬度，則布局該節(jié)點(diǎn)在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理。否則，執(zhí)行步驟34。
(34) 顯示設(shè)備判斷當(dāng)前行非文本節(jié)點(diǎn)的布局起點(diǎn)是否在該非文本節(jié)點(diǎn)允許布局的最左邊位置。如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟32。否則，將該節(jié)點(diǎn)布局在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理。
通過這種方法進(jìn)行布局處理的非文本節(jié)點(diǎn)，其顯示布局并不會受到窄屏幕設(shè)備的視口寬度限制，而是在保證非文本節(jié)點(diǎn)按樣式限制寬度顯示的前提下，盡可能的充分利用顯示設(shè)備的視口寬度。這樣，就保證了非文本內(nèi)容的顯示不會因布局處理而被打亂。
綜上所述，本發(fā)明所涉及的在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法是通過對網(wǎng)頁中的文本內(nèi)容和非文本內(nèi)容分別進(jìn)行不同的顯示算法處理，使得其中的文本內(nèi)容被布局在顯示設(shè)備的視口寬度以內(nèi)，而非文
10本內(nèi)容則在保證顯示布局不被打亂。這樣就可以獲得最適于瀏覽者瀏覽的網(wǎng)頁布局顯示狀態(tài)。
可見，本發(fā)明的核心設(shè)計(jì)要點(diǎn)在于對于網(wǎng)頁中的文本內(nèi)容和非文本內(nèi)容進(jìn)行不同的顯示算法處理，以達(dá)到各自不同的理想顯示效果。而如前所述，用以達(dá)到文本內(nèi)容和非文本內(nèi)容理想顯示效果的具體布局處理算法并不僅限于一種實(shí)施方式。因此，不論本領(lǐng)域一般技術(shù)人員所做的文本內(nèi)容和非文本內(nèi)容的具體顯示布局處理方法如何，只要其依照本發(fā)
明按照節(jié)點(diǎn)的類型分別進(jìn)行顯示布局處理的核心設(shè)計(jì)思想進(jìn)行設(shè)計(jì)，則均應(yīng)視為在本發(fā)明的保護(hù)范圍之內(nèi)。
權(quán)利要求
1、一種在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法，其特征在于具體包括如下步驟(1)顯示設(shè)備將所接收的網(wǎng)頁數(shù)據(jù)解析為節(jié)點(diǎn)結(jié)構(gòu)；(2)顯示設(shè)備根據(jù)所解析的網(wǎng)頁數(shù)據(jù)節(jié)點(diǎn)結(jié)構(gòu)，自根節(jié)點(diǎn)起依次對各個(gè)節(jié)點(diǎn)進(jìn)行處理；(3)顯示設(shè)備判斷所處理的節(jié)點(diǎn)類型；如果該節(jié)點(diǎn)為文本節(jié)點(diǎn)，則采用視口寬度顯示算法處理；如果該節(jié)點(diǎn)為非文本節(jié)點(diǎn)，則采用網(wǎng)頁布局寬度顯示算法處理；(4)當(dāng)所述網(wǎng)頁數(shù)據(jù)的各個(gè)節(jié)點(diǎn)均被處理完成后，該布局方法結(jié)束。
2、 如權(quán)利要求1所述的在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方 法，其特征在于所述視口寬度顯示算法具體包括如下步驟(11) 所述顯示設(shè)備獲取所述文本節(jié)點(diǎn)樣式限制寬度及視口寬度；(12) 顯示設(shè)備獲取文本節(jié)點(diǎn)的尚未被布局的文本內(nèi)容；(13) 顯示設(shè)備根據(jù)步驟(11)所得到的樣式限制寬度和視口寬度， 計(jì)算得出當(dāng)前行的樣式剩余寬度和視口剩余寬度，并以其中的較小值， 作為該文本內(nèi)容在當(dāng)前行的布局實(shí)際允許寬度；(14) 顯示設(shè)備根據(jù)所述布局實(shí)際允許寬度，計(jì)算當(dāng)前行所能夠容 納的文字?jǐn)?shù)目，并判斷是否能夠容納步驟(12)中所獲得的尚未被布局 的文本內(nèi)容；如果能夠全部容納，則布局所有文本內(nèi)容在當(dāng)前行，并結(jié) 束對本節(jié)點(diǎn)的布局處理；如果不能夠全部容納，則執(zhí)行步驟(15);(15) 顯示設(shè)備在能夠被容納于當(dāng)前行的文字中，從后向前查找分 行點(diǎn)；如果查找到分行點(diǎn)，則將查到的第一個(gè)分行點(diǎn)以前的內(nèi)容布局在 當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后返回步驟(12);如果未査到分 行點(diǎn)，則執(zhí)行步驟(16);(16) 顯示設(shè)備判斷當(dāng)前行文本的布局起點(diǎn)是否在該文本節(jié)點(diǎn)允許 布局的最左邊位置；如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟(13);如果在，則從所述能夠被容納于當(dāng)前行的文字之后，從前向后査 找分行點(diǎn)；如果查找到分行點(diǎn)，則將查到的第一個(gè)分行點(diǎn)以前的內(nèi)容布局到當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后返回步驟(12);如果未查找到分行點(diǎn)，則將該文本節(jié)點(diǎn)的全部內(nèi)容都布局在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局處理。
3、 如權(quán)利要求1所述的在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方 法，其特征在于所述視口寬度顯示算法具體包括如下步驟(21) 所述顯示設(shè)備獲取所述文本節(jié)點(diǎn)樣式限制寬度及視口寬度；(22) 顯示設(shè)備獲取文本節(jié)點(diǎn)尚未布局的文本內(nèi)容；如果沒有未布 局的文本內(nèi)容，則結(jié)束對本節(jié)點(diǎn)的布局處理；(23) 顯示設(shè)備從步驟(22)所獲得的尚未布局的文本內(nèi)容起點(diǎn)處 開始查找分行點(diǎn)；如果未找到分行點(diǎn)則以該文本內(nèi)容結(jié)束位置為分行點(diǎn)； 計(jì)算在第一個(gè)分行點(diǎn)以前文本內(nèi)容的寬度；(24) 顯示設(shè)備根據(jù)步驟(21)所得到的樣式限制寬度和視口寬度， 計(jì)算得出當(dāng)前行的樣式剩余寬度和視口剩余寬度，并以其中的較小值， 作為該文本內(nèi)容在當(dāng)前行的布局實(shí)際允許寬度；(25) 如果步驟(23)所計(jì)算得到的分行點(diǎn)以前文本內(nèi)容的寬度小 于或者等于所述布局實(shí)際允許寬度，則該分行點(diǎn)以前文本內(nèi)容布局在當(dāng) 前行，并返回步驟(22);否則，執(zhí)行步驟(26);(26) 顯示設(shè)備判斷當(dāng)前行文本的布局起點(diǎn)是否在該文本節(jié)點(diǎn)允許 布局的最左邊位置；如果不在，則移動(dòng)布局起點(diǎn)到下一行，并返回步驟(24);如果當(dāng)前行文本的布局起點(diǎn)已經(jīng)在允許布局的最左邊位置，則將 分行點(diǎn)以前的文本內(nèi)容布局在當(dāng)前行，并移動(dòng)布局起點(diǎn)到下一行，然后 返回步驟(22)。
4、 如權(quán)利要求1所述的在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法，其特征在于所述網(wǎng)頁布局寬度顯示算法具體包括如下步驟(31) 所述顯示設(shè)備獲得所述非文本節(jié)點(diǎn)的寬度及樣式限制寬度；(32) 顯示設(shè)備根據(jù)所述樣式限制寬度，計(jì)算當(dāng)前行的樣式剩余寬度；(33) 比較所述非文本節(jié)點(diǎn)的寬度和當(dāng)前行樣式剩余寬度；如果當(dāng) 前行的樣式剩余寬度大于或者等于節(jié)點(diǎn)寬度，則布局該節(jié)點(diǎn)在當(dāng)前行， 并結(jié)束對本節(jié)點(diǎn)的布局處理；否則，執(zhí)行步驟(34);(34) 顯示設(shè)備判斷當(dāng)前行非文本節(jié)點(diǎn)的布局起點(diǎn)是否在該非文本 節(jié)點(diǎn)允許布局的最左邊位置；如果不在，則移動(dòng)布局起點(diǎn)到下一行，并 返回步驟(32);否則，將該節(jié)點(diǎn)布局在當(dāng)前行，并結(jié)束對本節(jié)點(diǎn)的布局 處理。
全文摘要
本發(fā)明提供了一種在窄屏幕設(shè)備上顯示寬網(wǎng)頁的智能布局方法是通過對網(wǎng)頁中的文本內(nèi)容和非文本內(nèi)容分別采用視口寬度顯示算法和網(wǎng)頁布局寬度顯示算法進(jìn)行顯示布局處理，使得網(wǎng)頁中的文本內(nèi)容被布局在顯示設(shè)備的視口寬度以內(nèi)，而非文本內(nèi)容則在保證顯示布局不被打亂的前提下充分利用顯示設(shè)備的視口寬度。通過該智能布局方法可以使瀏覽者獲得適合于在窄屏幕上瀏覽的文本內(nèi)容布局，同時(shí)也不會影響網(wǎng)頁中非文本內(nèi)容的準(zhǔn)確顯示。
文檔編號G06F17/30GK101477564SQ20091007679
公開日2009年7月8日 申請日期2009年1月21日 優(yōu)先權(quán)日2009年1月21日
發(fā)明者杰 黃 申請人:北京千家悅網(wǎng)絡(luò)科技有限公司