CSS list-style: lower-alpha issue - html-lists

Standard lower-alpha produces:
a.
b.
c.
I need something like this:
a)
b)
c)
Any suggestions?

Something like this?
Added a bracket using ::before and then fiddled with margins to force it to the right place

Related

How to add a dashed underlined label on Graphviz?

I would like to have a dashed underlined label on Graphviz, like the image bellow:
A non-automatic solution is to write underlines manually:
partial_key_attribute [label = <<u>P</u>A<u>R</u>T<u>I</u>A<u>L</u> <u>K</u>E<u>Y</u><br/><u>A</u>T<u>T</u>R<u>I</u>B<u>U</u>T<u>E</u>>];
Although ugly, at least this works with most kinds of use cases, although some preprocessing might be needed to make this more convenient.
An answer would be to use Unicode: https://en.wikipedia.org/wiki/Macron_below but it wouldn't work with all fonts and is super bad for users to type and looks ugly too.

I get "EOS" error with stylus when compiling with grunt-contrib-stylus

I keep getting this weird error message when compiling. Very hard to debug.
(By the way: opacity in the example is a mixin)
But I'm stuck on
> 59| .red { opacity 0.4 }
expected "indent", got "eos"
I've tried
.red { opacity(0.4) }
.red { opacity(0.4); }
and nothing.
I've also found that you can get this error if you mix spaces and tabs. It's a strange error to get for this issue. Just make sure that you stick with one or the other.
I found this was caused by an erroneous curly brace left behind when conversing css or a mixin
myMixin(var = 1){ <--- nooooooo
color red
etc etc
Problem A
The issue is that for some syntax reasons, stylus doesn't permit mixins alone in a selector
The solution(s)
is to use multi line
.red {
opacity(0.4);
}
add a bogus property (make sure it doesn't affect your styling)
.red { opacity(0.4); zoom:1; }
Problem B
Another issue was with reset styles, being without a new line between them.
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none} ...
The solution
To put each of the style on individual lines:
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
...
Very very weird issues and even weirder solution :P
Hope that this save some of your time (because I've wasted a lot of mine on this :( ).
I just had the same problem. As it turns out, this problem can also be caused if you have two consecutive, adjacent hashes when defining a color:
color #FFF <- good
color ##FFF <- easy to miss, will cause very unhelpful 'eos' message at file end
I had this issue and (after about 30 min) realized it was an extra opening brace that my IDE put in - clearly I should have been watching more carefully! I would suggest looking at all your git (or what have you) changes very carefully and be sure you have no double opening braces:
.class-name-of-greatness {
{
color: blue;
border: gold
}
For all the Vi(m) users: Can also be triggered by
$width--s = 24rem:wq
(last 3 chars)

Compass Sprite Layout

How do I pass layout into my sprites calling them like this?
$sprite-global : sprite-map(
"sprites/global/*.png",
$sprite-global-layout: smart
);
That $sprite-global-layout: smart is completely ignored.
According to documentation, it should be applied like this:
$sprite-global-layout: smart;
$sprite-global: sprite-map("sprites/global/*.png");
So, apparently the directory doesn't get appended to the name for the layout variable, so this does in fact work:
$global-layout: smart;
#import "sprites/global/*.png";
Also, there might be issues using sprite maps instead of the #import to set them up; see https://github.com/chriseppstein/compass/issues/1024
I was able to get this to work by inserting them as variables:
$sprites: sprite-map("sprites/*.png", $layout: vertical, $spacing:20px);

deciphering a sass mixin

familiarizing myself with a code base for an in-progress project that I will be joining soon. I came across this mixin being used frequently and I have a couple of questions.
1. is this a fairly standard practice or css idiom and I am just unfamiliar with it?
2. Looks like it's adding an empty space after the pseudo element for the clearfix, but why insert one :before also?
#mixin container
&:before, &:after
content: ""
display: table
&:after
clear: both
*zoom: 1
Obviously I could just wait and ask the team when I join up but I want to know now dangit! Also, if it's an idiom I should be familiar with, maybe I have some googling to do before then lol.
Thanks everyone!
You're looking at the "micro clearfix" by Nicolas Gallagher (see: http://nicolasgallagher.com/micro-clearfix-hack/). The explanation behind the :before is as follows:
This “micro clearfix” generates pseudo-elements and sets their display
to table. This creates an anonymous table-cell and a new block
formatting context that means the :before pseudo-element prevents
top-margin collapse. The :after pseudo-element is used to clear the
floats. As a result, there is no need to hide any generated content
and the total amount of code needed is reduced.
Including the :before selector is not necessary to clear the floats,
but it prevents top-margins from collapsing in modern browsers.

Numbered :math: equations in reStructuredText

How can I make an equation in restructured text, that is followed by an equation number:
p = f(x) (1)
.. math::
p = f(x)
would only lead to:
p = f(x)
Looking at this a few years later, it appears that the number is still not automatically placed on the right of the equations. I'd therefore like to supplement the accepted answer a bit.
First you add a label to the equation in the rst file:
.. math::
:label: pfx
p = f(x)
This will generate a <span> of class eqno containing the number and link to the equation. To make it show up as you would expect an equation number to show up, you need to add a style to override the default behavior of that class.
I usually do this by adding custom.css to the _static/css folder under my doc root:
.math {
text-align: left;
}
.eqno {
float: right;
}
The math class labels the <div> containing the whole equation. Without the text-align: left; style, all your equations would be centered, making it totally reasonable to number them on the left.
Now you need to register the CSS file in conf.py. I've added the following basic hook:
def setup(app):
app.add_stylesheet('css/custom.css')
Relative paths are resolved from the _static folder. You can add globbing to pick up all the files in the folder at once, but this should suffice.
The reason that #EngineeredBrain's comment reports a number on the previous line is that their equations are too long and don't fit on the same line. I'm sure there is a way to style them to fit no matter what, but I won't even attempt to go into that here.
This will only work in sphinx (not rST), and only with HTML output as far as I'm aware. I'll try with latexpdf one day and update.
.. math:: p=f(x)
:label: eq:pfx

Resources