I have a logo with text that is in sans-serif but when I change locale(language) of the page to Chinese the text isn't the same as in English you can still read it as English and that's all good but it forces my text in the logo to look odd. My question is can I force just that part of the text to look just as it is in English and keep it the same throughout the whole site so it looks the same. Is there a piece of code that I can enforce on that particular text to keep it the same in English through css. It's like the text changes shape when locale changes for that language
.neon {
position: relative;
overflow: hidden;
filter: brightness(200%);
display: inline-block;
height: 35px;
#-moz-document url-prefix() {
filter: brightness(150%);
}
.text {
background-color: black;
color: white;
font-size: 35px;
font-weight: bold;
font-family: sans-serif;
line-height: 1;
text-transform: uppercase;
position: relative;
user-select: none;
&:before {
content: attr(data-text);
position: absolute;
color: white;
line-height: 1;
filter: blur(0.02em);
mix-blend-mode: difference;
}
}
<span class="neon">
<span class="text" data-text="MY LOGO">My LOGO</span>
<span class="gradient"></span>
<span class="spotlight"></span>
</span>
The after pseudo-element doesn't line up with the text after another locale has been implemented. So when I choose Chinese the text is off by a few pixels and the lettering is blurry so I think that the text is being affected by the locale for that font how do I work around it.
Related
Using HandlebarsJS
I have a blank area with with dynamic content rendered. When text is not reaching min-height the content must contain empty underlined blank rows.
I tried using a background image in css like follows:
.regimul-juridic {
/*background-color: red;*/
margin-top: -5px;
min-height: 100px;
position: relative;
background-position: fixed;
line-height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAABlBMVEUAAAAAAASiCn3WAAAAAXRSTlMAQObYZgAAAAtJREFUCNdjIAwaAACkAIHWnJmDAAAAAElFTkSuQmCC);
backdrop: static;
}
.regimul-juridic > p {
color: #000000;
font-weight: normal;
font-size: 9px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
but without success, because if there is more content on the area above the image will not expand properly. Does anyone have a solution ?
Picture showing what I am trying to achieve here:
For the underline you can use hr tags in the html
I looking for a way to make the input text background image to be printed when I save the page as PDF (right click, "Print ..." option, and "Save as PDF").
The page has an square background image to simulate that each character is being typed into a square.
That's a piece of code to show what I mean:
#text
{
background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");
width: 213px;
height: 18px;
background-size: 20px;
border: none;
font-family: monospace;
font-size: 13px;
padding-left: 5px;
letter-spacing: 12px;
}
Name: <input type="text" size="10" maxlength="10" id="text"/>
Any suggestion to simply "enable" that part to be printed, or any other solution that offers the same
flexibility of continusly typying, highliging and deleting the text, will be really appreciated.
You can do it using the 'color-adjust' CSS property and may specify different settings for '#media print' CSS at-rule while printing.
Following code is the simplest using only color-adjust respective -webkit-print-color-adjust:
#text {
background-image: url("http://3.bp.blogspot.com/-4oAWWCcNNz4/Tjr3nKNyVUI/AAAAAAAAPLU/Pouua-pNsEY/s1600/sq.gif");
width: 213px;
height: 18px;
background-size: 20px;
border: none;
font-family: monospace;
font-size: 13px;
padding-left: 5px;
letter-spacing: 12px;
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
Name: <input type="text" size="10" maxlength="10" id="text">
Tested on FireFox 85.
This answer was inspired by thread How can I force browsers to print background images in CSS? discussing cons and pros of background-image printing.
I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.
You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ
You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.
Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}
If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}
I'm having issues with fonts such as Josefin Sans where the space above, and below the text is uneven. This makes it impossible to vertical align the text.
Look at this http://jsfiddle.net/G5aVK/.
HTML
<div class="text">
Hello World
</div>
<div class="text2">
Hello World
</div>
CSS
.text{
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}
.text2{
font-family: serif;
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}
As you can see the normal serif font is aligned vertical center in the div. But the Josefin Sans one is not, it has more space above each letter than under.
Is there any way to fix this? Is there any way with CSS or maybe Javascript to change the height above, and below the font? If you try line-height you will see it does not fix the issue.
EDIT: A lot of suggestions seem to be quickfixes that would only solve exactly this font size, exactly this font and so on. I would need a solution that would work over different fonts and sizes, because the content in this case is generated by the users so I can't control what size or font they will be using.
So if talking pseudo-code, a solution that I would look for would be "font-vertical-align: middle" or something like that. But maybe the only way to fix this is by doing ugly pixel-specific fixes.
That space belongs to the characters themselves; Which means you have to edit the font via a Font editor application to align the characters vertically in their code point.
However, you can play with line-height and min-height properties to achieve the goal:
.text {
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
line-height: .95em; /* Reduce the line height */
min-height: 1.2em; /* Set a min-height to the container */
}
WORKING DEMO.
Try this,
.text{
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
height:36px; // add height
line-height:24px;// add line-height
}
Demo
The Reason why the font isn't aligning vertically is due to the font type (some font types can have their typography lines offset to most conventional fonts)
http://jsfiddle.net/denistsoi/28zx2/
I added the following css rule
.text {
padding-top: 8px;
}
Update
http://jsfiddle.net/denistsoi/28zx2/3/
Another way is to
HTML
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<div class="text">
<p class="content">Hello World</p>
</div>
<div class="text2">
Hello World
</div>
This way you can also adjust the vertical alignment with your margins~
CSS
.text > .content {
display: inline-block;
vertical-align: middle;
margin: 2px 0 -2px 0;
}
I have tried the following already:
html title="whatever" tag
onmouseover="javascript:alert('Whatever')
these both work fine, but i find the delay before the text box appears way to long for my purposes. what is one i can use the has a instant or close to instant reaction on the mouse over event?
<p><font color="black" title="大地(Daichi) ground/earth/the solid earth/the land">(大地) <font color="black" title="が(ga) indicates sentence subject / indicates possessive / but/however/still/and">(が) <font color="black" title="揺れ(Yure) vibration/flickering/jolting/tremor">(揺れ) <font color="black" title="始め(Hajime) beginning/start/outset/opening/ first / origin/ such as .../not to mention ...">(始め) <font color="black" title="、(、) Japanese comma">(、) <font color="black" title="警報(Keihou) alarm/warning">(警報) <font color="black" title="が(ga) indicates sentence subject / indicates possessive / but/however/still/and">(が) <font color="black" title="鳴り(Nari) ringing/sound">(鳴り </font>)(<font color="black" title="響い(Hibii) no dictionary result, likely a conjigated verb">響い</font>) <font color="black" title="た(ta) indicate past completed or action/ indicates light imperative">(た)</p>
Yes i know the delay is short, but for my purpose i consider it too long. Also that the mouse must be still for it to show also makes the delay seem longer. So basically i need an instant msg window, even if the mouse is in motion over the text.
Use CSS tooltips. Basically what you're going to do is push the title bit off the screen then bring it back on hover. There is no delay and it can be styled very nicely.
There is a very good example of how to do this here: http://sixrevisions.com/css/css-only-tooltips/
And an example using your first example here: http://jsfiddle.net/calder12/PBsJA/
As per SO standards I'll post the code here, but I am not taking credit for writing it, just relating it.
HTML:
<p><span class="tooltip">(大地)<span class="classic">大地(Daichi)
ground/earth/the solid earth/the land"</span></span></p>
CSS:
.tooltip {
border-bottom: 1px dotted #000000;
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }