I am working on a Wordpress website in which I need to use the musical "flat" symbol. To figure out what might be a good way to handle this, I checked out what is used on Wikipedia, in the corresponding article (https://en.wikipedia.org/wiki/Flat_(music)).
I know how to find the HTML entity code and use that, and I know I can just copy the symbol from somewhere else and just paste it directly into my post. But when doing that, there is extra padding around the symbol, so it displays incorrectly, like this: D ♭ . (It's actually not doing it here on SO, so I had to add spaces on each side to simulate it.) It looks like the problem is handled on Wikipedia by the following code, which appears everywhere the flat symbol is used:
<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span>
So I used the same code and I created a "music-symbol" class in the CSS file, in which I set padding to 0. I couldn't find the corresponding class on Wikipedia, but I guessed that that's what it contained. I honestly don't know why this works (I'm a noob) but it does seem to work, assuming I specify the font using the style tag as shown. When I say "it works", I mean that it makes the flat symbol appear right next to the note name, as it should, without extra space, like this: D♭.
However, when I view the same site on my Android, the spacing is still there. Can anyone explain why, and how I should address this?
Also, is there a better or more straightforward way of handling special symbols like the flat? I don't get why I was able to paste it in directly here on SO and have the spacing be correct without having to use the extra class reference and style tag.
As far as I can see within the styles on that particular site there is no additional styling for the music-symbol class. From what I can tell the additional white space is inherit to the element and font(s) being used. Padding will not be what you are looking to alter, you would be wanting to adjust the margin of the span element where the symbol is placed.
See class definition below for styling a span with the music-symbol class
span.music-symbol {
margin-left: -2px;
}
Related
I have seen a few websites that use the content attribute of a before/after pseudo element to set a picture as the content. The rule looks something like this:
:before {
content: "\e91b";
}
But then it is rendered as an image. I believe it is this setting because I can replace that escaped character with fooBar for instance and the image changes to that. And replacing the content will change it back. Changing the colour attribute changes the colour of the image so I'm guessing it is defined with some SVG data somewhere. These are obviously custom set characters because it will be set to the company's logo or other random things.
I'm honestly stumped on how this can be done and Google searching revealed nothing, though I'm not entirely sure what to search for. Everything I found referred to standard ISO characters that can be used in the escaped manner for easier typing/dev work.
Any help on this would be greatly appreciated.
It's called CSS pseudo elements, take a look at: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements.
When text inside of an tag is rendered with a preceding number, the number is sent to the back of the string, and its punctuation is rendered backwards.
HTML:
1. Step One
Renders as:
Step One .1
This might be weird to try and imagine, so I have included a link to the screenshot:
HTML, CSS, & Rendered result:
http://imgur.com/OOFd2tj
I'm at a bit of a loss for what could possibly cause this. My theory is that there is some CSS property being inherited from elsewhere. I have been slowly removing chunks of CSS in an effort to find the guilty party, but so far no luck. This renders 100% properly on other sections of the website that use different style sheets. I was not the original author of the style sheets, so it has been difficult to pin-point the possible source.
I would greatly appreciate if anyone has seen anything similar and might be able to point me in the direction of CSS properties that could possibly cause this, or if it's something else entirely.
Thank you #Tomalak, #briansol and #the_lotus for helping me track this one down.
There was a CSS property being inherited that was causing the text to render this way. Upon viewing inherited computed styles, I saw:
direction: rtl;
The correct property setting would be:
direction: ltr;
Thanks again for your help!
I am creating HTML pages with a base string and annotations on top of the base string's words and letters. Right now I'm using the ruby, rb and rt tags and I tried tables and divs too. It looks like this:
Source:
<body>
<ruby>
<rb>新</rb><rt>しん</rt>
<rb>Brasil</rb><rt>ブラジル</rt>
<rb>1</rb><rt>いち</rt>
etc.
My question is: Is there a way to rewrite the HTML, so the output looks roughly the same, but at the same time allow highlighting only the small characters shown in yellow, without having to select the big letters with them (so that the selection can be copied to the clipboard)?
Right now, and with the simple table cell methods I tried, you are forced to highlight big letters with the small.
The picture makes the association look totally random, but the tricky part is that the markup has to line up centered with the corresponding "big" letters.
<style>
.r { display: inline-block; text-align: center;}
.ra { display: block; font-size: 60%; }
</style>
<a class=r><span class=ra>しん</span>新</a>
<a class=r><span class=ra>ブラジル</span>Brasil</a>
<a class=r><span class=ra>いち</span>1</a>
On browsers that support ruby markup, the ruby annotations looks selectable and copyable to me. But on IE, when an annotation is selected, the distinctive background color used the browser extends down over the base texts as well, so it looks like you had selected both. If you do Ctrl+C and Ctrl+V then, you’ll see that only the annotation is copied. On Chrome, this problem does not exist: only the selected annotation is highlighted.
This could still be seen a problem. There is the perhaps more serious problem that Firefox does not support ruby markup.
The code I suggest above uses text-level markup with classes instead of ruby markup and styling that displays it in a ruby-like manner. I put the annotation before the annotated word, since then it is easy to place the annotation above the base text—without positioning, just by making the container element an inline block and the annotation a block inside it.
The markup is a bit messy, but this approach works widely across browsers. I suppose main problem is with display: inline-block, but it seems that in simple use like this, support exists even in old versions of IE (from IE 5.5).
For some reason elements are added to my html code and the text is rendered as italic.
http://109.72.95.174/astudio/sites/lancelmaat/performanceinstallation?tid=22(see bottom lines, or content of menu "Contact")
I'm using CKEditor in Drupal for the input of some text areas.
But it is strange, because the elements are added only for specific pages...
Also, I cannot see the elements in Safari Developer bar (I only see style: italic), but I think this is a smaller detail.
thanks
One of your nodes ("a live library") has on unclosed <em> in the message body, near the sentence that says "Voorjaar 1998 werd ik uitgenodigd doo..."
This is (accidentally) incorrect HTML, but different browsers react differently -- some add extra <em>s to straighten things out and italicize the rest of the page, some ignore the error, etc.
Diagnosis and Solutions:
This is happening because the node has HTML, and the maximum length in your display happens to break inside of an italic block for that node.
This is could be caused by one or more of the following. (Tough to tell witch without knowing how you set up the page, but all should be easy for you to check)
1) The node's HTML is incorrectly written. (Solution: fix the code so that all tags are correctly closed)
2) The "Preview" of the node is left to be determined automatically. If you're using Full HTML in a node, you should always set the teaser manually so you don't get orphaned tags in the preview.
3) In Views, you have the "Trim this field to a maximum length" checked. If so, you should also use the "Field can contain HTML" option, since this forces Drupal's built-in HTML corrector to run
4) You have another module that's doing something similar to the options described above. That module might have it's own HTML correction options, or you can use Drupal's built-in corrector (admin/settings/filters/%your-filter)
I wrote up a post in WordPress that included some code samples. I used the "preformatted" style for the code sample, which gives a nice monospace font and doesn't screw up multiple spaces, and everything looks great...
...except that it's tiny! The text of the code samples comes out at something ridiculously small, like 8 pt or something. The HTML isn't much help; it's only producing this text by wrapping it in a <pre> tag. So I figure the bad size setting has to be coming from my style sheet.
I don't know a thing about CSS, though, and trying to look through the style sheet isn't very helpful. Does anyone know how I can find what's causing the <pre> tag to generate tiny text and tweak it to make the text size larger?
There could be several different stylesheets in your Wordpress installation and you have to read them all, in order to find out what's causing the problem. You should search for a definition of "pre", but, given you don't know much about CSS, you may have to do several tests to find out which one you should alter.
I believe an easier way is to install a plugin for code snippets, such as this.
You should be able to add a style like so:
pre {
font-size: 12pt;
}
CSS allows you to apply styling to block-level items as well as classes and ID's.
In your CSS, put the following:
pre { font-size: 16px; }
Search for "pre" in the CSS files, there's probably a font-size value defined. You can change this to a larger value to increase the size. Here's an example styling pre tags.