Big ideas clear inline css

[guidoferreyra]

Hi Kenneth!
I find a little bit problematic that Big Ideas clean all inline styles, because I use other functions to style the text, color, OT features, etc and when Big ideas is triggered on resize i.e all get clear.
Could you guide me to solve this?

Another little thing. I've a approximately 10 instances of BI on my page and when I resize the performance is poor and this is understandable it's a lot of computing. What can you suggest me to improve a little bit the performance?

Thanks in advance, Big Ideas is great!

Regards.

[kennethormandy]

Hey @guidoferreyra! On resize, does it seem like the performance is poor because nothing is happening quickly, or does the page actually slow down in some way? The script only runs once every 500ms on resize to try and avoid performance issues. This is set here: https://github.com/kennethormandy/big-ideas-text/blob/master/src/big-ideas-text.js#L51 My plan was to allow users to set their own value per #3, which I can implement sooner rather than later if you really need it.

The inline styles approach shouldn’t interfere with adding your own styles…if you can give me a simple example that shows the issue you are having, I can take a look. I’m not sure I understand the context right now.

Glad you’re using the project, and thank you for the Glyphs plugins you’ve been releasing!

[guidoferreyra]

The page slow down the resize, but is not my major problem the page Im building Is a heavy. Don't worry about this.

In my code with a button I'm adding OT features. and when BI is triggered they are cleared. But here a reduced test case. I've inlined in the first line the color blue and you will see how the color is removed when BI is loaded.

testCase.zip

You are welcome, glad to hear that the plugins are useful for you. :)

[kennethormandy]

Thanks for the test case, it makes figuring things out way easier. You could either modify the OT features on a span inside the Big Ideas Text list items:

<ol id="first">
  <li><span style="color: blue">First</span></li>
  <li>Second</li>
  <li>This is the Third</li>
  <li>Fourth</li>
</ol>

Or just use classes instead, and toggle those with JS (In the case of OT features, I use this approach with Utility OpenType):

.blue {
  color: blue;
}

<ol id="first">
  <li class="blue">First</li>
  <li>Second</li>
  <li>This is the Third</li>
  <li>Fourth</li>
</ol>

Would either of those options work? Classes are preserved on bigIdeasText-lines, and inline styles will be preserved within them, just not on them.

[guidoferreyra]

Kenneth, I find that spanning all the lines in my case, could not be the best option. I'm building a tester. Once I tried to implement features with classes but with not success because one feature erase the other. With your approach I could use multiple features on the same line?

Edit.
I just figured out that I'm implementing a slider for leading and this style is inlined too. So I really need to avoid that Big Ideas erase the styles. When I was using Big Text I think I've edited a line to prevent the complete erase of style. and only erase font-size. Here the code. Maybe you can point me where to edit in your code.

     $line.css('font-size', '');
      wordSpacings.push(wordSpacing);
    }).css({'float' : ''});

Thanks again, really appreciate your help.

[kennethormandy]

I’m still testing if there are any side effects before I merge this into master, but the change in #5 should fix things for you I think.

Utility OpenType will allow you to add multiple classes for OpenType features at once, and I’ve made it support the widest range of browsers possible through the font-variant-* syntax, falling back to font-feature-settings. But you’re right the best browser support for chaining features is with a single font-feature-settings declaration.

I would still recommend applying inline styles to the parent element of BigIdeasText or a span within lines instead, to keep the lines clean, but I do think this change will do what you’re after.

If you’re using npm to install the package, you should be able to run:

npm install --save kennethormandy/big-ideas-text#ko-4

Otherwise, just try including this version of the file instead.

[guidoferreyra]

Hi again! Unfortunately the new version of the script produce an strange error that impede the click function on the element. For instance the content editable attribute is not working. I don't know how to describe better the issue for helping you.

[kennethormandy]

I have an older example of using Big Ideas Text and the content editable attribute on the moriston.losttype.com site. It’s open source, not open license, but feel free to follow that example if it’s helpful. I tried running the site with the updated version of Big Ideas Text I sent you and it didn’t cause any issues.

[guidoferreyra]

Thank you I will take a look to my code. Also the code you sent me is very helpful for me it teaches me a lot about how to write js. I suck on JS! Thanks

Regards!

[guidoferreyra]

Kenneth!! Yesterday I found what was happening with my page.
I didn't noticed that Big Ideas add float:left to the element so the elements was collapsing. I added a clearfix div and is clickable again.

Thanks for all your help, I think the last version you sent me can be merged safely to main branch :)

Regards