When we change an icon foundry, it causes a minor snafu in that a lot of code needs to be revisited because icon names change. Some automated translation might be possible using text utils, but not when icon names are generated in a structured way (e.g., i-star-filled v/s i-star-empty based on a boolean).
What I want instead is to use functional names for my icons (such as xyz-search, xyz-cancel, xyz-filterable, etc.) and then map them to the actual icon name provided by the foundry. For example, glyphicon names might be different from those used by font awesome. How can I provide some kind of indirection (the same kind of liberation that HTML tags strong and em provide)?
Our first thought was to use a lookup table in javascript to translate from one namespace into another. But that works only when the HTML is being generated (we use angularjs); not helpful for static code, nor in those few cases where the icon name is generated computationally, as in the example in the first para.
So now we are toying with SASS (I have googled a fair bit but all in vain, nor is my CSS very shiny). Is there a SASS idiom that fits here, to translate something like
<i class="xyz-filterable ...">
to
<i class="i-funnel ...">
for the same visual and interaction outcome. (I understand the actual CSS will look quite different)
I do not want to use any foo.addClass().
Thanks
Use #extend:
Sass:
.xyz-filterable {
background-image: url(foo.png);
}
.i-funnel {
#extend .xyz-filterable;
}
Compiled CSS:
.xyz-filterable, .i-funnel {
background-image: url(foo.png);
}
Related
New to this, bare with me please.
I've started having fun with HTML code doing offline documents. I just found out that I could easily change my font, in the head, by adding this:
<style type=text/css>
mkf { font-family:'Courier'; color:red; }
</style>
Then, as I go to add code to , every time I want to change the font of a select group of word with the addition of the color red, I just need to type
<mkf>words here</mkf>
Wonderful! It saves me so much time. But then I got to wonder, what if I wanted to add a link to a word. For example, instead of typing all of this out:
<mkf>Example1</mkf>
I would simply be able to parse whatever text I inputted between, let's say,
<linkandfont>Example1</linkandfont>,
which would basically create a link to the file "to_do_list.pdf".
I've tried to find a name or term for this so that I can study and learn more, but I have not found it yet.
Thank you.
Why are you not using classes instead? These achieve the same thing. For example;
<style>
.mkf {
font-family:'Courier';
color:red;
}
</style>
<div class="mkf">test</div>
However, to properly answer your question, what you want is ABSOLUTELY possible in HTML5 and CSS3. And I've used such methods in certain projects of mine (just know this isn't entirely Kocher or conventional).
mkf {
font-family:'Courier';
color:red;
}
<mkf>this is working</mkf>
As for making <linkToSomething>Click Here</linkToSomething> not as easy. You would definitely need JavaScript etc to handle all that. You won't achieve it in CSS and HTML alone.
You cannot. Only way to create a link in HTML is by typing description. You could also shorten by using JavaScript but that's not HTML.
The way you changed the color in head is part of styling or CSS, so you could give a class to a tag like <a class='redlink' href='.. and define that class in head like you did with mkf : .redlink {color:red} or if you want all your links to be red then you could give color to a in head style: a {color:red;}
By typing <mkf> in body I guess you created custom tag which is not part of standard HTML tags, more proper way would be using class to a standard tag like div or p.
Markdown support code blocks that are very useful. By specifying which language we want (like this ```cpp), we can have color syntax highlighting automatically too. Example shown below.
#include <iostream>
int main(){
printf("hello");
}
So, my question is how do I do this on an html file?
I already know you can make code blocks, with this -> <pre><code> write here </code></pre>, but I want the syntax highlighting function.
Any guidance would be appreciated. Thanks.
You would want to use a library like highlight.js
Otherwise you would have to wrap every key word, variable, function name, operators, etc. in their own span tag and apply classes, creating a color schema for every distinct thing in every supported language.
Other than using a library (or creating your own, for fun) this is rather tedious.
FYI: Ever thought about right-click and inspect element of your example? Your example results in this HTML:
<pre class="lang-cpp s-code-block hljs"><code><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string"><iostream></span></span>
<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span>{
<span class="hljs-built_in">printf</span>(<span class="hljs-string">"hello"</span>);
}
</code></pre>
As you can see this would be pretty tedious to create yourself, so use a library for that.
I use AE Templates in Wordpress to create templates which are used around the website, so I don't have to change every occurrence of a single template every time I need to update some information. In my case I have tens of these templates which are exactly the same apart from some text and an image, so they all have exactly the same CSS except for some unique identifiers in classes.
Here's an example:
.elementor-3464 .elementor-element.elementor-element-380443b9 > .elementor-element-populated{
some-rules;
}
This is a line of CSS which is the same for all templates, except 3464 and 380443b9 change from template to template.
It seems a waste of code to me to load all CSS files for every web page with multiple templates with the same CSS. Is there a way I can target all templates by rewriting the above line to be arbitrary for any ID number/sequence (3464 and 380443b9)?
I was hoping I could use the [class*=...] selector but it doesn't work.
I tried this as a replacement for the above example:
[class^="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}
The [class^="elementor-"] will only work if the class list begins with "elementor-". If there is another class before it, e.g. class="elementor elementor-1234" then it will not work.
You might need to use:
[class*="elementor-"] [class*="elementor-element-"] > .elementor-element-populated{
some-rules;
}
I managed to add HTML (text only) to a Word-document following this post Add HTML String to OpenXML, using an already existing Word-file.
Unfortunately, I can't find any solution to use style from this Word-template for my newly added text. It is always "Times New Roman" size 12px although the standard style of the used template is "Arial" size 9px.
So fare I tried:
Using the ParagraphProperties as I would do for not HTML texts.
Paragraph para = body.AppendChild(new Paragraph());
Run run = para.AppendChild(new Run());
run.AppendChild(altChunk);
para.ParagraphProperties = new ParagraphProperties(new ParagraphStyleId() { Val = "berschrift2" });
Turnig MatchSource off
AltChunkProperties altChunkProperties = new AltChunkProperties();
altChunkProperties.MatchSource = new MatchSource() { Val = new OnOffValue(false) };
altChunk.AppendChild<AltChunkProperties>(altChunkProperties);
Any suggestions?
EDIT:
I found a workaround, which isn´t really a solution for my question, but works for me. I'm no longer trying to use the style from word, but adding the styles to my html before using altchunk.
Some explanation: if you look at the definition of altChunk in ISO 29500-1 17.17.2.1 and specifically in the A.1 section, the schema shows that altChunk is a EG_BlockLevelElts element and this is a peer with paragraphs (i.e. ). It is technically not correct to add as a child to run elements or even paragraph. It should be added at the body level. The fact that Word doesn't complain when adding as a run or paragraph child is unintentional and shouldn't be relied on.
As a result, what Word is doing is using the default style property for fonts to format this new content. You can try this by changing the document defaults in the styles.xml part. With match source property set to false, there isn't a way to specify the font besides document defaults.
Having said that, I think that Thomas' alternative is a better way to go.
The real solution for your question is to transform HTML into Open XML markup "yourself" rather than relying on the alternative format import parts in conjunction with w:altChunk elements. This creates a dependency on how Microsoft Word handles the import, often with little control on your side.
How do you transform HTML (or XML in general) to Open XML markup? The best way is to write so-called recursive pure functional transformations, which translate HTML elements and attributes to Open XML elements and attributes. If you have really simple HTML documents, that is not a big task. However, doing this for "arbitrary" HTML and CSS is quite a feat.
The good news is that the Open-XML-PowerTools, an Open Source library, contain functionality to transform HTML to Open XML and vice versa. Thus, I'd recommend you have a look at that library.
What worked for me and for my situation (if you don't want to go down the rather complex openxml powertools html converter root) is to add a HTML style attribute to the body section of your HTML fragment as follows:
Encoding.UTF8.GetBytes(
#$"<html><head><title></title></head><body style=""font-family: Calibri"">{ConvertUnconventionalUnicodeCharsToAscii(htmlAsString)}</body></html>");
It might be possible to dynamically derive the font family of the "normal" style embedded into the document you are updating and insert that name into the style attribute if deemed compatible.
That way, if you decide to change the base/ normal font the style of the HTML import will attempt to utilise the same font family.
Sorry if a bit off topic, I also could not get alternativeFormatImportPart.FeedData() to process "’" (code 8217) UTF-16 characters and so had to specifically replace them with "'" (code 39) in order to avoid them from being rendered as the following sequence ’
I am working on a website consists of four languages (Arabic, English, French and Spanish), (Arabic is a right-to-left language for people who don't know that).
Basically left-to-right (en, es and fr) sites will have the same layout/CSS.
in order to handle different arabic styles I am wondering between two methods:
1. specific language/direction class:
adding the following classes to html tag, and using one simple file to handle that
arabic <html class="ar rtl" dir="rtl">
english <html class="en ltr">
french <html class="fr ltr">
spanish <html class="sp ltr">
2. using separate files:
in this case I would use lets say a common.css file for all common things, and load a separate specific language/direction file (something like arabic.css or western.css)
What do you think the best option will be ?
Thanks
Option #2 sounds like the more manageable solution. This way you can simply load the appropriate style sheet based on the language chosen. Since it sound like the text in your webpage updates based on the language selected (ie it is not physically written out twice) two separate style sheets will allow you to modify the layout without messing with the content in the html markup. So more information on how the languages are going to be switch might help you to get better answers.
I am not really sure why you need specific classes for Arabic texts. OK, you might want to modify fonts (as in font-family or font-size) but not much more than that. To switch directionality, you should use dir attribute (that is W3C recommendation).
As for styling elements, if you really need to modify styles for each element, you might want to use universal selector:
* { font-family: Verdana; }
For elements in given language (if you remember to use lang attribute), you can also use universal selector in conjunction with lang pseudo-selector (beware that some web browsers does not seem to support it, although it should be supported since CSS2):
*:lang(ar) { font-size: 14px; }