0
Future consideration

Columned texts

concepsys 2 years ago updated 2 years ago 4

We find columned texts to be more easy to read. So, we implemented it through HTML snippets all over our website. www.concepsysbim.com  This method has several disavantages.

So, please add an option of number of columns (1 to 4 would sufice) in texts. This would allow us to use texts instead of HTML all over.

Columns naturally reduce until a single column in smaller devices such as mobile phones.


Here's the code we are using for all texts in our website through HTML widgets:


<style>
.newscol1{
column-count: 1;
column-width:  200px;
column-gap:2em;}
  .newscol2{
  column-count: 2;
  column-width:  200px;
  column-gap:2em;}
    .newscol3{
    column-count: 3;
    column-width:  200px;
    column-gap:2em;}
    .newscol4{
    column-count: 4;
    column-width:  200px;
    column-gap:2em;}
</style>


As you can see, you would have to create a slider for number of columns (1 to 4), column width and spacing between columns.

-1
Already available

Hi, When you add a section to your page, you can select from a choice of layouts with varying columns. Have you tried using these layouts instead of applying code?

I was afraid to get such an answer. 

What I am asking for is not the same. Please look at the following example:



The top and bottom seam the same. But they are not.

The top uses your proposed method. 

The bottom uses a single html box with columned text.

The orange text must be right bellow the white text and not bellow thw picture.


Now lets reduce the screen area (width).



(A) First, your method:

1.After some compression...


The picture is ok, The orange text is OK.


2.After even more compression...


It keeps three columns with compressed text inside them, but very "skinny" dificult to read. The picture jumped to the right of the screen!? :((


3.Full compression


The orange text is after the first paragraph, instead of bellow them as it should. :(((



(B)

Now the method I am asking you to implement (single wide text block with a configuration of a maximum of 4 columned text):

1.After some compression 


the text automatically becomes only two columns. The picture and the lower text keeps where it should be.


2.After evem more compression...


 The text becomes a single column instead og three skinny columns. The picture and the lower text remains where they should be.


3.Full compression


Finally the picture jumps on top but the orange text is at the bottom, as it should, and again, just a single readable column.


See how text flows and adapts? What I am asking is for this functionality to be implemented. 

As I see it it shouldn't be too hard to implement...


Best regards,


Future consideration

Thanks for the screenshots and the clarification. I have marked this as a future consideration.


As a workaround for this website you could place the orange text within the last column - it should then display at the bottom of the section on mobile.

Thank you for your suggestion. I know you mean well.

But please notice in my previous e-mail, I was carefull enough to mention that

"The orange text must be right bellow the white text and not bellow the Picture."


I knew MF would suggest something like that, but that would make the Orange text to be placed separated from the white text, below the bottom of the left picture.

The other option I thought MF would suggest, would be to place the orange text below the last column of white text.

Still, that's not what we intend, since we want it in the left side, next and below the white text 


As you can see, columned text would help a lot and would easily introduce a powerfull text formating of texts.

I still say it would be easy to implement, since all I described is fully managed by HTML5.


Regards.