Search in Stack Overflow helped me to get an answer for aligning poetry justified for all and the last line. with the following CSS code, it works perfectly aligning the last glyph. Those who may not know, single and double vertical lines at the end of the line in Sanskrit is equivalent to full stop in English. In Sanskrit poetry, the single and double lines (full stops) also signify how they are recited and therefore alignment of these is very crucial for a reader.
This is the CSS code that helps me to align the Sanskrit poetry lines. (Using Divi Code modules).
.et_pb_code {
font-family: Sanskrit;
text-align: justify;
font-size: 20px;
color: #3C268C;
font-weight: bold;
padding-bottom: 0.1em;
max-width: 100%;
}
.et_pb_code:after {
content: '';
display: inline-block;
width: 100%;
padding-bottom: 1px;
}
Here is the example of the poetry in Sanskrit and giving the reference in small sized but different font.
The question is: How do I align the last reference line to the poetry to the right side of the poem and not to the far right of the page as shown by the first image?
I would be very pleased if there is a way through CSS to right align the reference where the poetry lines end.
I hope to achieve the results as per the picture link but haven't been able to do so.
Note: I formatted the desired outcome (second picture) in Word 2016 using textbox to right align the reference line. I, then, tried to export as filtered HTML to see how Word would handle this. But it saved the text box as image and that is not what I want. There must be some CSS solution that I am looking for tips.
Related
I have a consistent issue using the jupyter-themes package for Jupyter notebooks, in which the input cell cuts off several pixels from the right margin. I have tried manipulating the cell width (-cellw) and the padding/border of the cell using Page Inspect to no avail. Here is a screenshot with the issue highlighted by the red box:
Jupyter Margin Issue
Any help would be appreciated. Thanks.
editing custom.css file in .jupyter/custom/custom.css helped me.
In div.CodeMirror-lines, set the padding-left parameter to smaller value or zero.
div.CodeMirror-lines {
padding-bottom: .9em;
padding-left: 0;
padding-right: .5em;
padding-top: .7em;
}
I found this solution here.
Just started posting stories and essays online and I've found a couple sites that have very basic text editors that don't allow a lot of basic formatting unless you apply a CSS Workskin. After searching through the topics here I found some useful Code but ran into some problems. What I want to know is if there's a way to set Center Aligned text to ignore Indentation without setting it to a specific Class?
#workskin p {
text-indent: 45px;
}
I have the above set to indent the first line of every paragraph but it also indents everything that's centered which skews it off-center. I hope there's some adjustment to the above code that forces it to ignore center aligned text.
#workskin p.chapter {
text-align:center;
text-indent:0;
}
I learned how to set a Class as above to correct this but some of the postings I'll be making will require hundreds or thousands of center-aligned lines so I'm really hoping I can do it with some Code rather than having to manually set them to a Class. Thanks for any help you can give!
EDIT: To specify what I'm asking for, I want to force all center aligned text to have 0 indent so I don't have to manually insert:
<p class="chapter">
Thousands of times.
Paragraph --- want Indent
Paragraph --- want Indent
Centered text/divider/chapter title/ect... ---- do NOT want Indent
Paragraph --- want Indent
Centered text/divider/chapter title/ect... ---- do NOT want Indent
pattern continues randomly
The first style has a more specific selector than p.chapter so the text indent remains at 45px. You also need:
#workskin p.chapter {
text-align:center;
text-indent:0;
}
Just do something like:
#workskin p.chapter {
display: block;
text-align:center;
text-indent:0!important;
/* "!imporatnt" ensures that it overrides
previous indent property set, if the value 0
and specification doesn't solve the problem */
}
To indent just the first paragraph do something like below, none of the other paragraphs will not indent.
#workskin p:first-of-type { /* Targets just the first paragraph */
text-indent: 45px;
}
This is my website's main menu:
As you you'll notice, the text inside main menu's items isn't wrapping. I've tried many solutions suggested but nothing seems to affect these items. Here's the css code:
#pt_custommenu .parentMenu a{
width: 100px; height: 59px;
line-height: normal;
padding-top: 0; padding-bottom:0;
float:left;
display: inline-block;
position: relative;
text-transform: none;
word-wrap: normal;
white-space: normal !important;
}
I'd like to make text break into two lines, like it would normally do, since the <a> element has a standard width and height.
Any suggestions?
Remove
This code inserts a space without wrap. Normal spaces don't do that.
You can retrieve more info about here:
http://www.sightspecific.com/~mosh/www_faq/nbsp.html
EDIT: I'm going to copy the relevant info in case this link someday dissappears:
is the entity used to represent a non-breaking space. It is
essentially a standard space, the primary difference being that a
browser should not break (or wrap) a line of text at the point that
this occupies.
Many WYSIWYG HTML editors insert these entities in an effort to
control the layout of the HTML document. For example, such an editor
may use a series of non-breaking spaces to indent a paragraph like
this:
<p>
This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>
[...]
There are some times when it is "acceptable" or "advisable" to use the
entity so long as the consequences are understood:
Its intended use of creating a space between words or elements that
should not be broken. The only problems that can be associated with
this use is that too many words strung together with non-breaking
spaces may require some graphical browsers to show horizontal
scrollbars or cause them to display the text overlapping table
borders.
You want text to be broken so use following:
word-wrap: break-word;
I checked again and saw you didn't use any spaces, thats why it can't. Replace with normal space character. Otherwise browser will read it as a block without spaces.
e.g. I have such CSS code to edit on the fly:
nav {
margin: 100px auto;
text-align: center;
}
It seems that the ONLY way to edit it through firefox's inspect element is the high light the part and overwrite it.
EVERY TIME when I try to move the cursor somewhere, delete some characters and add something new (for example, move to the position between two zeros, delete the first one and add 5 such that 100 changes to 150), it automatically brings back the characters I have just deleted. See below:
nav {
margin: 1050px auto;
text-align: center;
}
The deleted zero automatically goes back. It turns out to be super annoying to me but I couldn't get around this issue at all. Can anyone tell me how to edit the style just the way the same as people do in any text editor instead of it bringing back EVERYTHING I have deleted, making the edition totally messed up.
I'm hoping this is simple. I'm not a CSS guy.
I'm trying to make some code look a little better on a blog and I have the following <code> CSS style.
code {
display: block;
white-space:normal;
background-color: #eeeeee;
font: 1em, 'Courier New', Courier, Fixed;
padding: 7px;
margin: 7px 7px 7px 7px;
}
This is working fine for me, except where there are line breaks in the code contained in my <code> tag, the background color is white not light gray.
Is there a CSS tweak I can make to force my entire <code> block have a background color of gray?
Thanks.
Comment: If I put a space on the empty line, I get what I want - a gray background on that line.
Comment2: I have only plain text inside of my <code> </code> tags. Ideally I don't want to mark up my code w/ tags. Just cut and paste inside of the <code> tags and have it look decent.
Final Comment: After reading this as suggested by mercator below, I finally went with this. I subclassed the <pre> tag and got want I needed. A nicely shaded boxes to offset my example code blocks.
pre.code {
color: black;
border: solid 1px #eeeeee;
font-size: 1.1 em;
margin: 7px;
padding: 7px;
background: #eeeeee
}
It appears to work fine for me, but then I don't know what the contents of your <code> tags are.
There's a few oddities in your CSS in any case:
I probably wouldn't use display: block, but wrap the tags in a <p> or <pre> instead. Changing it to a block like that still won't allow you to nest block-level tags inside it, and it would still need to be inside a block-level tag itself. CSS doesn't change the HTML syntax and semantics. Do you have any block-level tags within your code tags?
Why did you set white-space: normal? That's a little unusual for a code block. How exactly are you formatting your code? Are you adding <p> or <br> tags in there? Why don't you use white-space: pre, or perhaps white-space: pre-wrap?
Your font declaration is broken. There shouldn't be a comma between the 1em and the font names. Browsers would now simply parse that as if 1em is the name of a font family, I think, and then fall back on Courier New, since 1em doesn't exist.
I think you meant to say monospace instead of Fixed. Or is Fixed the actual name of a font face? You'd better add the generic monospace anyway.
More of a nitpick: you can collapse those 4 margins down to one value too.
I'm not sure if any of these are really the cause of your problems. The first two are the most likely candidates. Nothing strange happened on the quick tests I did, but some of your other CSS might be creating the problems in combination with some of these points.
Ah, wait a minute... I see now that you're talking about making "some code look a little better on a blog". The blog software is automatically adding paragraph tags around blocks of text separated by blank lines. Those are responsible for the white.
I suppose that's also why you added white-space: normal. The blog software is already adding line breaks and everything automatically (with <p> and <br> tags), so using pre added a whole bunch of extra space.
Try using the <pre><code> tags combination like StackOverflow does. Using the <pre> tag will probably (hopefully) prevent the blog software from messing with your code.
For WordPress, have a look at their article "Writing Code in Your Posts."
Try setting an explicit width. Not sure why that would work. I sometimes add a border while testing to see where my box is and what it looks like. I know you can do that with web debuggers like firebug, sometimes it's simpler and might even have side effects.
add:
width: 100%;
border: 1px solid #eee;
See if that helps, maybe change the border color to #000 to see where the boundaries are.
Without some HTML and/or a test page, it's quite difficult to know what could be causing the problem. I would look at the line-height property though - it often causes these kind of problems.