Group Abstract Group Abstract

Message Boards Message Boards

CSS Selectors 3 for Symbolic XML

Kevin Daily, Wolfram Research
Posted 7 years ago
Attachments:
Selectors3.wl
POSTED BY: Kevin Daily
10 Replies
Sort By:

Congrats on publishing! I got the bonus workflow #1 in your slides to work but am having an issue with #2, I think it should just be CSSTargets[doc, "body"][[1]] (not [[1,1]]), if I change these lines in your presentation's last slide:

body = styleDataCell["Notebook", Notebook,  CSSTargets[doc, "body"][[1]]]
h3 = styleDataCell["question", Cell, CSSTargets[doc, "h3"][[1]]]
h1 = styleDataCell["h1", Cell, CSSTargets[doc, "h1"][[1]]]
li = styleDataCell["li", Cell, CSSTargets[doc, "li"][[1]]]
p = styleDataCell["p", Cell, CSSTargets[doc, "p"][[1]]]
h2 = styleDataCell["h2", Cell, CSSTargets[doc, "h2"][[1]]]

I get the output on the left (which doesn't look exactly right):

enter image description here
POSTED BY: Michael Sollami

My presentation notebook took parts from the tutorial page of the CSSTools package and is behind the state of the package. The "Bonus Workflow 2" slide is the same material found in the tutorial documentation, specifically the section "Making a Custom Stylesheet from CSS Data", but the tutorial is up to date.

I'm not saying that I can't improve the package, or that bugs aren't present, but there will almost always be slight differences between a web browser's rendering of HTML with the CSS data and the Wolfram Desktop's rendering of cells with an imported CSS stylesheet.

  1. web browsers like Chrome and Safari have default style sheets. If properties are not specified in the user-level CSS, then the defaults will inherit through to the rendered HTML in the browser. The imported CSS will not be able to pick up the browser's default stylesheet, and Wolfram Desktop has its own default styles that may differ from the browser's. Interestingly, in your example the "SmallCaps" font style is not picked up in your web browser's font, but it is in the notebook. That may be a font variation not available to the font family the browser is using.
  2. CSS styles are separate from HTML content. My example is rather contrived in that I created HTML and Notebook content to have the same top-down structure and wording. The example Notebook cells are already given style names like "h1" so the imported stylesheet can immediately apply. The point is that the styles have (supposedly) imported correctly, whether or not the Notebook content can be faithfully drawn to match the rendered HTML content. One such cheat is I put a newline in the notebook content after the section titles (in the boxed cells) because that matched Chrome's defaults. It looks like your browser was more faithful to the original HTML and does not have the newline.
POSTED BY: Kevin Daily

Ah, I posted before seeing your beautiful tutorial (somehow the paclet documentation didn't index until I restarted the front-end). All the examples in 'paclet:CSSTools/tutorial/CSSTools' work just fine!

Here's the output of your tutorial example (I'm using chrome), it only misses minor things: the FontFamily looks wrong for "h2", the small-caps of the text in "question" cells are missing, and the color of hyperlinks are a bit off...

enter image description here

Two follow-up questions:

  1. Are there any methods in CSSTools to better capture these missing pieces of typographic information?
  2. When it fails on some important property e.g. border-radius, how could I add support for that property? Thanks!
POSTED BY: Michael Sollami
Diego Zviovich
Diego Zviovich
Posted 6 years ago

Hi @Kevin Daily please keep us posteed when it is released.
POSTED BY: Diego Zviovich

CSSTools has been released!
POSTED BY: Kevin Daily

Hi Kevin, Nice post! Did you ever publish your CSSTools` package?
POSTED BY: Michael Sollami

The CSSTools package is soooo close to a solid first release. It makes this post almost obsolete since I've reworked the selector parsing to match the tokens from my CSS tokenizer, but that all should be hidden from the end-user. Slight name changes, though. In any case, I'm continuing to update the documentation for the CSSTools package with feedback from my colleagues. (Documentation never really feels complete, right?) Priorities are still the 12.1 release, but I'm going to push for it getting onto Wolfram's Github page after the release.
POSTED BY: Kevin Daily

enter image description here - Congratulations! This post is now a Staff Pick as distinguished by a badge on your profile! Thank you, keep it coming, and consider contributing your work to the The Notebook Archive!

POSTED BY: EDITORIAL BOARD
b3m2a1 ​ 
b3m2a1 ​ 
Posted 7 years ago

I like the package. Clean implementation too.

On a related note here are two other CSS selector methods, one using a real XML processing library in Java rather than any WL hacks: https://mathematica.stackexchange.com/a/183970/38205

This will be as robust as JLink is (i.e. very robust). It is object-oriented and so much, much nicer to work with than the standard Mathematica XML headaches.

And another one I wrote up that uses pure Graph methods to implement selectors in terms of a DFS: https://mathematica.stackexchange.com/a/184417/38205

This one still performs quite well, though, and for very complex queries is conceivably cleaner than a pure Cases/Positions method. Also it references a proper Graph and thus can also be object oriented and thus attribute and property lookup from nodes is nearly instantaneous.
POSTED BY: b3m2a1 ​ 
POSTED BY: Kevin Daily
Reply to this discussion
Community posts can be styled and formatted using the Markdown syntax.
Tag limit exceeded
Note: Only the first five people you tag will receive an email notification; the other tagged names will appear as links to their profiles.
Reply Preview
Attachments
Remove
or Discard