I'm trying to output media control characters as HTML entities so they can be styled using the CSS color property for multiple themes. As usual nay-sayers dominate the mailing lists so we have thousands of useless Unicode characters but not universally recognized media control characters (apparently).
Here are the HTML entities I've attempted to output in Firefox and Chrome unsuccessfully...
<span>⏸ - ⏸</span>
<span>⏹ - ⏹</span>
<span>⏴ - ⏴</span>
<span>⏵ - ⏵</span>
<span>⏭ - ⏭</span>
<span>⏮ - ⏮</span>
I serve all pages as UTF-8 and have tried messing with a few font-family fonts such as Segoe though I'm trying to find truly free-to-use fonts (ttf/woff) should I go that route.
The general gist...
A small image of what I've used in the past that I'm trying to emulate...
<|| Prevous Track: empty (non-filled) left facing triangle with single empty bar on right.
|> PLAY: Empty right-facing triangle.
[][] Pause: Two vertically long empty rectangles.
[ ] Stop: Empty square.
||> Next Track: [empty (non-filled) right-facing triangle with single empty bar on right.
I've done a lot of research trying to get Unicode characters to keep this as simple as possible...
fileformat.info/info/unicode/char/23ee
fileformat.info/info/unicode/char/23f5
fileformat.info/info/unicode/char/23f8
fileformat.info/info/unicode/char/23f9
fileformat.info/info/unicode/char/23ef
...though I'm willing to use Canvas/SVG to draw the images if there is no reliable Unicode characters/font combinations I can use?
Preferably
How do I insert Unicode characters (with which specific cross-platform or ttf/woff fonts if necessary) of the media keys?
Alternatively
What would be the minimal code I'd need for Canvas/SVG to draw the characters and then style them with CSS color property?
Tertiary Preference
How could I create a ttf/woff font with the specific characters I want using open source or freeware software (on Windows)? If I go this route I'll happily make the font available on some third-party font site with directions.
After a bit of research someone suggested using Awesome Font which has media characters. I don't like using CSS content except for certain rare development related conditions so I used the HTML Escape tool copy/paste characters to get their numeric entities. Tested in IE 11, Firefox 31, Opera 12.1, Chrome 37 and on Firefox/Chrome on Android 4.1.
CSS
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
p {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
HTML
<p>
</p>
Related
My word document has some text that has a particular font applied, ex. Arial and is bolded
When I paste into TinyMCE, I get that value in a span:
<p><strong><span style="font-family: 'Arial'>Hello World</span>/strong>/</p>
How do I detect that this line of text has both Bold and Arial applied so that I can convert it to use a custom tag called BoldArial:
<p><BoldArial>Hello World</BoldArial></p>
I would like to apply styling to BoldArial in my custom stylesheet that I have included with TinyMCE upon initializing it, ex:
p.BoldArial {
font-size: 11px;
font-family: Arial;
font-weight: bold;
}
How can I use the paste plugin to convert MSWord Styles to custom CSS?
You can't do that with a simple paste.
You could code the html in Word and paste as text into the Text Tab of TinyMCE.
So in Word you would have your paragraph already coded:
<p><BoldArial>Hello World</BoldArial></p>
To add the html, you could use search/replace to get 90% of the way there.
Instructions
Cntrl+H to open 'Find and Replace
Use Wildcards
Find what:
?*^13
Replace with:
<p class = "BoldArial">^&</p>
For 'Find', set 'Font' to 'Bold'
You will need to cleanup the newline/return manually. See pic.
I'm trying to make a SASS mixin that lets me specify the mixin call and the Unicode number only. This case is for list items where the icon would show up before the item.
My SASS mixin looks like this. I added both font-family options to include everything. If this isn't a good idea, maybe I'll do an if statement or something:
=faIconBefore($unicode)
display: inline-block
content: "\$unicode"
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
font-size: 0.9em
font-style: normal
font-weight: 900
font-variant: normal
color: $colorPrime
text-rendering: auto
-webkit-font-smoothing: antialiased
margin-right: 0.25em
This can be used in code for a download icon like this:
+faIconBefore('f019')
I've also tried using this in the content line:
content: "\#{$unicode}"
Ideally, this would just add the icon I wanted, however instead I get $unicode item.pdf in my result.
It works fine when hard code the Unicode number into the SASS file, but I can't seem to get this part to work.
UPDATE:
I tried to put together a fiddle, but it wasn't working at all with the font.
Well it looks like that just doesn't work. Maybe using the #extend command, but changing the content style in the mixin to remove the single quotes and slash ('\') and adding the slash to the Unicode number in the stylesheet seemed to fix it. Here's my new code:
// Adding a Font Awesome icon before an element, specifying the unicode number - Usage: +faIconBefore('\f019')
=faIconBefore($unicode)
display: inline-block
content: $unicode
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"
font-size: 0.9em
font-style: normal
font-weight: 900
font-variant: normal
color: $colorPrime
text-rendering: auto
-webkit-font-smoothing: antialiased
margin-right: 0.25em
And the usage:
+faIconBefore('\f019')
If anyone knows of how it could use some refinement, let me know.
Thanks
Hello Dears Stack Overflow, Great site, I have been able to solve many questions with your guidance.
Issue:
Working with a php website script I be having issues when atempt to submit a form to database whit a field DESCRIPTION (mediumblob) that usually look as ie.:
<div align="center"><span style="color: rgb(0, 0, 205); font-family: Verdana; font-size: 18pt;">Lamps Osram H7 Halogen.</span></div><div align="center"><span style="color: rgb(0, 0, 205); font-family: Verdana; font-size: 18pt;">12 Volts - 55 Wats.</span></div>
The form have your enctype="multipart/form-data" and the html is edited with InnovaStudio WYSIWYG editor.
When I use Mozilla, Chrome, Ie explorer 11, the form is submitted, and the values stored in database, but when I use IE Edge (windows 10) the proccess abort and display a white screen with the number simbol (#). Removing the color format (ie: color: rgb(0, 0, 205);) the form is submitted, and the values stored in database.
I execute a php mysql error tester script and no query error is present.
Once again I try in IE Edge with another editor that send color as name colors (red, green, yellow, etc.) and the form is submitted, and the values stored in database.
I can only conclude the problem is due to the rgb colors.
Do you have any suggestions or possible solution? Thank you very much.
Thank you for your cooperation.
No error is showed at page code when appear the white screen with #.
I have tried to replace the color names with the rgb codes, but these are sent in hexadecimal format, and the form submitted without errors.
I have used for the test the rich content editor developed by Mozilla.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
I do not know if the format that is sent is inherent to the Agents or comes from the java part of the editors.
I have not been able to find, either in the original editor (InnovaStudio), or the proofs test editor(Mozilla rich content), code for replacement of the color system, only arrays of hex or name colors.
Another curious circumstance with the original editor, is that once the html has been saved in the database without color format, then there are no problems to modify it to text with color in IE Edge and the inserted colors are rgb.
I will continue to do some tests, and if I find any definition of the problem, I will publish it.
Thanks again.
The vertical column that contains the code line number is VSC is too wide. Is there a way to narrow it down?
You can't change the size of this column.
Actually there are three columns:
left of the linenumber is the column called glyphMargin, the place to set debugging breakpoints (red dot). (When you edit settings, the column displays a pen when you point on the line as seen in the screenshots below)
the line number itself
right of it you can fold/unfold your code.
If all three are active, it looks like this (settings) or a like above (code)
To save space you can
switch off the display of line numbers:
"editor.lineNumbers": "off"
switch off the code folding feature:
"editor.folding": false
if you don't use the debugger, disable the glyphMargin:
"editor.glyphMargin": false
This is probably not what you want, but if you don't use code folding or the debugger or don't need linenumbers, you can at least save a little bit of space.
To change these settings press ctrl, or click on the menu file/preferences/settings.
Actually, there is an undocumented setting in Visual Studio Code that will do exactly what you want. It's called "editor.lineDecorationsWidth", and although you will get some kind of warning Unknown setting parameters or underline squiggly, it WILL work.
This is the config for minimum possible space taken by line numbers (and keeping said line numbers, of course):
"editor.lineDecorationsWidth": 0,
"editor.glyphMargin": false,
"editor.folding": false,
source: https://github.com/Microsoft/vscode/issues/48791
[EDIT MAY 2020]
The name of the undocumented setting has apparently been changed to editor.lineDecorationsWidth
If you use the CustomizeUI plugin, you can edit the CSS to modify the width as follows... However, I notice one issue is that the click area of the folding arrows becomes a little misaligned (still usable, just a few pixels off). I'm not entirely sure how to fix it (didn't look hard enough possibly).
Here's some CSS for minifying the line number margin widths:
"customizeUI.stylesheet": {
// Change width/appearance of line-number, breakpoints, code-folding arrows:
".monaco-editor .margin": "background: #111; width: 55px !important;",
".monaco-editor .glyph-margin": "width: 0px !important;",
".monaco-editor .margin-view-overlays": "width: 55px !important;",
".monaco-editor .margin-view-overlays .cgmr": "width: 0px !important; display: none;", // hide breakpoints (I don't use them) (not necessary if editor.glyphMargin = false)
".monaco-editor .cldr.codicon.codicon-folding-expanded, .monaco-editor .cldr.codicon.codicon-folding-collapsed": "left: 22px !important; width: 30px !important;",
".monaco-scrollable-element.editor-scrollable": "left: 50px !important;",
".monaco-editor .margin-view-overlays .line-numbers": "left: 3px !important;"
}
If you create a font specifically for it I suspect that either filling the font bounds more and then setting it as the pref font, then adjusting zoom in/out. Depending on the graphics output preprocessing sometimes that scales the display that vsCode is rendering from its software. If it is in fact the case that maybe you're zoomed in too much to a small font, it might look different for you than anyone else. It may help to change try installing vscode in a vm to see if defaults look the same. Maybe it's a setting or extension causing a graphical artifact on your machine.
[Just in case people get here searching for how to change the glyph margin I'll note this coming "feature".]
A setting is being added to expand! the glyphMargin - that portion to the left of the line numbers where the breakpoint dots go for instance.
glyphMarginRightPadding
It is in v1.61 Insiders now and should be released to Stable early October 2021. But the default value 0 is the current width - you can only expand it with positive numbers unfortunately.
I'm converting some documentation from HTML to github-flavored markdown. I have lots of reddish/pink warning boxes in the old documentation.
e.g.
div.warnbox { background-color:#fcc; border-left: 3px solid #f00; }
~~~~~~
<div class="warnbox">
If you pass null as a parameter the world will end.
</div>
Is there any way to do something similar in (github) markdown? So far I've been using quote boxes which don't come in assertive red:
> If you pass null as a parameter the world will end
I also saw an interesting solution where someone suggested using diff syntax code blocks:
```diff
- If you pass null as a parameter the world will end
```
But that has multiple problems (gray outline, fixed width font, '-' at the beginning of the line, etc)
Is there any way (even if hacky like the diff thing) to do this?
Changing colour is not possible at this time.
If you want to create info or warning boxes, you can do so as of May 2022.
You can use the accessible note or warning blockquote in Markdown
Input:
> **Note**
> This is a note
> **Warning**
> This is a warning
Output Image:
https://github.com/github-community/community/discussions/16925
You can create color text or background in a GitHub markdown file by using diff, to create red and green colors, as in the example:
+ Green Text
- Red Text
Where GitHub markdown file does not support color, even though HTML.