Card level CSS classes?

Card level CSS classes?

Postby Zephyr » Fri Apr 28, 2017 11:45 pm

Has anyone had any luck defining card level CSS styles using classes?

While inline styles work well, it's exceedingly tedious to define the styles in that manner for longer cards. I've toyed with it for a while, but I'm not able to make it work. Certainly, deck or app level style definitions would be far easier to manage, but per card-side style definitions would be a benefit for complex/long cards. I saw while searching the forums, a few posts where this was discussed, even hinted that it worked, but no luck in my testing so far.

I'm trying for something along the lines of the following, which would be the entered in the Text 1 column of the excel sheet:

Code: Select all
<!-- side 1: Test Card -->
<html>
<head>
   <style type="text/css">
      .text_center {text-align: center;}
      .red {color:red;}
   </style>
</head>
<body>
    <div class="text_center">
         CAUTION
    </div>
    <ul>
        <li class="red">This is some red text.</li>
   <li>This is some not red text</li>
    </ul>
</body>
</html>
Last edited by Zephyr on Sat Apr 29, 2017 8:48 am, edited 1 time in total.
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Zephyr » Sat Apr 29, 2017 12:25 am

Aha! Got it! Try enclosing your classes and element selectors in a `<style>` tag and follow with the contents of that side of the card enclosed in a `<body> tag, and it seems to work. You'll have to craft each side of every card in this manner, but it'll suit my purposes until/if/when deck level/app level code injection of style sheets is supported.

Even `@keyframes` and animations seem to work. [The blinking is for demo purposes, but is the real reason I started down this rabbit hole when I found out the old `<blink>` tag is no longer supported in any form]

Try is:
EDIT: Appears to work without the `<body>` tag as well.

Code: Select all
<!-- side 1: Test Card -->
<style>   .text_center {text-align: center;} .red {color:red;}   @keyframes blink{50% {opacity: 0.0;}} .blink { animation: blink 1s step-start 0s infinite; }
</style>
   <div class="text_center blink red">
   CAUTION
   </div>
   <ul>
      <li class="red">This is some red text.</li>
      <li>This is some not red text</li>
   </ul>
Last edited by Zephyr on Sat Apr 29, 2017 8:46 am, edited 1 time in total.
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Ernie » Sat Apr 29, 2017 1:45 am

Hi Zephyr,

Adding deck or side-level user-defined styles is something on my to-do list, but not a high priority item at the moment. Anything you type in a side will become part of the <body> tag, as I create my own headers and styles behind the scenes. I don't know HTML well enough to know how to answer your question, but it seems like you got it working by using a <style> block inside the existing <body>. Interesting.

Thanks for sharing your solution.

Ernie
Ernie
Site Admin
 
Posts: 4613
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Card level CSS classes?

Postby Zephyr » Sat Apr 29, 2017 10:20 am

Ernie,

Thanks for the info. While It's not common practice, it is allowed to place `<style>` tags inside the body of an HTML document, so that's why the above works.
NOTE: A style element should preferably be used in the head of the document. The use of style in the body of the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care.

http://w3c.github.io/html/document-metadata.html#the-style-element

At the risk of insulting your intelligence, I offer the following observations.

It seems that FCD is designed where each side of each card is a complete HTML page rendered by the in-app fully featured Safari/iOS browser, and you're defining app level styles already. You can define multiple CSS styles in the header, and the browser combines each rule in a parent-child relationship, and then applies them in sequential descending order with the last defined style for each element or class determining the way the browser actually displays that content.

So, you could on a deck or app level, create a place where the user can define styles (or anything else) and have that code "injected" as the last item in the header of each side of each card.

Code: Select all
<html>
<head>
   <!-- All current app/deck level stuff here -->
   <!-- User defined styles injected here as last item -->
   <style type="text/css"></style>
</head>
<body>
<!-- card content -->
</body>
</html>


You could even have that be a separately defined/imported document like pictures and audio work. This would make it tremendously easy to create (and modify) highly customizable cards. By leveraging the features of the full browser, you could, in theory, do anything on a card with styles which you could do in a full browser.

Aside, this is actually how I create my decks. I use a small code editing application called BBEdit which allows me to see the HTML and styles color coded, and a live preview of the card as I type. I then copy each side of the card into an excel sheet and import through dropbox. Multilayered, and a bit cumbersome, but it works, and has allowed the creation and mass reproduction of complex and highly styled cards.
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Ernie » Mon May 01, 2017 1:19 am

Zephyr,

Thanks for the info and details. Relatively few people need or want this level of control, which is why I haven't programmed such a feature, but when I'm ready to tackle this, your info will be helpful.

Ernie
Ernie
Site Admin
 
Posts: 4613
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Card level CSS classes?

Postby Zephyr » Mon May 01, 2017 11:17 pm

Ernie,

Thanks for considering the idea. I agree, most people don't need that much control. IMHO, one of the biggest strengths of the app is it's powerful customizations features which are well organized and easy to access if you choose.

On an additional note, when I tried to link to an outside stylesheet, it works!

Code: Select all
<!-- side 1-->
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/j5h48xrwzfwhfub/cardstyles.css?dl=1" />
<div class="red">Some Text for Side 1</div><br>


However, if your device doesn't have internet access, the style sheet doesn't load.

I wonder, though, if there's a place I could place a file which already exists, and the app browser could access in a relative fashion? Something, like this:

Code: Select all
<!-- side 1-->
<link rel="stylesheet" type="text/css" href="/Deck Media/cardstyles.css" />
<div class="red">Some Text for Side 1</div><br>


UPDATE: I tried to download the stylesheet as a picture or sound, but it's the wrong file type, so the app rejects that. The challenge I suppose is to get the sheet downloaded onto the device so it can be accessed in a relative manner while offline. Can you reference/hyperlink to card from in different deck?

UPDATE 2: When connecting to iTunes one can manually place a file the into the app. I guess to perform an import the question is what is the relative path to that location from within the app/browser when viewing a card?

UPDATE 3: It's the same folder where the Flashcards.sql file is stored. Might be something along the lines of "/Flashcards/Library/..." or "/Flashcards/Application Support/...", maybe?
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Zephyr » Tue May 02, 2017 3:52 pm

It appears it's possible to load resources which are stored locally on the device, as in the iTunes manual upload method, as long as the path from the WKWebView is (properly) defined. Not sure how you implement the card views...

See this for more:

http://stackoverflow.com/q/34597159/2084052

Regards,

Zephyr
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Ernie » Wed May 03, 2017 5:24 am

Below is the directory path on my iPhone:
/var/mobile/Containers/Data/Application/B2026230-9C33-4FBB-9AC4-467E619C82AB/Documents/

I have no idea if that long string is constant for all Flashcards Deluxe installations, or unique per user or device.
Unless that pass happens to be the same on your device, I can't think if a way for you to access a CSS file on your device with the current program.

Again, I've got all this on my to-do, but I'll need to get some other things done before getting to this.
Ernie
Site Admin
 
Posts: 4613
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Card level CSS classes?

Postby Zephyr » Wed May 03, 2017 7:32 am

Ernie,

Thanks for the info - I'll play around with that path. I think the long string is the unique id of the version of FCD installed on the device, so when the app version updates, that id updates and the path will change, and thus the need for relative paths. But the details are way beyond me; I'm not an app developer, just someone who likes programming.

I greatly appreciate your response and info. It's very interesting to me to experiment with apps push and the limits of what programs and technology can do. I've learned a lot about how iOS applications are built, and what goes into creating them just googling info about this topic.

I have come to believe that you may not need to do anything at all (or very little) to allow your users to use FCD in this manner. I"ll will try out that path and let you know if I can get it to work.

Regards,

Zephyr
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Zephyr » Fri May 05, 2017 1:11 pm

Ernie wrote:Below is the directory path on my iPhone:
/var/mobile/Containers/Data/Application/B2026230-9C33-4FBB-9AC4-467E619C82AB/Documents/

I have no idea if that long string is constant for all Flashcards Deluxe installations, or unique per user or device.
Unless that pass happens to be the same on your device, I can't think if a way for you to access a CSS file on your device with the current program.

Again, I've got all this on my to-do, but I'll need to get some other things done before getting to this.



Is the above from FCD version 4.9.3?
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Zephyr » Fri May 05, 2017 1:38 pm

Also, I noticed that if you long press a card theme, you can import one from Dropbox. This may be an ideal place to allow users to place their custom css styles. I tried a little to append my styles to the end of an exported theme, and then reimport, with no luck.

Regards,

Zephyr
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Ernie » Sat May 06, 2017 9:02 am

As for what version that ID was for, I don't know.

My thinking was that I'd import the style HTML in the deck import, as a header row. Something like:

* | name | My Deck
* | css | style html on a single line that would apply to all sides of the deck
Text 1 | Text 2
question | answer


What do you think about this solution?
Ernie
Site Admin
 
Posts: 4613
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Card level CSS classes?

Postby Zephyr » Sat May 06, 2017 10:54 am

That's absolutely the easiest! I imagine it would then apply any valid and properly formatted css enclosed by `<style>` tags?

Code: Select all
* | name | My Deck
* | css | <style>.justify { text-align: justify; }.red { color: red; }li { margin: .2em 0; }</style>
Text 1 | Text 2
question | answer
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Ernie » Sun May 07, 2017 5:59 am

Yes, I would expect a <style> section and I'd put that in the page header. Seems pretty easy on my end, but I still need to prioritize with other things. Feel free to ask me about it if say you don't hear anything on this for say 3 months.
Ernie
Site Admin
 
Posts: 4613
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Card level CSS classes?

Postby Zephyr » Tue Aug 01, 2017 9:07 am

Ernie,

Is this feature still in your plans? Any chance we'll see this feature in your next update soon?

Regards,

Zephyr
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Ernie » Tue Aug 01, 2017 6:52 pm

Hi Zephyr,

It's still on my list and something I want to eventually want to do, but it's not going to happen soon. I'm working on some things that I think will benefit more people. It likely is at least 6 months away.

Ernie
Ernie
Site Admin
 
Posts: 4613
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Re: Card level CSS classes?

Postby Zephyr » Fri May 29, 2020 4:31 pm

Hi Ernie - any chance card/deck level css is coming soon? I didn’t see anything in the recent release notes, and last mention on the forum was in mid 2019...
Zephyr
 
Posts: 23
Joined: Fri Jul 08, 2011 3:42 pm

Re: Card level CSS classes?

Postby Ernie » Mon Jun 01, 2020 4:24 am

Hi Zephyr. Still no progress on this. This is a low priority item for me so it likely won't happen anytime soon. Sorry about that.
Ernie
Site Admin
 
Posts: 4613
Joined: Fri Oct 01, 2010 6:12 pm
Location: San Francisco / Taiwan

Return to Comments, Questions and Feedback