ftlabs / ftcolumnflow Goto Github PK

Just look at these images. At both one and the same text, the difference is that in the first I used "OpenSansRegular" font, and in the second I used Verdana. As you can see, with custom @font-face lines can be duplicated or be lost.

OpenSans

Verdana

I have set of paragraphs after third paragraph i have one img tag with "nowrap" class, all works fine while cf.flow(), when i changed font size and tried reflow() after image the lineheigth issue appears (half of the text in single line showing in endof column and remaining half showing in starting of next column)

Note: with out inline image flow() and reflow() works fine with font size change.

Hey,

I'm working on something that requires hard breaks at certain points in the column flow. This is effectively the CSS3 break-before and break-after feature. I've been hacking away at it for quite some time but can't seem to wrap my head around things well enough to pin down how/where to implement it. Definitely something I need so I'll keep working on it but would be a great addition to the library as well.

Here's where I am now: https://gist.github.com/ainth/6214775. There's small bits of code elsewhere but I'm guessing most of the work has to happen in _addFlowedElement

What I'm trying to do is something like "if we see a force break class on the element, forcibly finish wrapping the preceding content". The problem is that when this happens certain columns have their content cut off (some elements don't wrap as expected). I'm using lots of nowrap and keepwithnext so I'm thinking it might have something to do with those?

Problem

Lines containing portions of bold, superscript and subscript text will sometimes be rendered slightly taller than other lines. Presumably the browser does this to stop lines bleeding into each other.

The current solution involves adding p strong, p sup, p sub { font-size: 0.9rem } to user CSS. This works, but a more scalable solution would probably be better.

Support

Seems to be supported in Chrome > 16 and Safari > 5.1.

Documentation

CSS3 LineBox spec
Peter Beverloo's WebKit blog

If you have a nowrap element which is too tall for the column then the excess gets trimmed off and discarded. E.g. here - the text in yellow spills off the bottom and is never flowed into the next column.

Would a better approach be to see if the element is taller than the column and, if so, remove the nowrap restriction instead of being forced to lose content? Lesser of two evils?

However, this test makes it seem like this is explicitly intended behaviour so maybe I'm missing something.

Happy to see about addressing this if you agree with the suggestion above!

Since IE9 doesn't support CSS3 Columns I've been looking for a good replacement and I ran into FTColumnFlow.

I've tested basic FTColumnFlow functionality in IE9. All I've had to do is add the following polyfill for classList support.

https://github.com/eligrey/classList.js

Is there any particular reason to use columnflow js, where it can be achieved using

column-count
-moz-column
-webkit-column

in all browsers?

Can the flowed and fixed content elements be cloned/moved into place, rather than reading the innerHTML and building up a string to write to the DOM?

Now we have to specify the page number in advance to flow the fixed content. It would be nice to have something like "attach-page-last", which will flow the content in last page.

Is there any smart and fast way to implement spliting paragraphs between columns as you described here ?

"Our first iteration looped through each word in the flowed text to determine whether or not it was within the bounds of the current column. When the first out-of-bounds word was found, the paragraph was split, and the second part moved over to a new column."

This is an example №3 from "examples" folder.

I am using the horizontal scroll withe below values
var ft = new FTColumnflow('target', 'viewport', {
//columnWidth: 120,
columnCount: 4,
standardiseLineHeight: true,
pagePadding: 20,
viewportWidth: inWidth,
viewportHeight: inHeight-20,
pageArrangement: 'horizontal',
showGrid: false,
allowReflow: true,
minFixedPadding: 0.5
});
The entire first page is filled with fixed content. In this case the flowing content is overwritten on the fixed content of first page.
Flow content overlapping on fixed content: http://s28.postimg.org/7mrmx73y5/flowcontent.png
Without flow content, only fixed content: http://s29.postimg.org/f64jukjqv/withoutfixedcontent.png
Is this a limitation or am I doing something wrong? I have searched through the docs as well.

Part of the CSS Generated Content for Paged Media Module. Support was recently added to WebKit.

Implement unit test coverage tooling and badging. Might be nice to add on the devDependencies badge too.

This results in text being cut off af the top or bottom.

When I have elements with unique ID in flowedContent, let's say I have gallery-1:

<div class="post-text" id="target"></div>
<div class="post-text" id="flowedContent">
  <div id="gallery-1" class="gallery">
    ...
  </div>
</div>

FTColumnFlow copies my gallery without changing its ID, so that I have 2 elements with the same ID on my page. And it causes lots of troubles for me: for example, gallery can't work properly because browser thinks that these 2 galleries it's one big gallery.

I propose to check FIRST if element have ID or not. If element have some ID, then we can add, for example, the word "-flowed" to end of the ID. And the final ID will be gallery-1-flowed. Problem resolved.

Hello,

How would you go about preventing the horizontal scrolling on vertical layouts? In your example (http://ftlabs.github.com/ftcolumnflow/3.html) a horizontal scrollbar gets placed since the #target node still contains the width of the horizontally placed pages.

I am astounded by the flexibility and capabilities of the FTColumnFlow.js script.

I am trying to implement it on a rather content-heavy site, deployed on a Joomla 3 platform, and have basically got it working as I wish. However, I am a bit puzzled as to how to implement the final bits of what I need it to do, so I was hoping you could assist me.

Right now, as you can see on the following page, http://bit.ly/X5H4Bv the content is being reflowed into columns. This page has more content than fits in a single page, so the script is adding a 2nd page, which is exactly what I need it to do. My first roadblock is related to creating intra-article pagination. (If you look at other pages on the site, you will see I have a solution that is not perfect, but implements the pagination. However, I want to migrate all content to FTColumnFlow.js.).

When viewing http://app.ft.com/ I can see that there are two concurrent paginations occurring…intra-article and inter-article, by which I mean pagination in a multi-page article and pagination from one article to the next.

How can I implement that technique, not just on an iPad or touch-capable device, but also on a desktop view, especially, the pagination in a multi-page article. Is this built-in to FTColumnFlow.js or is it an additional script? If possible, I would also like to integrate and implement the pagination between different articles and eliminate the previous/next buttons altogether (or implement them differently).

My 2nd question is on reflowing the content on browser resize. I see the javascript reflow-test.js in tests. Again, is that built-in to FTColumnFlow.js or is it an additional script, and how do I take advantage of that?

My 3rd question is, how do I change the column count from a default of 3 to 2 to 1 based on media queries?

I am not that skilled at JavaScript, but can understand enough that with some clear guidance, I can implement it.

I really would appreciate any help you could provide.

I have posted a portion of this question on stack overflow. If that is a more appropriate forum for a reply to these questions, please feel free to answer there. The link to the question is here: http://stackoverflow.com/questions/15587520/adding-pagination-and-responsive-resizing-to-ftcolumnflow-js

Hi guys,

This is a brilliant library. I'm currently using it create a layout for a data feed from an api.
It all works quite well. The problem I'm currently facing is when printing. The column flow pages do not stay at the top of the printed pages. The pages either move up or down dependant on the width of the viewport that's set. I've added red borders to the pages to highlight the issue:

One of the first pages:

Pages further down:

And the pages move further and further up.

Hopefully someone will be able to guide me in the right direction.
Thank you.

This code is breaking my layout:

<p>Audio:</p>

<audio class="wp-audio-shortcode" id="audio-587-1" preload="none" style="width: 100%; visibility: hidden;" controls="controls"><source type="audio/mpeg" src="http://127.0.0.1/wordpress/wp-content/uploads/2012/07/originaldixielandjazzbandwithalbernard-stlouisblues.mp3?_=1"><a href="http://127.0.0.1/wordpress/wp-content/uploads/2012/07/originaldixielandjazzbandwithalbernard-stlouisblues.mp3">http://127.0.0.1/wordpress/wp-content/uploads/2012/07/originaldixielandjazzbandwithalbernard-stlouisblues.mp3</a></audio>

Output in web console window:

TypeError: element.getAttribute is not a function
FTColumnflow.js:879:31

i run the example but dont work, y?

I implemented this script and it works well. I call the reflow function on resize events, also this works without problems. Unfortunately, if the zoom factor / font size is adjusted in the browser, the line height and the positioning parameters (top / marginTop) are not accurate, so I end up with visually broken lines and unaligned lines across columns.

This happens both with standardiseLineHeight: false and true.

With standardiseLineHeight: true however, I not only end up with broken lines, but now, every time I decrease or increase the zoom factor, the space between paragraphs gets wider and wider. So after just a handful of such events I see spaces of multiple line-heights between paragraphs.

Is this script supposed to handle zoom factor change events properly, so if the user is increasing the font size manually, does the .reflow() function reflect this in the line height and positioning calculation? What is the recommended combination of config params and css values to get this tackled ?

It would be great if this is were made AMD compatible, maybe using a UMD?

Hi,

I found some (maybe) not wanted behaviour.
When you flow some content which have a nowrap class, if nested inside a <div>, it does not go to the next page. But it works with a <p>.

Any idea ?

Summary

Not working example :

<div>
    <h3 class="keepwithnext">A picture:</h3>
    <img class="nowrap" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Metamorphosis.jpg/147px-Metamorphosis.jpg" style="width: 147px; height: 239px;" />    
</div>

Working example :

<p>
    <h3 class="keepwithnext">A picture:</h3>
    <img class="nowrap" src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Metamorphosis.jpg/147px-Metamorphosis.jpg" style="width: 147px; height: 239px;" />    
</p>

Edit : it happens to work for the <p> only if the class keepwithnext is present in the nested content though. Otherwise, putting nowrap class to the parent <p> or <div> does the trick.

I have been exploring ways to generate PDFs from HTML code in a Rails application. To make documents look a lot sharper I decided to utilize FTColumnFlow. I am using Wicked PDF to generate the documents from a template rendered using FTColumnFlow, with a javascript delay to make sure FTColumnFlow has time to do its stuff. Here is the code:

av = ActionView::Base.new()
av.view_paths = ActionController::Base.view_paths
av.class_eval do
    include Rails.application.routes.url_helpers
    include ApplicationHelper
end
body_html = av.render :pdf => "#{@iter.name}", :template => "iterations/show.pdf.erb", :locals => {:iteration_id => @iter.id}, :javascript_delay => 3000
pdf = WickedPdf.new.pdf_from_string(body_html, :page_size => 'Letter', :margin => {:top => 10, :bottom => 10, :left => 15, :right => 15}, :javascript_delay => 3000)

That's the rails and Wicked PDF side of things, here is the iterations/show.pdf.erb referenced where the content for the documents is added and FTColumnFlow is implemented.

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
    <script>
      WebFont.load({
        google: {
          families: ['Droid Sans:n4,n7']
        }
      });
    </script>
    <%= wicked_pdf_javascript_include_tag "FTColumnflow" %>
    <%= wicked_pdf_stylesheet_link_tag 'pdf/iterations' %>
    <style>
      body { margin: 0; padding: 0; }
      #flowedContent, #fixedContent { opacity: 0; }
    </style>
  </head>
  <body>
    <section id="viewport">
      <article id="target"></article>
    </section>
    <div id="flowedContent">
      <%= @iteration.verbiage.html_safe %>
    </div>

    <% if [email protected]_verbiage.nil? && @iteration.fixed_verbiage != "" %>
      <div id="fixedContent">
        <%= @iteration.fixed_verbiage.html_safe %>
      </div>
    <% end %>
    <script type="text/javascript">
      var targetEl  = document.getElementById('target');
      var viewportEl = document.getElementById('viewport');
      var cf = new FTColumnflow(targetEl, viewportEl, {
        columnCount:             2,
        pageArrangement:         'vertical',
        standardiseLineHeight:   true,
        columnFragmentMinHeight: 30,
        pagePadding:             1,
        columnGap:               20,
        viewportWidth:           1095,
        viewportHeight:          1532,
        allowReflow:             false
      });
      if(<%= @iteration.fixed_verbiage.nil? %> == true || <%= @iteration.fixed_verbiage == "" %> == true){
        var flowedContent = document.getElementById('flowedContent');
        cf.flow(flowedContent, null);
      }else{
        var flowedContent = document.getElementById('flowedContent'),
            fixedContent = document.getElementById('fixedContent');
        cf.flow(flowedContent, fixedContent);
      }
    </script>
  </body>
</html>

Basically, I just make the viewportWidth and viewportHeight match the size of a letter size page which makes Wicked PDF render each FTColumnFlow page on a new page in the PDF document. You can see also that I make room for rendering it a little differently based on whether or not the document requires fixedContent.
This has been almost successful but I am running into some issues on lines being repeated or dropped when breaking from one column or page to the next. Some pictures are below, the first shows a line repeating on a column break and the second shows a line deleted on a page break. I cannot find the issue, sometimes the column and page breaks work out fine but a significant percentage of the time it results in a duplicated or lost line.

Currently ftcolumnflow requires both the height and the width be set on the viewport. I assume this is because the approach has always meant to be page-based. That works well for fixed-screen-size devices like the iPad of course, but often it'll make sense to restrict only one of the dimensions, such as width, and let the other one sort itself out.

This is what CSS3 columns do if there's no height set by the way.

I'm particularly interested in not setting the height, but the opposite might make sense in some scenarios, though it's generally less useful in my mind.

It looks like all demos are showing that the library has some kind of troubles with vertical space adjustment. All of them are scrollable far beyond any visible content, especially in vertical direction.
Is it possible to do something with that?

I was wondering if we could have a new element which could be placed in a page irrespective of the col-span and anchoring. I have been experimenting with the library and getting great results. I was wondering if such a thing was possible then I could use shapes to wrap text around these fixed elements.
http://alistapart.com/article/css-shapes-101#figure12
http://alistapart.com/article/css-shapes-101#figure14
and create layouts which are closer to their print counterparts. CSS fragmentation and CSS Exclusions are still under drafts and shapes seem to be better way for now.

This is what I have been working on: http://216.139.250.24/50-years/article/2015/04/The_Beginning