none
Text-intent in Multi-column Layout RRS feed

  • 问题

  • When the first column filled with the textthe second column,first paragraph will be indented;when the first column is not full of the text,the second column,first line is not indented.I want a paragraph indentation even if the first one not full , how can I do.AS shown below:

    2012年5月28日 3:41

答案

  • 测试后,发现每个出现问题的<p>所占区域是整个两个列的区域:

    所以我尝试在这个要分列的前一个P的样式上加了一个 break-after:column; 值,强制加入分栏符,则就好了。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月6日 10:59
    版主

全部回复

  • How do you code above UI, via RichTextBlock and RichTextBlockOverflow? Could you please share some code here then I can test and reproduce it in my side, thanks.

    Sincerely,


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us


    2012年5月29日 3:32
    版主
  • hi,thanks for your reply,

    it is not a  RichTextBlock or RichTextBlockOverflow,it is just a HTML5 <p> element. here's the html code and css:

    <p class="_para">EPSS系统中的各个子系统为用户提供不同的支持:</p> <p class="_para">⑴超媒体信息库:提供能提升工作绩效的所有数据与信息,以便于搜索与获得,通常用超链接方式来组织和存储数据;</p> <p class="_para">⑵专家系统:提供问题解决、诊断、障碍排除、决策支持及分析等功能。通常由知识库或规则库与推理机制所构成;</p>

        /*段落首行缩进*/
        .ReadPage section[role=main] article .ReadPage_Div_MainArtical ._para {
            text-indent: 2em;
            }

    • 已编辑 Cherish_ 2012年5月30日 7:12
    2012年5月30日 7:06
  • Who uses this class "ReadPage_Div_MainArtical"?  And what is the entire code for this reader?

    Just testing this style, all P elements with it can show the text indent correctly.


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月1日 7:57
    版主
  • This is some of the code:

    <body> <div id="ReadPage_Div_Menu" data-win-control="WinJS.UI.Menu"> </div> <section role="main" id="ReadPage_Main"> <article> <div class="ReadPage_Div_MainArtical"></div> </article> </section> </body>

     @media screen and (-ms-view-state: fullscreen-landscape) {
         .ReadPage_Div_MainArtical {
            margin-right: 80px;     
            line-height: 2;
            margin-bottom: 10px;
            margin-top: 0px;
            vertical-align: baseline;
            font-family: 'Microsoft YaHei';
            word-break:break-all;
            text-indent: 2em;
            color: #f00;   
         
           
        }
          section[role=main] {
            -ms-grid-row: 2;
            overflow-y: hidden;
            overflow-x: auto;
            height: 500px;
            width: 100%;
            color: #ffd800;
          
        }
            /*Multi-column Layout */
            section[role=main] article {
                column-fill: auto;
                column-gap: 0px;
                columns: auto 560px;
                height: calc(100% - 50px);
                color: #282017;
                text-align: justify;
                margin-left: 120px;
                width: 560px;
                color: #4cff00;
            }
    }

    Windows.Storage.PathIO.readTextAsync(GlobalData.currentsection.parent.parent.folderPath + "\\" + GlobalData.currentsection.parent.parent.chapters[NextChapterIndex].folderPath + "\\" + GlobalData.currentsection.parent.parent.chapters[NextChapterIndex].sections[SectionIndex].folderPath + "\\" + "content.txt").then(function (str) {
                        event.srcElement.element.querySelector("article .ReadPage_Div_MainArtical").innerHTML = str;

    the context.txt is the text of the page,such as:

     <p class="_para">EPSS系统中的各个子系统为用户提供不同的支持:</p>
      <p class="_para">⑴超媒体信息库:提供能提升工作绩效的所有数据与信息,以便于搜索与获得,通常用超链接方式来组织和存储数据;</p>
      <p class="_para">⑵专家系统:提供问题解决、诊断、障碍排除、决策支持及分析等功能。通常由知识库或规则库与推理机制所构成;</p>








    • 已编辑 Cherish_ 2012年6月4日 5:52
    2012年6月4日 2:40
  • 测试后,发现每个出现问题的<p>所占区域是整个两个列的区域:

    所以我尝试在这个要分列的前一个P的样式上加了一个 break-after:column; 值,强制加入分栏符,则就好了。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年6月6日 10:59
    版主
  • 如果按照您的方法做是可以实现的,可是问题在于:我不知道一篇文章从哪里开始分列(除非我把每篇文章或者每本书都看一遍然后再调整),文章是从网上随意下载,或者抓取的。

    2012年6月8日 9:44