putting all the cards of an i-ching deck on screen at once using a pug template and some carefully crafted i-ching data.
warning: the fonts are unstable and i have been unable to reproduce all characters on all platforms.
A Pen by Something Formed on CodePen.
| // i-ching data | |
| // converted csv to json array | |
| // http://www.convertcsv.com/csv-to-json.htm | |
| // https://pugjs.org/language/iteration.html | |
| - var fuxi = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63]; | |
| - var wen = [2,23,8,20,16,35,45,12,15,52,39,53,62,56,31,33,7,4,29,59,40,64,47,6,46,18,48,57,32,50,28,44,24,27,3,42,51,21,17,25,36,22,63,37,55,30,49,13,19,41,60,61,54,38,58,10,11,26,5,9,34,14,43,1]; | |
| - var title = ["坤","剝","比","觀","豫","晉","萃","否","謙","艮","蹇","漸","小過","旅","咸","遯","師","蒙","坎","渙","解","未濟","困","訟","升","蠱","井","巽","恆","鼎","大過","姤","復","頤","屯","益","震","噬嗑","隨","無妄","明夷","賁","既濟","家人","豐","離","革","同人","臨","損","節","中孚","歸妹","睽","兌","履","泰","大畜","需","小畜","大壯","大有","夬","乾"]; | |
| - var hex = ["䷁","䷖","䷇","䷓","䷏","䷢","䷬","䷋","䷎","䷳","䷦","䷴","䷽","䷷","䷞","䷠","䷆","䷃","䷜","䷺","䷧","䷿","䷮","䷅","䷭","䷑","䷯","䷸","䷟","䷱","䷛","䷫","䷗","䷚","䷂","䷩","䷲","䷔","䷐","䷘","䷣","䷕","䷾","䷤","䷶","䷝","䷰","䷌","䷒","䷨","䷻","䷼","䷵","䷥","䷹","䷉","䷊","䷙","䷄","䷈","䷡","䷍","䷪","䷀"]; | |
| - var text = ["Bearer Receptive Earth Submission Passive Principle Magnetic Flow Responsive Service Natural Response Field Yin","Disintegration Flaying Apart Falling Unraveling Peeling Decay Splitting Away Intrigue Deterioration Collapse Fracturing Tearing Ruin Stripping","Union Alliance Assistance Holding Unity Grouping Together Coordination Leadership Merging Seeking Unification Accord Subservience Individuation Integration","Contemplation Observation Looking Steady Work Viewing Down Up View Admiration Examine Rulers Subjects Introspection Perception Observing","Providing-For Enthusiasm Harmonious Joy Happiness Self-Deception Provision Excess Merriment Self-Confidence Contentment Harmonize Excitement Intemperance","Advance Dawn Progress Prospering Forwardness Consciousness Advancement Making Headway Getting Idea Comes","Gathering One Unity Massing Contraction Assembling Congregation Together Accord Making Whole Focusing Marshaling Clustering Finished","Obstruction Divorcement Closing Stagnation Standstill Obstructed Decadence Disjunction Impasse","Moderation Temperance Humility Modesty Humbling Respectful Humble Yielding Retiring","Keeping Stopping Still Checking Movement Desisting Stilling Mountain Stoppage Bound Reposing Resting Meditation Non-Action Arresting Stillness","Obstacles Impasse Difficulty Arresting Movement Trouble Obstruction Barrier Halt Halting Limping Afoot Sit Tight","Gradual Step Development Growth Progressive Advance Progress Advancing Developing Gradualness Dialectical Progression","Small Excess Exceeding Preponderance Things Powers Details Surpassing Conscientiousness Smallness Mean Proliferation Slight","Stranger Traveling Traveler Exile Sojourning Newcomer Transition Lodge Travel Wanderer Strangers Outsider Fool Wandering Homeless Uncommitted","Affection Initiative Wooing Attraction Sensation Stimulation Conjoining Feelings Sensitivity Sensing Influence Influencing Action Tension Seeking Union Persuasion Courting Response","Withdrawal Retiring Retirement Yielding Retreat Wielding Strategic Inaccessibility Disassociation Inferior","Discipline Army Multitude Willpower Legions Leading Troops Force Soldiers Group Action Disciplined Ego Collective","Folly Youthful Growth Covering Immaturity Uncultivated Inexperience Youth Acquiring Experience Ignorance Enveloping Darkness Foolishness","Danger Water Gorge Double Pit Abyss Abysmal Repeating Entrapment Sinking Pitfall Multiple Deep Dark Perilous Repeated","Dispersion Unintegrated Dissolution Disintegration Dispersal Overcoming Dissension Scattering Dispersing Expansion Reuniting Evaporation Reorganization Re-Shuffle Course Correction Catharsis","Release Obstacles Loosening Liberation Eliminating Deliverance Taking-Apart Untangled Solution Dissolution Relief Tension","Yet Not Before Completed What Past Unfinished Business Completion Tasks End Mission Unaccomplished State Transition","Confining Oppression Repression Confinement Adversity Weariness Exhaustion Entangled Hardship Depression Tiresome Restriction Dried","Stress Conflict Contention Strife Litigation Quarreling Arguing Lawsuit","Rising Growth Advancing Ascending Upward Promotion Advancement Sprouting Earth Organic Ascension","Work Decay Destruction Spoiled Repair Arresting Spoiling Fixing Rectifying Corrupting Branch Degeneration Misdeeds","Well Welling Potentialities Fulfilled Source Deep Psyche Resurrection","Penetration Gentle Penetrating Wind Submission Bending Enter Service Ground Calculations Complaisance Influence Humility Devoted Willing","Constancy Standing Consistency Long Enduring Constant Persevering Duration Fast Continuity Midst Change Holding Firm Routine Cycles","Vessel Sacrificial Cauldron Rejuvenation Cosmic Order Alchemical","Great Excess Greatness Passing Critical Preponderance Mass Surpassing Gains Experience Greater Dominance Mighty","Sexual Temptation Meet Meeting Contact Coming Intercourse Encountering Coupling Infiltration Adultery","Return Turning Point Returning Revival Repetition Repeat Renewal Restore Way Cyclic Recovery","Nourishment Corners Mouth Providing Cheek Jaws Lower Effort Nurturing Swallowing Sagacious Counsel Nourishing Feed Result Jaw","Difficulty Pains Initial Bursting Sprouting Hoarding Distress Beginning Growth Hardship Difficult Beginnings Growing Obstacles","Help Increase Addition Gain Augmenting Above Benefit Advantage Profit Expansion","Movement Thunder Beginning Startling Shock Shake Arousing Shocking Thunderclap Action Motion Sudden Change Surprise","Gnawing Punishment Bite Discernment Mastication Pressing Squeezing Biting Severing Chewing Reformation Reform Differentiation Discrimination Distinction Getting","With Following Acquiring Followers Adapting Adjusting According Accord Accompany Concordance Conformance Work","Freedom Innocence Unexpected Integrity Unintentional Fidelity Instinctive Goodness Simple Correctness Subconscious","Light Hiding Intelligence Injury Illumination Appearance Clear Clouded Wounded Darkening Wounding Bright Brightness Perception Calling Darkened Concealment Obliterated Unappreciated Censorship One Dark Night Soul Ignorance","Conceit Persona Decoration Elegance Gracefulness Luxuriance Adorning Public Image Adornment Beauty Grace Vanity Veneer Manners Embellishment Superficiality Superficial Appearances","Already Completion After Completed Climax Past Settled Mission Accomplished Tasks End","Family Life Clan Home Linkage Dwelling People Psyche","Abundance Behavior Awareness Fullness Prosperity Greatness Abounding Expansion Prolific Fruitful Luxuriant Zenith Affluence Correct Action Lucid Richness","Allegiance Clinging Brightness Separateness Flaming Beauty Radiance Fire Clarity Cosmic Mean Synergy Sunlight Perception Pertaining Comprehension Light Consciousness Lucidity","Change Molting Skinning Metamorphosis Transformation Revolution Leather Skin Molt Cut-Off Changing Radical Overthrowing","Human Union Fellowship People Forces Companionship Lovers Beloved Friends Like-Minded Confirmation Gathering Sameness Universal Community United Association Integration Minor Synthesis Cliques Concordance","Advance Ahead Approach Arrival Nearing Overseeing Condescension Getting Promotion Conduct Drawing Near Becoming Great Forest Advancing","Sacrifice Balance Diminishing Lessening Loss Compensating Reduction Diminution Excesses Decline Bringing Decrease Dynamic","Regulations Restrictive Limitation Restraint Articulating Receipt Restraining Containment","Sincerity Inner Central Center Inward Confidence Truth Centering Conforming Return Faithfulness Psyche Insight Understanding Truthfulness","Marrying Subordinate Propriety Marriage Younger Marriageable Making-Do Second Converting Returning Making Unilateral Action Impropriety Improper Advances","Alienation Polarizing Mutual Strangeness Disunion Estranged Opposites Opposition Distant Perversion Disharmony Separated Contradiction Estrangement Incongruity","Self-Indulgence Delight Joyous Joyousness Pleased Satisfaction Encouraging Joy Open Usurpation Pleasure Cheerfulness Frivolity Callow Optimism","Cautious Treading Conduct Stepping Carefully Proper Proceeding Advance Watch Care Proceed Advancing Cautiously","Tranquility Harmony Successfulness Prospering Pervading Greatness Peace Prosperity Conjunction Major Synthesis Holy Marriage","Great Power Taming Restraint Energy Buildup Accumulating Accumulation Storage Nurturance Controlled Nourisher Strong Potential Powers Force Under Control Restrained Sublimation Latent","Nourishment Waiting Inaction Blessing Attending Biding Calculated Time Through Moistened Forthcoming","Small Restraint Weak Taming Accumulating Nourisher Powers Power Harvest Obstruction Nurturance Passive Restrained Minor Lesser Restrain Strong","Great Power Force Strength Persons Authority Vigor Invigorating Maturity Accumulated Mighty Righteous Excessive","Great Wealth Possession Having Measure Possessing Possessor Abundance Sovereignty","Resolution Resoluteness Decision Breakthrough Determination Parting Removing Corruption Eradication","Creative Power Heaven Principle Key Dynamic Originating Primal Life Creativity Yang"]; | |
| // card iteration | |
| each txt, i in hex | |
| .card | |
| .hex=hex[i] | |
| .title=title[i] | |
| .text=text[i] | |
| .count.fu=fuxi[i] | |
| .count.wen=wen[i] |
| body { | |
| //background: #eee; | |
| margin: 0; | |
| -webkit-font-smoothing: antialiased; | |
| // 128dpi to 300dpi zoom | |
| //zoom: 1.33333; | |
| // half zoom for deck view | |
| //zoom: 0.5; | |
| font-size: 0; | |
| } | |
| .card { | |
| background-color: #fff; | |
| color: black; | |
| display: inline-block; | |
| height: 3.75in; | |
| width: 2.75in; | |
| //padding: 0.25in; | |
| //border-radius: 0.125in; | |
| box-sizing: border-box; | |
| //border: 1px solid silver; | |
| //margin: 1em; | |
| position: relative; | |
| font-size: 8pt; | |
| font-family: Alegreya Sans;// 'Playfair Display' | |
| page-break-after: always; | |
| } | |
| // debug soupcans | |
| .card * { | |
| //background-color: rgba(255,0,255,0.5); | |
| } | |
| .hex, | |
| .count, | |
| .text { | |
| position: absolute; | |
| } | |
| .hex { | |
| font-family: dejavu_sansbold; | |
| font-size: 72pt; | |
| line-height: 0; | |
| top: 0.875in; | |
| left: 1.5in; | |
| width: 1in; | |
| text-align: left; | |
| } | |
| .text { | |
| width: 1in; | |
| top: 0.5in; | |
| right: 1.5in; | |
| height: 2.5in; | |
| line-height: 1.33; | |
| font-size: 9pt; | |
| //white-space: pre-wrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| text-align: right; | |
| word-spacing: 1in; | |
| } | |
| .text:after { | |
| content: ' '; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| .title { | |
| position: absolute; | |
| width: 2.25in; | |
| bottom: 0.125in; | |
| left: 0.25in; | |
| height: 0.375in; | |
| line-height: 0.375in; | |
| text-align: center; | |
| font-size: 20pt; | |
| font-family: "Kozuka Gothic Pro"; | |
| font-weight: 700; | |
| } | |
| .count { | |
| bottom: 0.25in; | |
| line-height: 1; | |
| font-size: 9pt; | |
| font-weight: bold; | |
| height: 12pt; | |
| box-sizing: border-box; | |
| width: 12pt; | |
| text-align: center; | |
| } | |
| .count.fu { | |
| left: 0.375in; | |
| } | |
| .count.fu:before { | |
| content: 'F'; | |
| display: inline-block; | |
| font-size: 8pt; | |
| font-weight: normal; | |
| width: 100%; | |
| } | |
| .count.wen { | |
| right: 0.375in; | |
| } | |
| .count.wen:before { | |
| content: 'W'; | |
| display: inline-block; | |
| font-size: 8pt; | |
| font-weight: normal; | |
| width: 100%; | |
| } | |